@instructure/ui-flex 8.10.1-snapshot.9 → 8.10.3-snapshot.2

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 (18) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/es/Flex/Item/index.js +25 -14
  3. package/es/Flex/index.js +20 -12
  4. package/lib/Flex/Item/index.js +25 -14
  5. package/lib/Flex/index.js +20 -12
  6. package/package.json +10 -10
  7. package/src/Flex/Item/index.tsx +8 -2
  8. package/src/Flex/Item/props.ts +1 -1
  9. package/src/Flex/index.tsx +8 -2
  10. package/src/Flex/props.ts +1 -1
  11. package/types/Flex/Item/index.d.ts +4 -2
  12. package/types/Flex/Item/index.d.ts.map +1 -1
  13. package/types/Flex/Item/props.d.ts +1 -1
  14. package/types/Flex/Item/props.d.ts.map +1 -1
  15. package/types/Flex/index.d.ts +8 -6
  16. package/types/Flex/index.d.ts.map +1 -1
  17. package/types/Flex/props.d.ts +1 -1
  18. package/types/Flex/props.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [8.10.2](https://github.com/instructure/instructure-ui/compare/v8.10.1...v8.10.2) (2021-10-01)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-flex
9
+
10
+ ## [8.10.1](https://github.com/instructure/instructure-ui/compare/v8.10.0...v8.10.1) (2021-10-01)
11
+
12
+ **Note:** Version bump only for package @instructure/ui-flex
13
+
6
14
  # [8.10.0](https://github.com/instructure/instructure-ui/compare/v8.9.1...v8.10.0) (2021-09-28)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-flex
package/es/Flex/Item/index.js CHANGED
@@ -39,6 +39,18 @@ id: Flex.Item
39
39
  ---
40
40
  **/
41
41
  let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = class Item extends Component {
42
+ constructor(...args) {
43
+ super(...args);
44
+ this.ref = null;
45
+
46
+ this.handleRef = el => {
47
+ var _this$props$elementRe, _this$props;
48
+
49
+ this.ref = el;
50
+ (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
51
+ };
52
+ }
53
+
42
54
  componentDidMount() {
43
55
  this.props.makeStyles();
44
56
  }
@@ -49,24 +61,23 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class
49
61
 
50
62
  render() {
51
63
  const props = omitProps(this.props, Item.allowedProps);
52
- const _this$props = this.props,
53
- as = _this$props.as,
54
- elementRef = _this$props.elementRef,
55
- children = _this$props.children,
56
- withVisualDebug = _this$props.withVisualDebug,
57
- textAlign = _this$props.textAlign,
58
- size = _this$props.size,
59
- direction = _this$props.direction,
60
- margin = _this$props.margin,
61
- padding = _this$props.padding,
62
- overflowX = _this$props.overflowX,
63
- overflowY = _this$props.overflowY,
64
- styles = _this$props.styles;
64
+ const _this$props2 = this.props,
65
+ as = _this$props2.as,
66
+ children = _this$props2.children,
67
+ withVisualDebug = _this$props2.withVisualDebug,
68
+ textAlign = _this$props2.textAlign,
69
+ size = _this$props2.size,
70
+ direction = _this$props2.direction,
71
+ margin = _this$props2.margin,
72
+ padding = _this$props2.padding,
73
+ overflowX = _this$props2.overflowX,
74
+ overflowY = _this$props2.overflowY,
75
+ styles = _this$props2.styles;
65
76
  const dirColumn = direction === 'column';
66
77
  const dirRow = direction === 'row';
67
78
  return jsx(View, Object.assign({}, props, {
68
79
  css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
69
- elementRef: elementRef,
80
+ elementRef: this.handleRef,
70
81
  as: as,
71
82
  minHeight: dirColumn ? size : void 0,
72
83
  minWidth: dirRow ? size : void 0,
package/es/Flex/index.js CHANGED
@@ -43,6 +43,15 @@ category: components
43
43
  let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Flex extends Component {
44
44
  constructor(props) {
45
45
  super(props);
46
+ this.ref = null;
47
+
48
+ this.handleRef = el => {
49
+ var _this$props$elementRe, _this$props;
50
+
51
+ this.ref = el;
52
+ (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
53
+ };
54
+
46
55
  props.makeStyles();
47
56
  }
48
57
 
@@ -67,23 +76,22 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
67
76
  }
68
77
 
69
78
  render() {
70
- const _this$props = this.props,
71
- as = _this$props.as,
72
- elementRef = _this$props.elementRef,
73
- withVisualDebug = _this$props.withVisualDebug,
74
- height = _this$props.height,
75
- display = _this$props.display,
76
- margin = _this$props.margin,
77
- padding = _this$props.padding,
78
- textAlign = _this$props.textAlign,
79
- width = _this$props.width,
80
- styles = _this$props.styles;
79
+ const _this$props2 = this.props,
80
+ as = _this$props2.as,
81
+ withVisualDebug = _this$props2.withVisualDebug,
82
+ height = _this$props2.height,
83
+ display = _this$props2.display,
84
+ margin = _this$props2.margin,
85
+ padding = _this$props2.padding,
86
+ textAlign = _this$props2.textAlign,
87
+ width = _this$props2.width,
88
+ styles = _this$props2.styles;
81
89
  const children = callRenderProp(this.props.children);
82
90
 
83
91
  if (children && Children.count(children) > 0) {
84
92
  return jsx(View, Object.assign({}, passthroughProps(this.props), {
85
93
  css: styles === null || styles === void 0 ? void 0 : styles.flex,
86
- elementRef: elementRef,
94
+ elementRef: this.handleRef,
87
95
  as: as,
88
96
  display: display,
89
97
  width: width,
package/lib/Flex/Item/index.js CHANGED
@@ -28,6 +28,18 @@ id: Flex.Item
28
28
  ---
29
29
  **/
30
30
  let Item = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = class Item extends _react.Component {
31
+ constructor(...args) {
32
+ super(...args);
33
+ this.ref = null;
34
+
35
+ this.handleRef = el => {
36
+ var _this$props$elementRe, _this$props;
37
+
38
+ this.ref = el;
39
+ (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
40
+ };
41
+ }
42
+
31
43
  componentDidMount() {
32
44
  this.props.makeStyles();
33
45
  }
@@ -38,24 +50,23 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class =
38
50
 
39
51
  render() {
40
52
  const props = (0, _omitProps.omitProps)(this.props, Item.allowedProps);
41
- const _this$props = this.props,
42
- as = _this$props.as,
43
- elementRef = _this$props.elementRef,
44
- children = _this$props.children,
45
- withVisualDebug = _this$props.withVisualDebug,
46
- textAlign = _this$props.textAlign,
47
- size = _this$props.size,
48
- direction = _this$props.direction,
49
- margin = _this$props.margin,
50
- padding = _this$props.padding,
51
- overflowX = _this$props.overflowX,
52
- overflowY = _this$props.overflowY,
53
- styles = _this$props.styles;
53
+ const _this$props2 = this.props,
54
+ as = _this$props2.as,
55
+ children = _this$props2.children,
56
+ withVisualDebug = _this$props2.withVisualDebug,
57
+ textAlign = _this$props2.textAlign,
58
+ size = _this$props2.size,
59
+ direction = _this$props2.direction,
60
+ margin = _this$props2.margin,
61
+ padding = _this$props2.padding,
62
+ overflowX = _this$props2.overflowX,
63
+ overflowY = _this$props2.overflowY,
64
+ styles = _this$props2.styles;
54
65
  const dirColumn = direction === 'column';
55
66
  const dirRow = direction === 'row';
56
67
  return (0, _emotion.jsx)(_View.View, Object.assign({}, props, {
57
68
  css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
58
- elementRef: elementRef,
69
+ elementRef: this.handleRef,
59
70
  as: as,
60
71
  minHeight: dirColumn ? size : void 0,
61
72
  minWidth: dirRow ? size : void 0,
package/lib/Flex/index.js CHANGED
@@ -46,6 +46,15 @@ category: components
46
46
  let Flex = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Flex extends _react.Component {
47
47
  constructor(props) {
48
48
  super(props);
49
+ this.ref = null;
50
+
51
+ this.handleRef = el => {
52
+ var _this$props$elementRe, _this$props;
53
+
54
+ 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);
56
+ };
57
+
49
58
  props.makeStyles();
50
59
  }
51
60
 
@@ -70,23 +79,22 @@ let Flex = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
70
79
  }
71
80
 
72
81
  render() {
73
- const _this$props = this.props,
74
- as = _this$props.as,
75
- elementRef = _this$props.elementRef,
76
- withVisualDebug = _this$props.withVisualDebug,
77
- height = _this$props.height,
78
- display = _this$props.display,
79
- margin = _this$props.margin,
80
- padding = _this$props.padding,
81
- textAlign = _this$props.textAlign,
82
- width = _this$props.width,
83
- styles = _this$props.styles;
82
+ const _this$props2 = this.props,
83
+ as = _this$props2.as,
84
+ withVisualDebug = _this$props2.withVisualDebug,
85
+ height = _this$props2.height,
86
+ display = _this$props2.display,
87
+ margin = _this$props2.margin,
88
+ padding = _this$props2.padding,
89
+ textAlign = _this$props2.textAlign,
90
+ width = _this$props2.width,
91
+ styles = _this$props2.styles;
84
92
  const children = (0, _callRenderProp.callRenderProp)(this.props.children);
85
93
 
86
94
  if (children && _react.Children.count(children) > 0) {
87
95
  return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(this.props), {
88
96
  css: styles === null || styles === void 0 ? void 0 : styles.flex,
89
- elementRef: elementRef,
97
+ elementRef: this.handleRef,
90
98
  as: as,
91
99
  display: display,
92
100
  width: width,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-flex",
3
- "version": "8.10.1-snapshot.9+93b506fe0",
3
+ "version": "8.10.3-snapshot.2+ccdf8f43b",
4
4
  "description": "A component that makes it easy to align content using flexbox CSS",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -25,17 +25,17 @@
25
25
  "license": "MIT",
26
26
  "dependencies": {
27
27
  "@babel/runtime": "^7.13.10",
28
- "@instructure/console": "8.10.1-snapshot.9+93b506fe0",
29
- "@instructure/emotion": "8.10.1-snapshot.9+93b506fe0",
30
- "@instructure/shared-types": "8.10.1-snapshot.9+93b506fe0",
31
- "@instructure/ui-react-utils": "8.10.1-snapshot.9+93b506fe0",
32
- "@instructure/ui-view": "8.10.1-snapshot.9+93b506fe0",
28
+ "@instructure/console": "8.10.3-snapshot.2+ccdf8f43b",
29
+ "@instructure/emotion": "8.10.3-snapshot.2+ccdf8f43b",
30
+ "@instructure/shared-types": "8.10.3-snapshot.2+ccdf8f43b",
31
+ "@instructure/ui-react-utils": "8.10.3-snapshot.2+ccdf8f43b",
32
+ "@instructure/ui-view": "8.10.3-snapshot.2+ccdf8f43b",
33
33
  "prop-types": "^15"
34
34
  },
35
35
  "devDependencies": {
36
- "@instructure/ui-babel-preset": "8.10.1-snapshot.9+93b506fe0",
37
- "@instructure/ui-test-utils": "8.10.1-snapshot.9+93b506fe0",
38
- "@instructure/ui-themes": "8.10.1-snapshot.9+93b506fe0"
36
+ "@instructure/ui-babel-preset": "8.10.3-snapshot.2+ccdf8f43b",
37
+ "@instructure/ui-test-utils": "8.10.3-snapshot.2+ccdf8f43b",
38
+ "@instructure/ui-themes": "8.10.3-snapshot.2+ccdf8f43b"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "react": ">=16.8 <=17"
@@ -44,5 +44,5 @@
44
44
  "access": "public"
45
45
  },
46
46
  "sideEffects": false,
47
- "gitHead": "93b506fe0860718ebe2cc2729fd023e3e7489231"
47
+ "gitHead": "ccdf8f43b56a8edef32600281692dfeb436d5a01"
48
48
  }
package/src/Flex/Item/index.tsx CHANGED
@@ -64,12 +64,18 @@ class Item extends Component<FlexItemProps> {
64
64
  shouldShrink: false
65
65
  }
66
66
 
67
+ ref: Element | null = null
68
+
69
+ handleRef = (el: Element | null) => {
70
+ this.ref = el
71
+ this.props.elementRef?.(el)
72
+ }
73
+
67
74
  render() {
68
75
  const props = omitProps(this.props, Item.allowedProps)
69
76
 
70
77
  const {
71
78
  as,
72
- elementRef,
73
79
  children,
74
80
  withVisualDebug,
75
81
  textAlign,
@@ -89,7 +95,7 @@ class Item extends Component<FlexItemProps> {
89
95
  <View
90
96
  {...props}
91
97
  css={styles?.flexItem}
92
- elementRef={elementRef}
98
+ elementRef={this.handleRef}
93
99
  as={as}
94
100
  minHeight={dirColumn ? size : undefined}
95
101
  minWidth={dirRow ? size : undefined}
package/src/Flex/Item/props.ts CHANGED
@@ -37,7 +37,7 @@ import type {
37
37
  type FlexItemOwnProps = {
38
38
  children?: React.ReactNode
39
39
  as?: AsElementType
40
- elementRef?: (...args: any[]) => any
40
+ elementRef?: (element: Element | null) => void
41
41
  margin?: Spacing
42
42
  padding?: Spacing
43
43
  align?: 'center' | 'start' | 'end' | 'stretch'
package/src/Flex/index.tsx CHANGED
@@ -79,6 +79,13 @@ class Flex extends Component<FlexProps> {
79
79
  wrap: 'no-wrap'
80
80
  }
81
81
 
82
+ ref: Element | null = null
83
+
84
+ handleRef = (el: Element | null) => {
85
+ this.ref = el
86
+ this.props.elementRef?.(el)
87
+ }
88
+
82
89
  renderChildren(children: any) {
83
90
  return Children.map(children, (child) => {
84
91
  if (!child) {
@@ -99,7 +106,6 @@ class Flex extends Component<FlexProps> {
99
106
  render() {
100
107
  const {
101
108
  as,
102
- elementRef,
103
109
  withVisualDebug,
104
110
  height,
105
111
  display,
@@ -117,7 +123,7 @@ class Flex extends Component<FlexProps> {
117
123
  <View
118
124
  {...passthroughProps(this.props)}
119
125
  css={styles?.flex}
120
- elementRef={elementRef}
126
+ elementRef={this.handleRef}
121
127
  as={as}
122
128
  display={display}
123
129
  width={width}
package/src/Flex/props.ts CHANGED
@@ -40,7 +40,7 @@ import type {
40
40
  type FlexOwnProps = {
41
41
  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
42
42
  as?: AsElementType
43
- elementRef?: (...args: any[]) => any
43
+ elementRef?: (element: Element | null) => void
44
44
  height?: string | number
45
45
  width?: string | number
46
46
  margin?: Spacing
package/types/Flex/Item/index.d.ts CHANGED
@@ -15,7 +15,7 @@ declare class Item extends Component<FlexItemProps> {
15
15
  static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
16
16
  children?: import("react").ReactNode;
17
17
  as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
18
- elementRef?: ((...args: any[]) => any) | undefined;
18
+ elementRef?: ((element: Element | null) => void) | undefined;
19
19
  margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
20
20
  padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
21
21
  align?: "center" | "start" | "end" | "stretch" | undefined;
@@ -31,7 +31,7 @@ declare class Item extends Component<FlexItemProps> {
31
31
  static allowedProps: readonly (keyof {
32
32
  children?: import("react").ReactNode;
33
33
  as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
34
- elementRef?: ((...args: any[]) => any) | undefined;
34
+ elementRef?: ((element: Element | null) => void) | undefined;
35
35
  margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
36
36
  padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
37
37
  align?: "center" | "start" | "end" | "stretch" | undefined;
@@ -50,6 +50,8 @@ declare class Item extends Component<FlexItemProps> {
50
50
  shouldGrow: boolean;
51
51
  shouldShrink: boolean;
52
52
  };
53
+ ref: Element | null;
54
+ handleRef: (el: Element | null) => void;
53
55
  render(): jsx.JSX.Element;
54
56
  }
55
57
  export default Item;
package/types/Flex/Item/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Flex/Item/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C;;;;;GAKG;AACH,cACM,IAAK,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,iBAAiB;IAKjB,kBAAkB;IAKlB,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;yBAGA,GAAG;;;MAGrB;IAED,MAAM;CAwCP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Flex/Item/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C;;;;;GAKG;AACH,cACM,IAAK,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,iBAAiB;IAKjB,kBAAkB;IAKlB,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;yBAGA,GAAG;;;MAGrB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;IAED,MAAM;CAuCP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}
package/types/Flex/Item/props.d.ts CHANGED
@@ -4,7 +4,7 @@ import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emoti
4
4
  declare type FlexItemOwnProps = {
5
5
  children?: React.ReactNode;
6
6
  as?: AsElementType;
7
- elementRef?: (...args: any[]) => any;
7
+ elementRef?: (element: Element | null) => void;
8
8
  margin?: Spacing;
9
9
  padding?: Spacing;
10
10
  align?: 'center' | 'start' | 'end' | 'stretch';
package/types/Flex/Item/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Flex/Item/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IAC9C,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;IACzC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,GAAG,cAAc,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AAE3E,aAAK,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAE/C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA6DvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Flex/Item/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IAC9C,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;IACzC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,GAAG,cAAc,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;AAE3E,aAAK,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAE/C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA6DvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
package/types/Flex/index.d.ts CHANGED
@@ -17,33 +17,33 @@ declare class Flex extends Component<FlexProps> {
17
17
  static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
18
18
  children?: import("react").ReactNode | ((...args: any[]) => import("react").ReactNode);
19
19
  as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
20
- elementRef?: ((...args: any[]) => any) | undefined;
20
+ elementRef?: ((element: Element | null) => void) | undefined;
21
21
  height?: string | number | undefined;
22
22
  width?: string | number | undefined;
23
23
  margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
24
24
  padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
25
25
  display?: "flex" | "inline-flex" | undefined;
26
26
  textAlign?: "center" | "start" | "end" | undefined;
27
- direction?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
27
+ direction?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
28
28
  alignItems?: "center" | "start" | "end" | "stretch" | undefined;
29
29
  justifyItems?: "center" | "start" | "end" | "space-around" | "space-between" | undefined;
30
- wrap?: "wrap" | "no-wrap" | "wrap-reverse" | undefined;
30
+ wrap?: "wrap" | "wrap-reverse" | "no-wrap" | undefined;
31
31
  withVisualDebug?: boolean | undefined;
32
32
  }>;
33
33
  static allowedProps: readonly (keyof {
34
34
  children?: import("react").ReactNode | ((...args: any[]) => import("react").ReactNode);
35
35
  as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
36
- elementRef?: ((...args: any[]) => any) | undefined;
36
+ elementRef?: ((element: Element | null) => void) | undefined;
37
37
  height?: string | number | undefined;
38
38
  width?: string | number | undefined;
39
39
  margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
40
40
  padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
41
41
  display?: "flex" | "inline-flex" | undefined;
42
42
  textAlign?: "center" | "start" | "end" | undefined;
43
- direction?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
43
+ direction?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
44
44
  alignItems?: "center" | "start" | "end" | "stretch" | undefined;
45
45
  justifyItems?: "center" | "start" | "end" | "space-around" | "space-between" | undefined;
46
- wrap?: "wrap" | "no-wrap" | "wrap-reverse" | undefined;
46
+ wrap?: "wrap" | "wrap-reverse" | "no-wrap" | undefined;
47
47
  withVisualDebug?: boolean | undefined;
48
48
  })[];
49
49
  static defaultProps: {
@@ -56,6 +56,8 @@ declare class Flex extends Component<FlexProps> {
56
56
  withVisualDebug: boolean;
57
57
  wrap: string;
58
58
  };
59
+ ref: Element | null;
60
+ handleRef: (el: Element | null) => void;
59
61
  renderChildren(children: any): any;
60
62
  render(): jsx.JSX.Element | null;
61
63
  }
package/types/Flex/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Flex/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAA;AAS3C,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAM7B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;;;;GAKG;AACH,cACM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;gBAExB,KAAK,EAAE,SAAS;IAM5B,kBAAkB;IAKlB,MAAM,CAAC,IAAI,cAAO;IAElB,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;yBAIA,GAAG;;;;;;MAMrB;IAED,cAAc,CAAC,QAAQ,EAAE,GAAG;IAiB5B,MAAM;CAsCP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,IAAI,IAAI,QAAQ,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Flex/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAA;AAS3C,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAM7B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;;;;GAKG;AACH,cACM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;gBAExB,KAAK,EAAE,SAAS;IAM5B,kBAAkB;IAKlB,MAAM,CAAC,IAAI,cAAO;IAElB,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;yBAIA,GAAG;;;;;;MAMrB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;IAED,cAAc,CAAC,QAAQ,EAAE,GAAG;IAiB5B,MAAM;CAqCP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,IAAI,IAAI,QAAQ,EAAE,CAAA"}
package/types/Flex/props.d.ts CHANGED
@@ -4,7 +4,7 @@ import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emoti
4
4
  declare type FlexOwnProps = {
5
5
  children?: React.ReactNode | ((...args: any[]) => React.ReactNode);
6
6
  as?: AsElementType;
7
- elementRef?: (...args: any[]) => any;
7
+ elementRef?: (element: Element | null) => void;
8
8
  height?: string | number;
9
9
  width?: string | number;
10
10
  margin?: Spacing;
package/types/Flex/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Flex/props.ts"],"names":[],"mappings":";AA4BA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACV,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAClE,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IAChC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;IAC/D,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IACnD,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,CAAA;IAC5E,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,CAAA;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAAG,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEpE,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA2EvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Flex/props.ts"],"names":[],"mappings":";AA4BA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACV,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAClE,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,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;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IAChC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;IAC/D,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IACnD,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,CAAA;IAC5E,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,CAAA;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAAG,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEpE,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA2EvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}