@instructure/ui-img 8.10.3-snapshot.19 → 8.10.3-snapshot.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/es/Img/index.js +23 -21
  2. package/es/Img/props.js +4 -0
  3. package/lib/Img/index.js +23 -21
  4. package/lib/Img/props.js +4 -0
  5. package/package.json +12 -12
  6. package/src/Img/index.tsx +6 -1
  7. package/src/Img/props.ts +11 -2
  8. package/types/Img/index.d.ts.map +1 -1
  9. package/types/Img/props.d.ts +2 -2
  10. package/types/Img/props.d.ts.map +1 -1
package/es/Img/index.js CHANGED
@@ -49,40 +49,42 @@ let Img = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
49
49
  this.ref = null;
50
50
 
51
51
  this.handleRef = el => {
52
- var _this$props$elementRe, _this$props;
53
-
52
+ const elementRef = this.props.elementRef;
54
53
  this.ref = el;
55
- (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
54
+
55
+ if (typeof elementRef === 'function') {
56
+ elementRef(el);
57
+ }
56
58
  };
57
59
  }
58
60
 
59
61
  componentDidMount() {
60
- var _this$props$makeStyle, _this$props2;
62
+ var _this$props$makeStyle, _this$props;
61
63
 
62
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
64
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
63
65
  }
64
66
 
65
67
  componentDidUpdate() {
66
- var _this$props$makeStyle2, _this$props3;
68
+ var _this$props$makeStyle2, _this$props2;
67
69
 
68
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
70
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
69
71
  }
70
72
 
