@instructure/ui-spinner 8.8.1-snapshot.8 → 8.9.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.9.0](https://github.com/instructure/instructure-ui/compare/v8.8.0...v8.9.0) (2021-09-15)
+
+### Bug Fixes
+
+- fix shared-types TS errors ([7b83164](https://github.com/instructure/instructure-ui/commit/7b83164f4c5872f3a217e010563f59bf584ae4fc))
+
 # [8.8.0](https://github.com/instructure/instructure-ui/compare/v8.7.0...v8.8.0) (2021-08-27)
 
 **Note:** Version bump only for package @instructure/ui-spinner

package/es/Spinner/index.js

@@ -26,21 +26,21 @@ var _dec, _dec2, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { View } from '@instructure/ui-view';
 import { callRenderProp, omitProps } from '@instructure/ui-react-utils';
 import { uid } from '@instructure/uid';
 import { testable } from '@instructure/ui-testable';
 import { logError as error } from '@instructure/console';
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion';
+import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-
+import { allowedProps, propTypes } from './props';
 /**
 ---
 category: components
 ---
 **/
+
 let Spinner = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Spinner extends Component {
   constructor(props) {
     super(props);
@@ -48,11 +48,15 @@ let Spinner = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  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);
   }
 
   radius() {
@@ -72,16 +76,18 @@ let Spinner = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   render() {
+    var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
+
     const passthroughProps = View.omitViewProps(omitProps(this.props, Spinner.propTypes), Spinner);
     const hasTitle = this.props.renderTitle;
     error(hasTitle, '[Spinner] The renderTitle prop is necessary for screen reader support.');
     return jsx(View, Object.assign({}, passthroughProps, {
       as: this.props.as,
       elementRef: this.props.elementRef,
-      css: this.props.styles.spinner,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.spinner,
       margin: this.props.margin
     }), jsx("svg", {
-      css: this.props.styles.circle,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.circle,
       role: "img",
       "aria-labelledby": this.titleId,
       focusable: "false"
@@ -90,54 +96,22 @@ let Spinner = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     }, callRenderProp(this.props.renderTitle)), jsx("g", {
       role: "presentation"
     }, this.props.variant !== 'inverse' && jsx("circle", {
-      css: this.props.styles.circleTrack,
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.circleTrack,
       cx: "50%",
       cy: "50%",
       r: this.radius()
     }), jsx("circle", {
-      css: this.props.styles.circleSpin,
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.circleSpin,
       cx: "50%",
       cy: "50%",
       r: this.radius()
     }))));
   }
 
-}, _class2.displayName = "Spinner", _class2.componentId = 'Spinner', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-
-  /**
-   * Give the spinner a title to be read by screenreaders
-   */
-  renderTitle: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * Different-sized spinners
-   */
-  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
-
-  /**
-   * Different color schemes for use with light or dark backgrounds
-   */
-  variant: PropTypes.oneOf(['default', 'inverse']),
-
-  /**
-   * 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,
-  elementRef: PropTypes.func,
-  as: PropTypes.elementType
-}, _class2.defaultProps = {
-  renderTitle: void 0,
+}, _class2.displayName = "Spinner", _class2.componentId = 'Spinner', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   as: 'div',
   size: 'medium',
-  variant: 'default',
-  margin: void 0,
-  elementRef: void 0
+  variant: 'default'
 }, _temp)) || _class) || _class);
 export default Spinner;
 export { Spinner };

package/{src/Spinner/types.ts → es/Spinner/props.js}

@@ -21,17 +21,32 @@
  * 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';
+const propTypes = {
+  /**
+   * Give the spinner a title to be read by screenreaders
+   */
+  renderTitle: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
-import type { Spacing } from '@instructure/emotion'
-import { AsElementType } from '@instructure/shared-types'
+  /**
+   * Different-sized spinners
+   */
+  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
 
-export type SpinnerProps = {
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-  renderTitle?: ((...args: any[]) => any) | React.ReactNode
-  size?: 'x-small' | 'small' | 'medium' | 'large'
-  variant?: 'default' | 'inverse'
-  margin?: Spacing
-  elementRef?: (...args: any[]) => any
-  as?: AsElementType
-}
+  /**
+   * Different color schemes for use with light or dark backgrounds
+   */
+  variant: PropTypes.oneOf(['default', 'inverse']),
+
+  /**
+   * 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,
+  elementRef: PropTypes.func,
+  as: PropTypes.elementType
+};
+const allowedProps = ['renderTitle', 'size', 'variant', 'margin', 'elementRef', 'as'];
+export { propTypes, allowedProps };

package/lib/Spinner/index.js

@@ -9,8 +9,6 @@ exports.Spinner = exports.default = void 0;
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _View = require("@instructure/ui-view/lib/View");
 
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
@@ -29,6 +27,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 var _dec, _dec2, _class, _class2, _temp;
 
 /**
@@ -43,11 +43,15 @@ let Spinner = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  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);
   }
 
   radius() {
@@ -67,6 +71,8 @@ let Spinner = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   render() {
+    var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
+
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Spinner.propTypes), Spinner);
 
     const hasTitle = this.props.renderTitle;
@@ -74,10 +80,10 @@ let Spinner = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
       as: this.props.as,
       elementRef: this.props.elementRef,
-      css: this.props.styles.spinner,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.spinner,
       margin: this.props.margin
     }), (0, _emotion.jsx)("svg", {
-      css: this.props.styles.circle,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.circle,
       role: "img",
       "aria-labelledby": this.titleId,
       focusable: "false"
@@ -86,54 +92,22 @@ let Spinner = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     }, (0, _callRenderProp.callRenderProp)(this.props.renderTitle)), (0, _emotion.jsx)("g", {
       role: "presentation"
     }, this.props.variant !== 'inverse' && (0, _emotion.jsx)("circle", {
-      css: this.props.styles.circleTrack,
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.circleTrack,
       cx: "50%",
       cy: "50%",
       r: this.radius()
     }), (0, _emotion.jsx)("circle", {
-      css: this.props.styles.circleSpin,
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.circleSpin,
       cx: "50%",
       cy: "50%",
       r: this.radius()
     }))));
   }
 
-}, _class2.displayName = "Spinner", _class2.componentId = 'Spinner', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-
-  /**
-   * Give the spinner a title to be read by screenreaders
-   */
-  renderTitle: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-
-  /**
-   * Different-sized spinners
-   */
-  size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
-
-  /**
-   * Different color schemes for use with light or dark backgrounds
-   */
-  variant: _propTypes.default.oneOf(['default', 'inverse']),
-
-  /**
-   * 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,
-  elementRef: _propTypes.default.func,
-  as: _propTypes.default.elementType
-}, _class2.defaultProps = {
-  renderTitle: void 0,
+}, _class2.displayName = "Spinner", _class2.componentId = 'Spinner', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   as: 'div',
   size: 'medium',
-  variant: 'default',
-  margin: void 0,
-  elementRef: void 0
+  variant: 'default'
 }, _temp)) || _class) || _class);
 exports.Spinner = Spinner;
 var _default = Spinner;

package/lib/Spinner/props.js

@@ -0,0 +1,64 @@
+"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 = {
+  /**
+   * Give the spinner a title to be read by screenreaders
+   */
+  renderTitle: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+
+  /**
+   * Different-sized spinners
+   */
+  size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
+
+  /**
+   * Different color schemes for use with light or dark backgrounds
+   */
+  variant: _propTypes.default.oneOf(['default', 'inverse']),
+
+  /**
+   * 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,
+  elementRef: _propTypes.default.func,
+  as: _propTypes.default.elementType
+};
+exports.propTypes = propTypes;
+const allowedProps = ['renderTitle', 'size', 'variant', 'margin', 'elementRef', 'as'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-spinner",
-  "version": "8.8.1-snapshot.8+7b83164f4",
+  "version": "8.9.0",
   "description": "A spinner/loading component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,22 +25,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/emotion": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/shared-types": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-color-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-testable": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-view": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/uid": "8.8.1-snapshot.8+7b83164f4",
+    "@instructure/console": "8.9.0",
+    "@instructure/emotion": "8.9.0",
+    "@instructure/shared-types": "8.9.0",
+    "@instructure/ui-color-utils": "8.9.0",
+    "@instructure/ui-react-utils": "8.9.0",
+    "@instructure/ui-testable": "8.9.0",
+    "@instructure/ui-utils": "8.9.0",
+    "@instructure/ui-view": "8.9.0",
+    "@instructure/uid": "8.9.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-test-locator": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-themes": "8.8.1-snapshot.8+7b83164f4"
+    "@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"
@@ -48,6 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "7b83164f4c5872f3a217e010563f59bf584ae4fc"
+  "sideEffects": false
 }

package/src/Spinner/index.tsx

@@ -23,7 +23,6 @@
  */
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { View } from '@instructure/ui-view'
 import { callRenderProp, omitProps } from '@instructure/ui-react-utils'
@@ -31,11 +30,12 @@ import { uid } from '@instructure/uid'
 import { testable } from '@instructure/ui-testable'
 import { logError as error } from '@instructure/console'
 
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { SpinnerProps } from './types'
+import type { SpinnerProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -46,41 +46,12 @@ category: components
 @testable()
 class Spinner extends Component<SpinnerProps> {
   static readonly componentId = 'Spinner'
-
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    /**
-     * Give the spinner a title to be read by screenreaders
-     */
-    renderTitle: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-    /**
-     * Different-sized spinners
-     */
-    size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
-    /**
-     * Different color schemes for use with light or dark backgrounds
-     */
-    variant: PropTypes.oneOf(['default', 'inverse']),
-    /**
-     * 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,
-    elementRef: PropTypes.func,
-    as: PropTypes.elementType
-  }
-
+  static allowedProps = allowedProps
+  static propTypes = propTypes
   static defaultProps = {
-    renderTitle: undefined,
     as: 'div',
     size: 'medium',
-    variant: 'default',
-    margin: undefined,
-    elementRef: undefined
+    variant: 'default'
   }
 
   // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
@@ -92,14 +63,11 @@ class Spinner extends Component<SpinnerProps> {
   }
 
   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?.()
   }
 
   radius() {
@@ -133,11 +101,11 @@ class Spinner extends Component<SpinnerProps> {
         {...passthroughProps}
         as={this.props.as}
         elementRef={this.props.elementRef}
-        css={this.props.styles.spinner}
+        css={this.props.styles?.spinner}
         margin={this.props.margin}
       >
         <svg
-          css={this.props.styles.circle}
+          css={this.props.styles?.circle}
           role="img"
           // @ts-expect-error ts-migrate(2339) FIXME: Property 'titleId' does not exist on type 'Spinner... Remove this comment to see the full error message
           aria-labelledby={this.titleId}
@@ -150,14 +118,14 @@ class Spinner extends Component<SpinnerProps> {
           <g role="presentation">
             {this.props.variant !== 'inverse' && (
               <circle
-                css={this.props.styles.circleTrack}
+                css={this.props.styles?.circleTrack}
                 cx="50%"
                 cy="50%"
                 r={this.radius()}
               />
             )}
             <circle
-              css={this.props.styles.circleSpin}
+              css={this.props.styles?.circleSpin}
               cx="50%"
               cy="50%"
               r={this.radius()}

package/src/Spinner/props.ts

@@ -0,0 +1,79 @@
+/*
+ * 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 { AsElementType, PropValidators } from '@instructure/shared-types'
+
+type SpinnerOwnProps = {
+  renderTitle?: ((...args: any[]) => any) | React.ReactNode
+  size?: 'x-small' | 'small' | 'medium' | 'large'
+  variant?: 'default' | 'inverse'
+  margin?: Spacing
+  elementRef?: (...args: any[]) => any
+  as?: AsElementType
+}
+
+type PropKeys = keyof SpinnerOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type SpinnerProps = SpinnerOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * Give the spinner a title to be read by screenreaders
+   */
+  renderTitle: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  /**
+   * Different-sized spinners
+   */
+  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
+  /**
+   * Different color schemes for use with light or dark backgrounds
+   */
+  variant: PropTypes.oneOf(['default', 'inverse']),
+  /**
+   * 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,
+  elementRef: PropTypes.func,
+  as: PropTypes.elementType
+}
+
+const allowedProps: AllowedPropKeys = [
+  'renderTitle',
+  'size',
+  'variant',
+  'margin',
+  'elementRef',
+  'as'
+]
+
+export type { SpinnerProps }
+export { propTypes, allowedProps }

package/src/Spinner/styles.ts

@@ -24,7 +24,7 @@
 
 import { keyframes } from '@instructure/emotion'
 import { SpinnerTheme } from '@instructure/shared-types'
-import { SpinnerProps } from './types'
+import { SpinnerProps } from './props'
 
 // keyframes have to be outside of 'generateStyle',
 // since it is causing problems in style recalculation

package/src/index.ts

@@ -23,4 +23,4 @@
  */
 
 export { Spinner } from './Spinner'
-export type { SpinnerProps } from './Spinner/types'
+export type { SpinnerProps } from './Spinner/props'

package/types/Spinner/index.d.ts

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { jsx } from '@instructure/emotion';
-import { SpinnerProps } from './types';
+import type { SpinnerProps } from './props';
 /**
 ---
 category: components
@@ -10,41 +9,30 @@ category: components
 **/
 declare class Spinner extends Component<SpinnerProps> {
     static readonly componentId = "Spinner";
-    static propTypes: {
-        makeStyles: PropTypes.Requireable<(...args: any[]) => any>;
-        styles: PropTypes.Requireable<object>;
-        /**
-         * Give the spinner a title to be read by screenreaders
-         */
-        renderTitle: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        /**
-         * Different-sized spinners
-         */
-        size: PropTypes.Requireable<string>;
-        /**
-         * Different color schemes for use with light or dark backgrounds
-         */
-        variant: PropTypes.Requireable<string>;
-        /**
-         * 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: (props: any, propName: any, componentName: any, location: any) => any;
-        elementRef: PropTypes.Requireable<(...args: any[]) => any>;
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-    };
+    static allowedProps: readonly (keyof {
+        renderTitle?: import("react").ReactNode | ((...args: any[]) => any);
+        size?: "x-small" | "small" | "medium" | "large" | undefined;
+        variant?: "default" | "inverse" | undefined;
+        margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        elementRef?: ((...args: any[]) => any) | undefined;
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+    })[];
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        renderTitle?: import("react").ReactNode | ((...args: any[]) => any);
+        size?: "x-small" | "small" | "medium" | "large" | undefined;
+        variant?: "default" | "inverse" | undefined;
+        margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
+        elementRef?: ((...args: any[]) => any) | undefined;
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+    }>;
     static defaultProps: {
-        renderTitle: undefined;
         as: string;
         size: string;
         variant: string;
-        margin: undefined;
-        elementRef: undefined;
     };
     constructor(props: any);
     componentDidMount(): void;
-    componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
+    componentDidUpdate(): void;
     radius(): "0.5em" | "1em" | "2.25em" | "1.75em";
     render(): jsx.JSX.Element;
 }

package/types/Spinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Spinner/index.tsx"],"names":[],"mappings":"AAuBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,SAAS,MAAM,YAAY,CAAA;AAQlC,OAAO,EAAa,GAAG,EAAsB,MAAM,sBAAsB,CAAA;AAIzE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC;;;;GAIG;AACH,cAEM,OAAQ,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC3C,MAAM,CAAC,QAAQ,CAAC,WAAW,aAAY;IAEvC,MAAM,CAAC,SAAS;;;QAKd;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;;;WAIG;;;;MAIJ;IAED,MAAM,CAAC,YAAY;;;;;;;MAOlB;gBAGW,KAAK,KAAA;IAOjB,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,MAAM;IAaN,MAAM;CAoDP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Spinner/index.tsx"],"names":[],"mappings":"AAuBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C;;;;GAIG;AACH,cAEM,OAAQ,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC3C,MAAM,CAAC,QAAQ,CAAC,WAAW,aAAY;IACvC,MAAM,CAAC,YAAY;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;MAIlB;gBAGW,KAAK,KAAA;IAOjB,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM;IAaN,MAAM;CAoDP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/types/Spinner/props.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { Spacing, WithStyleProps } from '@instructure/emotion';
+import type { AsElementType, PropValidators } from '@instructure/shared-types';
+declare type SpinnerOwnProps = {
+    renderTitle?: ((...args: any[]) => any) | React.ReactNode;
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    variant?: 'default' | 'inverse';
+    margin?: Spacing;
+    elementRef?: (...args: any[]) => any;
+    as?: AsElementType;
+};
+declare type PropKeys = keyof SpinnerOwnProps;
+declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
+declare type SpinnerProps = SpinnerOwnProps & WithStyleProps;
+declare const propTypes: PropValidators<PropKeys>;
+declare const allowedProps: AllowedPropKeys;
+export type { SpinnerProps };
+export { propTypes, allowedProps };
+//# sourceMappingURL=props.d.ts.map

package/types/Spinner/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Spinner/props.ts"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE9E,aAAK,eAAe,GAAG;IACrB,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,EAAE,CAAC,EAAE,aAAa,CAAA;CACnB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,eAAe,CAAA;AAErC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,YAAY,GAAG,eAAe,GAAG,cAAc,CAAA;AAEpD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAqBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAOnB,CAAA;AAED,YAAY,EAAE,YAAY,EAAE,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Spinner/styles.d.ts

@@ -1,5 +1,5 @@
 import { SpinnerTheme } from '@instructure/shared-types';
-import { SpinnerProps } from './types';
+import { SpinnerProps } from './props';
 /**
  * ---
  * private: true

package/types/index.d.ts

@@ -1,3 +1,3 @@
 export { Spinner } from './Spinner';
-export type { SpinnerProps } from './Spinner/types';
+export type { SpinnerProps } from './Spinner/props';
 //# sourceMappingURL=index.d.ts.map

package/LICENSE.md

@@ -1,27 +0,0 @@
----
-title: The MIT License (MIT)
-category: Getting Started
-order: 9
----
-
-# The MIT License (MIT)
-
-Copyright (c) 2015 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.

package/es/Spinner/types.js

@@ -1 +0,0 @@
-export {};

package/lib/Spinner/types.js

@@ -1 +0,0 @@
-"use strict";

package/types/Spinner/types.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import type { Spacing } from '@instructure/emotion';
-import { AsElementType } from '@instructure/shared-types';
-export declare type SpinnerProps = {
-    makeStyles?: (...args: any[]) => any;
-    styles?: any;
-    renderTitle?: ((...args: any[]) => any) | React.ReactNode;
-    size?: 'x-small' | 'small' | 'medium' | 'large';
-    variant?: 'default' | 'inverse';
-    margin?: Spacing;
-    elementRef?: (...args: any[]) => any;
-    as?: AsElementType;
-};
-//# sourceMappingURL=types.d.ts.map

package/types/Spinner/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Spinner/types.ts"],"names":[],"mappings":";AAwBA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,oBAAY,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,EAAE,CAAC,EAAE,aAAa,CAAA;CACnB,CAAA"}