@instructure/ui-rating 8.8.1-snapshot.3 → 8.9.0

package/lib/Rating/props.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _emotion = require("@instructure/emotion");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * 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;
+const allowedProps = ['label', 'formatValueText', 'iconCount', 'size', 'valueMax', 'valueNow', 'animateFill', 'margin'];
+exports.allowedProps = allowedProps;

package/lib/RatingIcon/index.js

@@ -9,8 +9,6 @@ exports.RatingIcon = exports.default = void 0;
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _IconStarSolid = require("@instructure/ui-icons/lib/IconStarSolid.js");
 
 var _IconStarLightSolid = require("@instructure/ui-icons/lib/IconStarLightSolid.js");
@@ -25,6 +23,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 var _dec, _class, _class2, _temp;
 
 /**
@@ -59,19 +59,23 @@ let RatingIcon = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   componentDidMount() {
-    this.props.makeStyles(this.makeStyleProps());
+    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, prevState, snapshot) {
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props2;
+
     if (this.props.animateFill && this.props.filled && this.props.filled !== prevProps.filled) {
       this.fill();
     }
 
-    this.props.makeStyles(this.makeStyleProps());
+    (_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() {
@@ -81,31 +85,24 @@ let RatingIcon = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   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", {
-      css: this.props.styles.ratingIcon
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.ratingIcon
     }, (0, _emotion.jsx)("span", null, this.state.filled && animateFill ? (0, _emotion.jsx)(_Transition.Transition, {
       in: true,
       transitionOnMount: true,
       type: "scale"
     }, (0, _emotion.jsx)(Icon, {
-      css: this.props.styles.icon
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon
     })) : (0, _emotion.jsx)(Icon, {
-      css: this.props.styles.icon
+      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.propTypes = {
-  animationDelay: _propTypes.default.number,
-  animateFill: _propTypes.default.bool,
-  filled: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object
-}, _class2.defaultProps = {
+}, _class2.displayName = "RatingIcon", _class2.componentId = 'Rating.Icon', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   animationDelay: 200,
   animateFill: false,
   filled: false,

package/{src/Rating/types.ts → lib/RatingIcon/props.js}

@@ -1,3 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 /*
  * The MIT License (MIT)
  *
@@ -21,18 +32,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-import type { Spacing } from '@instructure/emotion'
-
-export type RatingProps = {
-  label: string
-  formatValueText?: (...args: any[]) => any
-  iconCount?: 3 | 5
-  size?: 'small' | 'medium' | 'large'
-  valueMax?: number
-  valueNow?: number
-  animateFill?: boolean
-  margin?: Spacing
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-}
+const propTypes = {
+  animationDelay: _propTypes.default.number,
+  animateFill: _propTypes.default.bool,
+  filled: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(['small', 'medium', 'large'])
+};
+exports.propTypes = propTypes;
+const allowedProps = ['animationDelay', 'animateFill', 'filled', 'size'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-rating",
-  "version": "8.8.1-snapshot.3+d5d6d4cd8",
+  "version": "8.9.0",
   "description": "A static rating component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,23 +25,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/emotion": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-a11y-content": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-dom-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-icons": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-motion": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-testable": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-view": "8.8.1-snapshot.3+d5d6d4cd8",
+    "@instructure/console": "8.9.0",
+    "@instructure/emotion": "8.9.0",
+    "@instructure/shared-types": "8.9.0",
+    "@instructure/ui-a11y-content": "8.9.0",
+    "@instructure/ui-dom-utils": "8.9.0",
+    "@instructure/ui-icons": "8.9.0",
+    "@instructure/ui-motion": "8.9.0",
+    "@instructure/ui-react-utils": "8.9.0",
+    "@instructure/ui-testable": "8.9.0",
+    "@instructure/ui-view": "8.9.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/shared-types": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-locator": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-themes": "8.8.1-snapshot.3+d5d6d4cd8"
+    "@instructure/ui-babel-preset": "8.9.0",
+    "@instructure/ui-test-locator": "8.9.0",
+    "@instructure/ui-test-utils": "8.9.0",
+    "@instructure/ui-themes": "8.9.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -49,6 +49,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "d5d6d4cd8f300e8635c69248f5d794c002269e08"
+  "sideEffects": false
 }

package/src/Rating/index.tsx

@@ -24,16 +24,16 @@
 
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { View } from '@instructure/ui-view'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 import { RatingIcon } from '../RatingIcon'
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from './styles'
-import { RatingProps } from './types'
+import type { RatingProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -45,47 +45,8 @@ category: components
 class Rating extends Component<RatingProps> {
   static readonly componentId = 'Rating'
 
-  static 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,
-
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object
-  }
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     animateFill: false,
@@ -93,22 +54,17 @@ class Rating extends Component<RatingProps> {
     formatValueText: (filled, iconCount) => `${filled} / ${iconCount}`,
     iconCount: 3,
     size: 'medium',
-    valueNow: 0,
-    margin: undefined,
-    valueMax: undefined
+    valueNow: 0
   }
 
   static Icon = RatingIcon
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   get filled() {
@@ -156,7 +112,7 @@ class Rating extends Component<RatingProps> {
     return (
       <View
         {...passthroughProps}
-        css={this.props.styles.rating}
+        css={this.props.styles?.rating}
         margin={margin}
         display="inline-block"
       >

package/src/Rating/props.ts

@@ -0,0 +1,97 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import PropTypes from 'prop-types'
+
+import { ThemeablePropTypes } from '@instructure/emotion'
+
+import type { Spacing, WithStyleProps } from '@instructure/emotion'
+import type { PropValidators } from '@instructure/shared-types'
+
+type RatingOwnProps = {
+  label: string
+  formatValueText?: (...args: any[]) => any
+  iconCount?: 3 | 5
+  size?: 'small' | 'medium' | 'large'
+  valueMax?: number
+  valueNow?: number
+  animateFill?: boolean
+  margin?: Spacing
+}
+
+type PropKeys = keyof RatingOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type RatingProps = RatingOwnProps & WithStyleProps
+
+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
+}
+
+const allowedProps: AllowedPropKeys = [
+  'label',
+  'formatValueText',
+  'iconCount',
+  'size',
+  'valueMax',
+  'valueNow',
+  'animateFill',
+  'margin'
+]
+
+export type { RatingProps }
+export { propTypes, allowedProps }