@instructure/ui-rating 8.19.1-snapshot.8 → 8.20.0

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.20.0](https://github.com/instructure/instructure-ui/compare/v8.19.0...v8.20.0) (2022-03-22)
+
+**Note:** Version bump only for package @instructure/ui-rating
+
 # [8.19.0](https://github.com/instructure/instructure-ui/compare/v8.18.0...v8.19.0) (2022-03-16)
 
 **Note:** Version bump only for package @instructure/ui-rating

package/es/Rating/RatingLocator.js

@@ -22,5 +22,6 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { Rating } from './index';
+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/index.js

@@ -38,6 +38,7 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let Rating = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Rating extends Component {
@@ -68,7 +69,7 @@ let Rating = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_c
           iconCount = _this$props3.iconCount,
           valueMax = _this$props3.valueMax; // prevent divide by zero errors
 
-    const max = valueMax > 0 ? valueMax : iconCount;
+    const max = !!valueMax && valueMax > 0 ? valueMax : iconCount;
     const filledIcons = Math.round(valueNow * iconCount / max); // Handle edge case where valueNow is greater than valueMax
 
     if (filledIcons > iconCount) {
@@ -92,20 +93,20 @@ let Rating = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_c
           margin = _this$props4.margin,
           label = _this$props4.label,
           formatValueText = _this$props4.formatValueText;
-    const valueText = label + ' ' + formatValueText(this.filled, iconCount);
+    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, {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rating,
       margin: margin,
       display: "inline-block",
       elementRef: this.handleRef
-    }), jsx(ScreenReaderContent, null, valueText), [...Array(this.filled)].map((x, i) => jsx(RatingIcon, {
+    }), jsx(ScreenReaderContent, null, valueText), [...Array(this.filled)].map((_x, i) => jsx(RatingIcon, {
       key: i + 1,
       filled: true,
       animateFill: animateFill,
-      animationDelay: animateFill ? (i + 1) * 200 : null,
+      animationDelay: animateFill ? (i + 1) * 200 : void 0,
       size: size
-    })), [...Array(this.empty)].map((x, i) => jsx(RatingIcon, {
+    })), [...Array(this.empty)].map((_x, i) => jsx(RatingIcon, {
       key: i + 1,
       size: size
     })));

package/es/Rating/props.js

@@ -24,46 +24,13 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * A label is required for accessibility
-   */
   label: PropTypes.string.isRequired,
-
-  /**
-   * A function that returns the current value formatted for screen readers
-   */
   formatValueText: PropTypes.func,
-
-  /**
-   * Choose from a 0-3 or 0-5 rating system
-   */
   iconCount: PropTypes.oneOf([3, 5]),
-
-  /**
-   * Choose from different rating icon sizes
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * The maximum rating (defaults to iconCount)
-   */
   valueMax: PropTypes.number,
-
-  /**
-   * The current rating
-   */
   valueNow: PropTypes.number,
-
-  /**
-   * Set to make the icons animate when they become filled
-   */
   animateFill: PropTypes.bool,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing
 };
 const allowedProps = ['label', 'formatValueText', 'iconCount', 'size', 'valueMax', 'valueNow', 'animateFill', 'margin'];

package/es/RatingIcon/index.js

@@ -38,11 +38,12 @@ import { allowedProps, propTypes } from './props';
 parent: Rating
 id: Rating.Icon
 ---
+@tsProps
 **/
 
 let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class RatingIcon extends Component {
   constructor(props) {
-    super();
+    super(props);
     this.ref = null;
     this._timeouts = [];
     this._animation = void 0;

package/lib/Rating/RatingLocator.js

@@ -32,5 +32,6 @@ 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/index.js

@@ -31,6 +31,7 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let Rating = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Rating extends _react.Component {
   constructor() {
@@ -60,7 +61,7 @@ let Rating = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0,
           iconCount = _this$props3.iconCount,
           valueMax = _this$props3.valueMax; // prevent divide by zero errors
 
-    const max = valueMax > 0 ? valueMax : iconCount;
+    const max = !!valueMax && valueMax > 0 ? valueMax : iconCount;
     const filledIcons = Math.round(valueNow * iconCount / max); // Handle edge case where valueNow is greater than valueMax
 
     if (filledIcons > iconCount) {
@@ -84,7 +85,7 @@ let Rating = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0,
           margin = _this$props4.margin,
           label = _this$props4.label,
           formatValueText = _this$props4.formatValueText;
-    const valueText = label + ' ' + formatValueText(this.filled, iconCount);
+    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);
 
@@ -93,13 +94,13 @@ let Rating = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0,
       margin: margin,
       display: "inline-block",
       elementRef: this.handleRef
-    }), (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, valueText), [...Array(this.filled)].map((x, i) => (0, _emotion.jsx)(_RatingIcon.RatingIcon, {
+    }), (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, valueText), [...Array(this.filled)].map((_x, i) => (0, _emotion.jsx)(_RatingIcon.RatingIcon, {
       key: i + 1,
       filled: true,
       animateFill: animateFill,
-      animationDelay: animateFill ? (i + 1) * 200 : null,
+      animationDelay: animateFill ? (i + 1) * 200 : void 0,
       size: size
-    })), [...Array(this.empty)].map((x, i) => (0, _emotion.jsx)(_RatingIcon.RatingIcon, {
+    })), [...Array(this.empty)].map((_x, i) => (0, _emotion.jsx)(_RatingIcon.RatingIcon, {
       key: i + 1,
       size: size
     })));

package/lib/Rating/props.js

@@ -35,46 +35,13 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * A label is required for accessibility
-   */
   label: _propTypes.default.string.isRequired,
-
-  /**
-   * A function that returns the current value formatted for screen readers
-   */
   formatValueText: _propTypes.default.func,
-
-  /**
-   * Choose from a 0-3 or 0-5 rating system
-   */
   iconCount: _propTypes.default.oneOf([3, 5]),
-
-  /**
-   * Choose from different rating icon sizes
-   */
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * The maximum rating (defaults to iconCount)
-   */
   valueMax: _propTypes.default.number,
-
-  /**
-   * The current rating
-   */
   valueNow: _propTypes.default.number,
-
-  /**
-   * Set to make the icons animate when they become filled
-   */
   animateFill: _propTypes.default.bool,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing
 };
 exports.propTypes = propTypes;

package/lib/RatingIcon/index.js

@@ -32,10 +32,11 @@ var _dec, _class, _class2, _temp;
 parent: Rating
 id: Rating.Icon
 ---
+@tsProps
 **/
 let RatingIcon = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class RatingIcon extends _react.Component {
   constructor(props) {
-    super();
+    super(props);
     this.ref = null;
     this._timeouts = [];
     this._animation = void 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-rating",
-  "version": "8.19.1-snapshot.8+8648faa3b",
+  "version": "8.20.0",
   "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.19.1-snapshot.8+8648faa3b",
-    "@instructure/emotion": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/shared-types": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-a11y-content": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-dom-utils": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-icons": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-motion": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-react-utils": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-testable": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-view": "8.19.1-snapshot.8+8648faa3b",
+    "@instructure/console": "8.20.0",
+    "@instructure/emotion": "8.20.0",
+    "@instructure/shared-types": "8.20.0",
+    "@instructure/ui-a11y-content": "8.20.0",
+    "@instructure/ui-dom-utils": "8.20.0",
+    "@instructure/ui-icons": "8.20.0",
+    "@instructure/ui-motion": "8.20.0",
+    "@instructure/ui-react-utils": "8.20.0",
+    "@instructure/ui-testable": "8.20.0",
+    "@instructure/ui-view": "8.20.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-test-locator": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-test-utils": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-themes": "8.19.1-snapshot.8+8648faa3b"
+    "@instructure/ui-babel-preset": "8.20.0",
+    "@instructure/ui-test-locator": "8.20.0",
+    "@instructure/ui-test-utils": "8.20.0",
+    "@instructure/ui-themes": "8.20.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -48,6 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "8648faa3b9f006a729a4d13195dd9c28e23d1335"
+  "sideEffects": false
 }

package/src/Rating/index.tsx

@@ -39,6 +39,7 @@ import { allowedProps, propTypes } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, null)
 @testable()
@@ -50,8 +51,8 @@ class Rating extends Component<RatingProps> {
 
   static defaultProps = {
     animateFill: false,
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'filled' implicitly has an 'any' type.
-    formatValueText: (filled, iconCount) => `${filled} / ${iconCount}`,
+    formatValueText: (filled: number, iconCount: number) =>
+      `${filled} / ${iconCount}`,
     iconCount: 3,
     size: 'medium',
     valueNow: 0
@@ -77,38 +78,27 @@ class Rating extends Component<RatingProps> {
     const { valueNow, iconCount, valueMax } = this.props
 
     // prevent divide by zero errors
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-    const max = valueMax > 0 ? valueMax : iconCount
+    const max = !!valueMax && valueMax > 0 ? valueMax : iconCount!
 
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-    const filledIcons = Math.round((valueNow * iconCount) / max)
+    const filledIcons = Math.round((valueNow! * iconCount!) / max)
 
     // Handle edge case where valueNow is greater than valueMax
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-    if (filledIcons > iconCount) {
-      return iconCount
+    if (filledIcons > iconCount!) {
+      return iconCount!
     } else {
       return filledIcons
     }
   }
 
   get empty() {
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-    return this.props.iconCount - this.filled
+    return this.props.iconCount! - this.filled!
   }
 
   render() {
-    const {
-      iconCount,
-      animateFill,
-      size,
-      margin,
-      label,
-      formatValueText
-    } = this.props
-
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    const valueText = label + ' ' + formatValueText(this.filled, iconCount)
+    const { iconCount, animateFill, size, margin, label, formatValueText } =
+      this.props
+
+    const valueText = label + ' ' + formatValueText?.(this.filled, iconCount!)
 
     const passthroughProps = View.omitViewProps(
       omitProps(this.props, Rating.allowedProps),
@@ -124,19 +114,16 @@ class Rating extends Component<RatingProps> {
         elementRef={this.handleRef}
       >
         <ScreenReaderContent>{valueText}</ScreenReaderContent>
-        {/* @ts-expect-error ts-migrate(6133) FIXME: 'x' is declared but its value is never read. */}
-        {[...Array(this.filled)].map((x, i) => (
+        {[...Array(this.filled)].map((_x, i) => (
           <RatingIcon
             key={i + 1}
             filled
             animateFill={animateFill}
-            // @ts-expect-error ts-migrate(2322) FIXME: Type 'number | null' is not assignable to type 'nu... Remove this comment to see the full error message
-            animationDelay={animateFill ? (i + 1) * 200 : null}
+            animationDelay={animateFill ? (i + 1) * 200 : undefined}
             size={size}
           />
         ))}
-        {/* @ts-expect-error ts-migrate(6133) FIXME: 'x' is declared but its value is never read. */}
-        {[...Array(this.empty)].map((x, i) => (
+        {[...Array(this.empty)].map((_x, i) => (
           <RatingIcon key={i + 1} size={size} />
         ))}
       </View>

package/src/Rating/props.ts

@@ -36,13 +36,39 @@ import type {
 } from '@instructure/shared-types'
 
 type RatingOwnProps = {
+  /**
+   * A label is required for accessibility
+   */
   label: string
-  formatValueText?: (...args: any[]) => any
+  /**
+   * A function that returns the current value formatted for screen readers
+   */
+  formatValueText?: (filled: number, iconCount: number) => string
+  /**
+   * Choose from a 0-3 or 0-5 rating system
+   */
   iconCount?: 3 | 5
+  /**
+   * Choose from different rating icon sizes
+   */
   size?: 'small' | 'medium' | 'large'
+  /**
+   * The maximum rating (defaults to iconCount)
+   */
   valueMax?: number
+  /**
+   * The current rating
+   */
   valueNow?: number
+  /**
+   * Set to make the icons animate when they become filled
+   */
   animateFill?: boolean
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
   margin?: Spacing
 }
 
@@ -57,39 +83,13 @@ type RatingProps = RatingOwnProps &
 type RatingStyle = ComponentStyle<'rating'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * A label is required for accessibility
-   */
   label: PropTypes.string.isRequired,
-  /**
-   * A function that returns the current value formatted for screen readers
-   */
   formatValueText: PropTypes.func,
-  /**
-   * Choose from a 0-3 or 0-5 rating system
-   */
   iconCount: PropTypes.oneOf([3, 5]),
-  /**
-   * Choose from different rating icon sizes
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * The maximum rating (defaults to iconCount)
-   */
   valueMax: PropTypes.number,
-  /**
-   * The current rating
-   */
   valueNow: PropTypes.number,
-  /**
-   * Set to make the icons animate when they become filled
-   */
   animateFill: PropTypes.bool,
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing
 }
 

package/src/RatingIcon/index.tsx

@@ -41,6 +41,7 @@ import { allowedProps, propTypes } from './props'
 parent: Rating
 id: Rating.Icon
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class RatingIcon extends Component<RatingIconProps, RatingIconState> {
@@ -56,25 +57,22 @@ class RatingIcon extends Component<RatingIconProps, RatingIconState> {
     size: 'medium'
   }
 
-  ref: Element | null = null
+  ref: HTMLSpanElement | null = null
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
-    // @ts-expect-error ts-migrate(2554) FIXME: Expected 1-2 arguments, but got 0.
-    super()
+  constructor(props: RatingIconProps) {
+    super(props)
 
     this.state = {
-      filled: props.filled && !props.animateFill
+      filled: props.filled! && !props.animateFill
     }
   }
 
-  _timeouts = []
+  _timeouts: ReturnType<typeof setTimeout>[] = []
   _animation: RequestAnimationFrameType | undefined
 
   componentDidMount() {
     this.props.makeStyles?.(this.makeStyleProps())
     if (this.props.animateFill) {
-      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'Timeout' is not assignable to pa... Remove this comment to see the full error message
       this._timeouts.push(setTimeout(this.fill, this.props.animationDelay))
     }
   }