71
73
  render() {
72
- const _this$props4 = this.props,
73
- src = _this$props4.src,
74
- alt = _this$props4.alt,
75
- margin = _this$props4.margin,
76
- display = _this$props4.display,
77
- overlay = _this$props4.overlay,
78
- withGrayscale = _this$props4.withGrayscale,
79
- withBlur = _this$props4.withBlur,
80
- constrain = _this$props4.constrain,
81
- width = _this$props4.width,
82
- height = _this$props4.height,
83
- elementRef = _this$props4.elementRef,
84
- styles = _this$props4.styles,
85
- props = _objectWithoutProperties(_this$props4, _excluded);
74
+ const _this$props3 = this.props,
75
+ src = _this$props3.src,
76
+ alt = _this$props3.alt,
77
+ margin = _this$props3.margin,
78
+ display = _this$props3.display,
79
+ overlay = _this$props3.overlay,
80
+ withGrayscale = _this$props3.withGrayscale,
81
+ withBlur = _this$props3.withBlur,
82
+ constrain = _this$props3.constrain,
83
+ width = _this$props3.width,
84
+ height = _this$props3.height,
85
+ elementRef = _this$props3.elementRef,
86
+ styles = _this$props3.styles,
87
+ props = _objectWithoutProperties(_this$props3, _excluded);
86
88
 
87
89
  const a11yProps = {
88
90
  alt: alt || ''
package/es/Img/props.js CHANGED
@@ -36,6 +36,10 @@ const propTypes = {
36
36
  withGrayscale: PropTypes.bool,
37
37
  withBlur: PropTypes.bool,
38
38
  constrain: PropTypes.oneOf(['cover', 'contain']),
39
+
40
+ /**
41
+ * provides a reference to the underlying html root element
42
+ */
39
43
  elementRef: PropTypes.func,
40
44
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
41
45
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
package/lib/Img/index.js CHANGED
@@ -41,40 +41,42 @@ let Img = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
41
41
  this.ref = null;
42
42
 
43
43
  this.handleRef = el => {
44
- var _this$props$elementRe, _this$props;
45
-
44
+ const elementRef = this.props.elementRef;
46
45
  this.ref = el;
47
- (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
46
+
47
+ if (typeof elementRef === 'function') {
48
+ elementRef(el);
49
+ }
48
50
  };
49
51
  }
50
52
 
51
53
  componentDidMount() {
52
- var _this$props$makeStyle, _this$props2;
54
+ var _this$props$makeStyle, _this$props;
53
55
 
54
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
56
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
55
57
  }
56
58
 
57
59
  componentDidUpdate() {
58
- var _this$props$makeStyle2, _this$props3;
60
+ var _this$props$makeStyle2, _this$props2;
59
61
 
60
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
62
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
61
63
  }
62
64
 
63
65
  render() {
64
- const _this$props4 = this.props,
65
- src = _this$props4.src,
66
- alt = _this$props4.alt,
67
- margin = _this$props4.margin,
68
- display = _this$props4.display,
69
- overlay = _this$props4.overlay,
70
- withGrayscale = _this$props4.withGrayscale,
71
- withBlur = _this$props4.withBlur,
72
- constrain = _this$props4.constrain,
73
- width = _this$props4.width,
74
- height = _this$props4.height,
75
- elementRef = _this$props4.elementRef,
76
- styles = _this$props4.styles,
77
- props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
66
+ const _this$props3 = this.props,
67
+ src = _this$props3.src,
68
+ alt = _this$props3.alt,
69
+ margin = _this$props3.margin,
70
+ display = _this$props3.display,
71
+ overlay = _this$props3.overlay,
72
+ withGrayscale = _this$props3.withGrayscale,
73
+ withBlur = _this$props3.withBlur,
74
+ constrain = _this$props3.constrain,
75
+ width = _this$props3.width,
76
+ height = _this$props3.height,
77
+ elementRef = _this$props3.elementRef,
78
+ styles = _this$props3.styles,
79
+ props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
78
80
  const a11yProps = {
79
81
  alt: alt || ''
80
82
  };
package/lib/Img/props.js CHANGED
@@ -47,6 +47,10 @@ const propTypes = {
47
47
  withGrayscale: _propTypes.default.bool,
48
48
  withBlur: _propTypes.default.bool,
49
49
  constrain: _propTypes.default.oneOf(['cover', 'contain']),
50
+
51
+ /**
52
+ * provides a reference to the underlying html root element
53
+ */
50
54
  elementRef: _propTypes.default.func,
51
55
  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
52
56
  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-img",
3
- "version": "8.10.3-snapshot.19+ff8a37832",
3
+ "version": "8.10.3-snapshot.23+5aaa29662",
4
4
  "description": "An accessible image component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -25,19 +25,19 @@
25
25
  "license": "MIT",
26
26
  "dependencies": {
27
27
  "@babel/runtime": "^7.13.10",
28
- "@instructure/console": "8.10.3-snapshot.19+ff8a37832",
29
- "@instructure/emotion": "8.10.3-snapshot.19+ff8a37832",
30
- "@instructure/shared-types": "8.10.3-snapshot.19+ff8a37832",
31
- "@instructure/ui-dom-utils": "8.10.3-snapshot.19+ff8a37832",
32
- "@instructure/ui-react-utils": "8.10.3-snapshot.19+ff8a37832",
33
- "@instructure/ui-testable": "8.10.3-snapshot.19+ff8a37832",
34
- "@instructure/ui-view": "8.10.3-snapshot.19+ff8a37832",
28
+ "@instructure/console": "8.10.3-snapshot.23+5aaa29662",
29
+ "@instructure/emotion": "8.10.3-snapshot.23+5aaa29662",
30
+ "@instructure/shared-types": "8.10.3-snapshot.23+5aaa29662",
31
+ "@instructure/ui-dom-utils": "8.10.3-snapshot.23+5aaa29662",
32
+ "@instructure/ui-react-utils": "8.10.3-snapshot.23+5aaa29662",
33
+ "@instructure/ui-testable": "8.10.3-snapshot.23+5aaa29662",
34
+ "@instructure/ui-view": "8.10.3-snapshot.23+5aaa29662",
35
35
  "prop-types": "^15"
36
36
  },
37
37
  "devDependencies": {
38
- "@instructure/ui-babel-preset": "8.10.3-snapshot.19+ff8a37832",
39
- "@instructure/ui-test-locator": "8.10.3-snapshot.19+ff8a37832",
40
- "@instructure/ui-test-utils": "8.10.3-snapshot.19+ff8a37832"
38
+ "@instructure/ui-babel-preset": "8.10.3-snapshot.23+5aaa29662",
39
+ "@instructure/ui-test-locator": "8.10.3-snapshot.23+5aaa29662",
40
+ "@instructure/ui-test-utils": "8.10.3-snapshot.23+5aaa29662"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": ">=16.8 <=17"
@@ -46,5 +46,5 @@
46
46
  "access": "public"
47
47
  },
48
48
  "sideEffects": false,
49
- "gitHead": "ff8a37832bae778ea0507342d81a32c63cd5f023"
49
+ "gitHead": "5aaa296621d72faebe1a809a8895a8185587008d"
50
50
  }
package/src/Img/index.tsx CHANGED
@@ -59,8 +59,13 @@ class Img extends Component<ImgProps> {
59
59
  ref: Element | null = null
60
60
 
61
61
  handleRef = (el: Element | null) => {
62
+ const { elementRef } = this.props
63
+
62
64
  this.ref = el
63
- this.props.elementRef?.(el)
65
+
66
+ if (typeof elementRef === 'function') {
67
+ elementRef(el)
68
+ }
64
69
  }
65
70
 
66
71
  componentDidMount() {
package/src/Img/props.ts CHANGED
@@ -25,7 +25,11 @@
25
25
  import PropTypes from 'prop-types'
26
26
  import { ThemeablePropTypes } from '@instructure/emotion'
27
27
 
28
- import type { PropValidators, ImgTheme } from '@instructure/shared-types'
28
+ import type {
29
+ PropValidators,
30
+ ImgTheme,
31
+ OtherHTMLAttributes
32
+ } from '@instructure/shared-types'
29
33
  import type {
30
34
  Spacing,
31
35
  WithStyleProps,
@@ -63,7 +67,9 @@ type PropKeys = keyof ImgOwnProps
63
67
 
64
68
  type AllowedPropKeys = Readonly<Array<PropKeys>>
65
69
 
66
- type ImgProps = ImgOwnProps & WithStyleProps<ImgTheme, ImgStyle>
70
+ type ImgProps = ImgOwnProps &
71
+ WithStyleProps<ImgTheme, ImgStyle> &
72
+ OtherHTMLAttributes<ImgOwnProps>
67
73
 
68
74
  type ImgStyle = ComponentStyle<'overlay' | 'container' | 'img'>
69
75
 
@@ -86,6 +92,9 @@ const propTypes: PropValidators<PropKeys> = {
86
92
  withGrayscale: PropTypes.bool,
87
93
  withBlur: PropTypes.bool,
88
94
  constrain: PropTypes.oneOf(['cover', 'contain']),
95
+ /**
96
+ * provides a reference to the underlying html root element
97
+ */
89
98
  elementRef: PropTypes.func,
90
99
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
91
100
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
package/types/Img/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Img/index.tsx"],"names":[],"mappings":"AAuBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC;;;;;GAKG;AACH,cAEM,GAAI,SAAQ,SAAS,CAAC,QAAQ,CAAC;IACnC,MAAM,CAAC,QAAQ,CAAC,WAAW,SAAQ;IAEnC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM;CAuDP;AAED,eAAe,GAAG,CAAA;AAClB,OAAO,EAAE,GAAG,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Img/index.tsx"],"names":[],"mappings":"AAuBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC;;;;;GAKG;AACH,cAEM,GAAI,SAAQ,SAAS,CAAC,QAAQ,CAAC;IACnC,MAAM,CAAC,QAAQ,CAAC,WAAW,SAAQ;IAEnC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM;CAuDP;AAED,eAAe,GAAG,CAAA;AAClB,OAAO,EAAE,GAAG,EAAE,CAAA"}
package/types/Img/props.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { PropValidators, ImgTheme } from '@instructure/shared-types';
1
+ import type { PropValidators, ImgTheme, OtherHTMLAttributes } from '@instructure/shared-types';
2
2
  import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
3
3
  declare type ImgOwnProps = {
4
4
  src: string;
@@ -28,7 +28,7 @@ declare type ImgOwnProps = {
28
28
  };
29
29
  declare type PropKeys = keyof ImgOwnProps;
30
30
  declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
31
- declare type ImgProps = ImgOwnProps & WithStyleProps<ImgTheme, ImgStyle>;
31
+ declare type ImgProps = ImgOwnProps & WithStyleProps<ImgTheme, ImgStyle> & OtherHTMLAttributes<ImgOwnProps>;
32
32
  declare type ImgStyle = ComponentStyle<'overlay' | 'container' | 'img'>;
33
33
  declare const propTypes: PropValidators<PropKeys>;
34
34
  declare const allowedProps: AllowedPropKeys;
package/types/Img/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Img/props.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACzE,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,WAAW,GAAG;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;QACnD,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAA;KACpE,CAAA;IACD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,WAAW,CAAA;AAEjC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,QAAQ,GAAG,WAAW,GAAG,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAEhE,aAAK,QAAQ,GAAG,cAAc,CAAC,SAAS,GAAG,WAAW,GAAG,KAAK,CAAC,CAAA;AAE/D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAsBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAYnB,CAAA;AAED,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Img/props.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EACV,cAAc,EACd,QAAQ,EACR,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,WAAW,GAAG;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;QACnD,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAA;KACpE,CAAA;IACD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,WAAW,CAAA;AAEjC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,QAAQ,GAAG,WAAW,GACzB,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAClC,mBAAmB,CAAC,WAAW,CAAC,CAAA;AAElC,aAAK,QAAQ,GAAG,cAAc,CAAC,SAAS,GAAG,WAAW,GAAG,KAAK,CAAC,CAAA;AAE/D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAyBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAYnB,CAAA;AAED,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}