@instructure/ui-svg-images 8.10.3-snapshot.9 → 8.11.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.11.0](https://github.com/instructure/instructure-ui/compare/v8.10.2...v8.11.0) (2021-10-15)
+
+### Bug Fixes
+
+- **ui-svg-images:** fix icons getting cropped in zoomed windows ([732ac88](https://github.com/instructure/instructure-ui/commit/732ac885d8fdad2ae1cbccb81faebcd96ee9c2f3))
+
 ## [8.10.2](https://github.com/instructure/instructure-ui/compare/v8.10.1...v8.10.2) (2021-10-01)
 
 **Note:** Version bump only for package @instructure/ui-svg-images

package/es/InlineSVG/index.js

@@ -48,10 +48,12 @@ let InlineSVG = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     this.ref = null;
 
     this.handleRef = el => {
-      var _this$props$elementRe, _this$props;
-
+      const elementRef = this.props.elementRef;
       this.ref = el;
-      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
     };
 
     this.titleId = uid('InlineSVG-title');
@@ -59,15 +61,15 @@ let InlineSVG = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    (_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$props3;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   get role() {
@@ -102,7 +104,7 @@ let InlineSVG = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       ids.push(this.descId);
     }
 
-    return ids.length > 0 ? ids.join(' ') : null;
+    return ids.length > 0 ? ids.join(' ') : void 0;
   }
 
   renderContent() {
@@ -123,19 +125,19 @@ let InlineSVG = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   render() {
-    const _this$props4 = this.props,
-          style = _this$props4.style,
-          title = _this$props4.title,
-          description = _this$props4.description,
-          focusable = _this$props4.focusable,
-          children = _this$props4.children,
-          src = _this$props4.src,
-          styles = _this$props4.styles,
-          props = _objectWithoutProperties(_this$props4, _excluded); // if width or height are 'auto', don't supply anything to the SVG
-
-
-    const width = this.props.width === 'auto' ? null : this.props.width;
-    const height = this.props.height === 'auto' ? null : this.props.height;
+    const _this$props3 = this.props,
+          style = _this$props3.style,
+          title = _this$props3.title,
+          description = _this$props3.description,
+          focusable = _this$props3.focusable,
+          children = _this$props3.children,
+          src = _this$props3.src,
+          styles = _this$props3.styles,
+          props = _objectWithoutProperties(_this$props3, _excluded); // if width or height are 'auto', don't supply anything to the SVG
+
+
+    const width = this.props.width === 'auto' ? void 0 : this.props.width;
+    const height = this.props.height === 'auto' ? void 0 : this.props.height;
     return jsx("svg", Object.assign({}, parseAttributes(this.props.src), omitProps(this.props, InlineSVG.allowedProps, ['inline']), {
       style: { ...style,
         width,
@@ -143,7 +145,7 @@ let InlineSVG = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       },
       width: width,
       height: height,
-      "aria-hidden": title ? null : 'true',
+      "aria-hidden": title ? void 0 : 'true',
       "aria-labelledby": this.labelledBy,
       role: this.role,
       focusable: focusable ? 'true' : 'false',

package/es/InlineSVG/props.js

@@ -40,6 +40,10 @@ const propTypes = {
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   inline: PropTypes.bool,
   color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'success', 'error', 'alert', 'warning', 'brand', 'auto']),
+
+  /**
+   * provides a reference to the underlying html root element
+   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['children', 'src', 'title', 'description', 'focusable', 'width', 'height', 'inline', 'color', 'elementRef'];

package/es/InlineSVG/styles.js

@@ -73,6 +73,7 @@ const generateStyle = (componentTheme, props) => {
       label: 'inlineSVG',
       fill: 'currentColor',
       display: inline ? 'inline-block' : 'block',
+      overflow: 'visible',
       ...colorVariants[color]
     }
   };

package/es/SVGIcon/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["rotate", "className", "size", "bidirectional", "makeStyles", "styles"];
+const _excluded = ["rotate", "className", "size", "bidirectional", "makeStyles", "styles", "themeOverride"];
 
 var _dec, _dec2, _class, _class2, _temp;
 
@@ -47,36 +47,40 @@ let SVGIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     this.ref = null;
 
     this.handleRef = el => {
-      var _this$props$elementRe, _this$props;
-
+      const elementRef = this.props.elementRef;
       this.ref = el;
-      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
     };
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    (_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$props3;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
-    const _this$props4 = this.props,
-          rotate = _this$props4.rotate,
-          className = _this$props4.className,
-          size = _this$props4.size,
-          bidirectional = _this$props4.bidirectional,
-          makeStyles = _this$props4.makeStyles,
-          styles = _this$props4.styles,
-          props = _objectWithoutProperties(_this$props4, _excluded);
+    const _this$props3 = this.props,
+          rotate = _this$props3.rotate,
+          className = _this$props3.className,
+          size = _this$props3.size,
+          bidirectional = _this$props3.bidirectional,
+          makeStyles = _this$props3.makeStyles,
+          styles = _this$props3.styles,
+          themeOverride = _this$props3.themeOverride,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx(InlineSVG, Object.assign({}, props, {
+      themeOverride: themeOverride,
       rotate: rotate,
       css: styles === null || styles === void 0 ? void 0 : styles.svgIcon,
       className: className,

package/lib/InlineSVG/index.js

@@ -40,10 +40,12 @@ let InlineSVG = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
     this.ref = null;
 
     this.handleRef = el => {
-      var _this$props$elementRe, _this$props;
-
+      const elementRef = this.props.elementRef;
       this.ref = el;
-      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
     };
 
     this.titleId = (0, _uid.uid)('InlineSVG-title');
@@ -51,15 +53,15 @@ let InlineSVG = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    (_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$props3;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   get role() {
@@ -94,7 +96,7 @@ let InlineSVG = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       ids.push(this.descId);
     }
 
-    return ids.length > 0 ? ids.join(' ') : null;
+    return ids.length > 0 ? ids.join(' ') : void 0;
   }
 
   renderContent() {
@@ -115,18 +117,18 @@ let InlineSVG = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   render() {
-    const _this$props4 = this.props,
-          style = _this$props4.style,
-          title = _this$props4.title,
-          description = _this$props4.description,
-          focusable = _this$props4.focusable,
-          children = _this$props4.children,
-          src = _this$props4.src,
-          styles = _this$props4.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded); // if width or height are 'auto', don't supply anything to the SVG
-
-    const width = this.props.width === 'auto' ? null : this.props.width;
-    const height = this.props.height === 'auto' ? null : this.props.height;
+    const _this$props3 = this.props,
+          style = _this$props3.style,
+          title = _this$props3.title,
+          description = _this$props3.description,
+          focusable = _this$props3.focusable,
+          children = _this$props3.children,
+          src = _this$props3.src,
+          styles = _this$props3.styles,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded); // if width or height are 'auto', don't supply anything to the SVG
+
+    const width = this.props.width === 'auto' ? void 0 : this.props.width;
+    const height = this.props.height === 'auto' ? void 0 : this.props.height;
     return (0, _emotion.jsx)("svg", Object.assign({}, parseAttributes(this.props.src), (0, _omitProps.omitProps)(this.props, InlineSVG.allowedProps, ['inline']), {
       style: { ...style,
         width,
@@ -134,7 +136,7 @@ let InlineSVG = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       },
       width: width,
       height: height,
-      "aria-hidden": title ? null : 'true',
+      "aria-hidden": title ? void 0 : 'true',
       "aria-labelledby": this.labelledBy,
       role: this.role,
       focusable: focusable ? 'true' : 'false',

package/lib/InlineSVG/props.js

@@ -50,6 +50,10 @@ const propTypes = {
   height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   inline: _propTypes.default.bool,
   color: _propTypes.default.oneOf(['inherit', 'primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'success', 'error', 'alert', 'warning', 'brand', 'auto']),
+
+  /**
+   * provides a reference to the underlying html root element
+   */
   elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/lib/InlineSVG/styles.js

@@ -80,6 +80,7 @@ const generateStyle = (componentTheme, props) => {
       label: 'inlineSVG',
       fill: 'currentColor',
       display: inline ? 'inline-block' : 'block',
+      overflow: 'visible',
       ...colorVariants[color]
     }
   };

package/lib/SVGIcon/index.js

@@ -23,7 +23,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-const _excluded = ["rotate", "className", "size", "bidirectional", "makeStyles", "styles"];
+const _excluded = ["rotate", "className", "size", "bidirectional", "makeStyles", "styles", "themeOverride"];
 
 var _dec, _dec2, _class, _class2, _temp;
 
@@ -38,35 +38,39 @@ let SVGIcon = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     this.ref = null;
 
     this.handleRef = el => {
-      var _this$props$elementRe, _this$props;
-
+      const elementRef = this.props.elementRef;
       this.ref = el;
-      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
     };
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    (_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$props3;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
-    const _this$props4 = this.props,
-          rotate = _this$props4.rotate,
-          className = _this$props4.className,
-          size = _this$props4.size,
-          bidirectional = _this$props4.bidirectional,
-          makeStyles = _this$props4.makeStyles,
-          styles = _this$props4.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
+    const _this$props3 = this.props,
+          rotate = _this$props3.rotate,
+          className = _this$props3.className,
+          size = _this$props3.size,
+          bidirectional = _this$props3.bidirectional,
+          makeStyles = _this$props3.makeStyles,
+          styles = _this$props3.styles,
+          themeOverride = _this$props3.themeOverride,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return (0, _emotion.jsx)(_InlineSVG.InlineSVG, Object.assign({}, props, {
+      themeOverride: themeOverride,
       rotate: rotate,
       css: styles === null || styles === void 0 ? void 0 : styles.svgIcon,
       className: className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-svg-images",
-  "version": "8.10.3-snapshot.9+47592ffa9",
+  "version": "8.11.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,19 +24,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.10.3-snapshot.9+47592ffa9",
-    "@instructure/ui-test-locator": "8.10.3-snapshot.9+47592ffa9",
-    "@instructure/ui-test-utils": "8.10.3-snapshot.9+47592ffa9",
-    "@instructure/ui-themes": "8.10.3-snapshot.9+47592ffa9"
+    "@instructure/ui-babel-preset": "8.11.0",
+    "@instructure/ui-test-locator": "8.11.0",
+    "@instructure/ui-test-utils": "8.11.0",
+    "@instructure/ui-themes": "8.11.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.10.3-snapshot.9+47592ffa9",
-    "@instructure/shared-types": "8.10.3-snapshot.9+47592ffa9",
-    "@instructure/ui-react-utils": "8.10.3-snapshot.9+47592ffa9",
-    "@instructure/ui-testable": "8.10.3-snapshot.9+47592ffa9",
-    "@instructure/ui-utils": "8.10.3-snapshot.9+47592ffa9",
-    "@instructure/uid": "8.10.3-snapshot.9+47592ffa9",
+    "@instructure/emotion": "8.11.0",
+    "@instructure/shared-types": "8.11.0",
+    "@instructure/ui-react-utils": "8.11.0",
+    "@instructure/ui-testable": "8.11.0",
+    "@instructure/ui-utils": "8.11.0",
+    "@instructure/uid": "8.11.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -45,6 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "47592ffa9fed565a9df0677c77e6d890d5e964ea"
+  "sideEffects": false
 }

package/src/InlineSVG/index.tsx

@@ -64,8 +64,13 @@ class InlineSVG extends Component<InlineSVGProps> {
   ref: Element | null = null
 
   handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
     this.ref = el
-    this.props.elementRef?.(el)
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
   }
 
   constructor() {
@@ -127,7 +132,7 @@ class InlineSVG extends Component<InlineSVGProps> {
       ids.push(this.descId)
     }
 
-    return ids.length > 0 ? ids.join(' ') : null
+    return ids.length > 0 ? ids.join(' ') : undefined
   }
 
   renderContent() {
@@ -146,7 +151,6 @@ class InlineSVG extends Component<InlineSVGProps> {
 
   render() {
     const {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'style' does not exist on type 'Readonly<... Remove this comment to see the full error message
       style, // eslint-disable-line react/prop-types
       title,
       description,
@@ -158,8 +162,8 @@ class InlineSVG extends Component<InlineSVGProps> {
     } = this.props
 
     // if width or height are 'auto', don't supply anything to the SVG
-    const width = this.props.width === 'auto' ? null : this.props.width
-    const height = this.props.height === 'auto' ? null : this.props.height
+    const width = this.props.width === 'auto' ? undefined : this.props.width
+    const height = this.props.height === 'auto' ? undefined : this.props.height
 
     return (
       <svg
@@ -170,16 +174,13 @@ class InlineSVG extends Component<InlineSVGProps> {
           width,
           height
         }}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type 'string | number | null | undefined' is not a... Remove this comment to see the full error message
         width={width}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type 'string | number | null | undefined' is not a... Remove this comment to see the full error message
         height={height}
-        aria-hidden={title ? null : 'true'}
+        aria-hidden={title ? undefined : 'true'}
         aria-labelledby={this.labelledBy}
         role={this.role}
         focusable={focusable ? 'true' : 'false'}
         css={styles?.inlineSVG}
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type '{ mak... Remove this comment to see the full error message
         className={props.className}
         ref={this.handleRef}
       >

package/src/InlineSVG/props.ts

@@ -21,10 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+import React, { SVGAttributes } from 'react'
 import PropTypes from 'prop-types'
 
-import type { PropValidators, InlineSVGTheme } from '@instructure/shared-types'
+import type {
+  PropValidators,
+  InlineSVGTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type InlineSVGOwnProps = {
@@ -56,7 +60,8 @@ type PropKeys = keyof InlineSVGOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type InlineSVGProps = InlineSVGOwnProps &
-  WithStyleProps<InlineSVGTheme, InlineSVGStyle>
+  WithStyleProps<InlineSVGTheme, InlineSVGStyle> &
+  OtherHTMLAttributes<InlineSVGOwnProps, SVGAttributes<InlineSVGOwnProps>>
 
 type InlineSVGStyle = ComponentStyle<'inlineSVG'>
 
@@ -88,6 +93,9 @@ const propTypes: PropValidators<PropKeys> = {
     'brand',
     'auto'
   ]),
+  /**
+   * provides a reference to the underlying html root element
+   */
   elementRef: PropTypes.func
 }
 

package/src/InlineSVG/styles.ts

@@ -60,6 +60,7 @@ const generateStyle = (
       label: 'inlineSVG',
       fill: 'currentColor',
       display: inline ? 'inline-block' : 'block',
+      overflow: 'visible',
       ...colorVariants[color!]
     }
   }

package/src/SVGIcon/index.tsx

@@ -57,8 +57,13 @@ class SVGIcon extends Component<SVGIconProps> {
   ref: ReactInstance | null = null
 
   handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
     this.ref = el
-    this.props.elementRef?.(el)
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
   }
 
   componentDidMount() {
@@ -72,7 +77,6 @@ class SVGIcon extends Component<SVGIconProps> {
   render() {
     const {
       rotate,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'Reado... Remove this comment to see the full error message
       className,
       size,
       bidirectional,
@@ -80,13 +84,14 @@ class SVGIcon extends Component<SVGIconProps> {
       // so it won't be passed to InlineSVG via '...props'
       makeStyles,
       styles,
+      themeOverride,
       ...props
     } = this.props
 
     return (
       <InlineSVG
         {...props}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ rotate: "0" | "90" | "180" | "270" | undef... Remove this comment to see the full error message
+        themeOverride={themeOverride}
         rotate={rotate}
         css={styles?.svgIcon}
         className={className}

package/src/SVGIcon/props.ts

@@ -25,10 +25,16 @@ import PropTypes from 'prop-types'
 
 import { InlineSVG } from '../InlineSVG'
 
-import type { PropValidators, SVGIconTheme } from '@instructure/shared-types'
+import type {
+  InlineSVGTheme,
+  OtherHTMLAttributes,
+  PropValidators,
+  SVGIconTheme
+} from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 import type { InlineSVGOwnProps } from '../InlineSVG/props'
+import { SVGAttributes } from 'react'
 
 type SVGIconOwnProps = InlineSVGOwnProps & {
   rotate?: '0' | '90' | '180' | '270'
@@ -40,7 +46,9 @@ type PropKeys = keyof SVGIconOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type SVGIconProps = SVGIconOwnProps & WithStyleProps<SVGIconTheme, SVGIconStyle>
+type SVGIconProps = SVGIconOwnProps &
+  WithStyleProps<SVGIconTheme & InlineSVGTheme, SVGIconStyle> &
+  OtherHTMLAttributes<SVGIconOwnProps, SVGAttributes<SVGIconOwnProps>>
 
 type SVGIconStyle = ComponentStyle<'svgIcon'>
 

package/types/InlineSVG/index.d.ts

@@ -31,7 +31,7 @@ declare class InlineSVG extends Component<InlineSVGProps> {
     get role(): "img" | "presentation";
     renderTitle(): jsx.JSX.Element | null;
     renderDesc(desc: any): jsx.JSX.Element | null;
-    get labelledBy(): string | null;
+    get labelledBy(): string | undefined;
     renderContent(): jsx.JSX.Element;
     render(): jsx.JSX.Element;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InlineSVG/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C;;;;GAIG;AACH,cAEM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,MAAM,CAAC,YAAY,yDAAe;IAClC,MAAM,CAAC,SAAS,mHAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;MAUlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;;IAYD,iBAAiB;IAIjB,kBAAkB;IAKlB,MAAM,CAAC,UAAU,oBAKhB;IAED,IAAI,IAAI,2BAMP;IAED,WAAW;IAOX,UAAU,CAAC,IAAI,KAAA;IAKf,IAAI,UAAU,kBAcb;IAED,aAAa;IAcb,MAAM;CA6CP;AA8BD,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InlineSVG/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C;;;;GAIG;AACH,cAEM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,MAAM,CAAC,YAAY,yDAAe;IAClC,MAAM,CAAC,SAAS,mHAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;MAUlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;;IAYD,iBAAiB;IAIjB,kBAAkB;IAKlB,MAAM,CAAC,UAAU,oBAKhB;IAED,IAAI,IAAI,2BAMP;IAED,WAAW;IAOX,UAAU,CAAC,IAAI,KAAA;IAKf,IAAI,UAAU,uBAcb;IAED,aAAa;IAcb,MAAM;CAyCP;AA8BD,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/types/InlineSVG/props.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { PropValidators, InlineSVGTheme } from '@instructure/shared-types';
+import React, { SVGAttributes } from 'react';
+import type { PropValidators, InlineSVGTheme, OtherHTMLAttributes } from '@instructure/shared-types';
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type InlineSVGOwnProps = {
     src?: string;
@@ -15,7 +15,7 @@ declare type InlineSVGOwnProps = {
 };
 declare type PropKeys = keyof InlineSVGOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type InlineSVGProps = InlineSVGOwnProps & WithStyleProps<InlineSVGTheme, InlineSVGStyle>;
+declare type InlineSVGProps = InlineSVGOwnProps & WithStyleProps<InlineSVGTheme, InlineSVGStyle> & OtherHTMLAttributes<InlineSVGOwnProps, SVGAttributes<InlineSVGOwnProps>>;
 declare type InlineSVGStyle = ComponentStyle<'inlineSVG'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;

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

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/InlineSVG/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EACF,SAAS,GACT,SAAS,GACT,WAAW,GACX,iBAAiB,GACjB,mBAAmB,GACnB,SAAS,GACT,OAAO,GACP,OAAO,GACP,SAAS,GACT,OAAO,GACP,MAAM,CAAA;IACV,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,GACrC,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAEjD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA6BvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAWnB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/InlineSVG/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG5C,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EACd,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EACF,SAAS,GACT,SAAS,GACT,WAAW,GACX,iBAAiB,GACjB,mBAAmB,GACnB,SAAS,GACT,OAAO,GACP,OAAO,GACP,SAAS,GACT,OAAO,GACP,MAAM,CAAA;IACV,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,GACrC,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,GAC9C,mBAAmB,CAAC,iBAAiB,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAE1E,aAAK,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAEjD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAgCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAWnB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/InlineSVG/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/InlineSVG/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,cAAc,SACvB,cAAc,KACpB,cAyBF,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/InlineSVG/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,cAAc,SACvB,cAAc,KACpB,cA0BF,CAAA;AAED,eAAe,aAAa,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SVGIcon/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAMhD,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;IAEvC,MAAM,CAAC,YAAY,0GAAe;IAClC,MAAM,CAAC,SAAS,oKAAY;IAE5B,MAAM,CAAC,YAAY;;;MAGlB;IAED,GAAG,EAAE,aAAa,GAAG,IAAI,CAAO;IAEhC,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM;CAyBP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SVGIcon/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAMhD,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;IAEvC,MAAM,CAAC,YAAY,0GAAe;IAClC,MAAM,CAAC,SAAS,oKAAY;IAE5B,MAAM,CAAC,YAAY;;;MAGlB;IAED,GAAG,EAAE,aAAa,GAAG,IAAI,CAAO;IAEhC,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM;CAyBP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/types/SVGIcon/props.d.ts

@@ -1,6 +1,7 @@
-import type { PropValidators, SVGIconTheme } from '@instructure/shared-types';
+import type { InlineSVGTheme, OtherHTMLAttributes, PropValidators, SVGIconTheme } from '@instructure/shared-types';
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 import type { InlineSVGOwnProps } from '../InlineSVG/props';
+import { SVGAttributes } from 'react';
 declare type SVGIconOwnProps = InlineSVGOwnProps & {
     rotate?: '0' | '90' | '180' | '270';
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
@@ -8,7 +9,7 @@ declare type SVGIconOwnProps = InlineSVGOwnProps & {
 };
 declare type PropKeys = keyof SVGIconOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type SVGIconProps = SVGIconOwnProps & WithStyleProps<SVGIconTheme, SVGIconStyle>;
+declare type SVGIconProps = SVGIconOwnProps & WithStyleProps<SVGIconTheme & InlineSVGTheme, SVGIconStyle> & OtherHTMLAttributes<SVGIconOwnProps, SVGAttributes<SVGIconOwnProps>>;
 declare type SVGIconStyle = ComponentStyle<'svgIcon'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;

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

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/SVGIcon/props.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAE3D,aAAK,eAAe,GAAG,iBAAiB,GAAG;IACzC,MAAM,CAAC,EAAE,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,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,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;AAEhF,aAAK,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;AAE7C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAMvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAcnB,CAAA;AAED,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/SVGIcon/props.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,YAAY,EACb,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,aAAK,eAAe,GAAG,iBAAiB,GAAG;IACzC,MAAM,CAAC,EAAE,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAA;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,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,GACjC,cAAc,CAAC,YAAY,GAAG,cAAc,EAAE,YAAY,CAAC,GAC3D,mBAAmB,CAAC,eAAe,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC,CAAA;AAEtE,aAAK,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;AAE7C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAMvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAcnB,CAAA;AAED,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

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.