@instructure/ui-drawer-layout 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 (20) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/es/DrawerLayout/DrawerContent/index.js +11 -8
  3. package/es/DrawerLayout/DrawerTray/index.js +41 -39
  4. package/es/DrawerLayout/index.js +7 -1
  5. package/lib/DrawerLayout/DrawerContent/index.js +11 -8
  6. package/lib/DrawerLayout/DrawerTray/index.js +41 -39
  7. package/lib/DrawerLayout/index.js +7 -1
  8. package/package.json +22 -22
  9. package/src/DrawerLayout/DrawerContent/index.tsx +7 -6
  10. package/src/DrawerLayout/DrawerTray/index.tsx +8 -8
  11. package/src/DrawerLayout/index.tsx +15 -3
  12. package/types/DrawerLayout/DrawerContent/DrawerContentLocator.d.ts +64 -64
  13. package/types/DrawerLayout/DrawerContent/index.d.ts +3 -2
  14. package/types/DrawerLayout/DrawerContent/index.d.ts.map +1 -1
  15. package/types/DrawerLayout/DrawerLayoutLocator.d.ts +224 -224
  16. package/types/DrawerLayout/DrawerTray/DrawerTrayLocator.d.ts +64 -64
  17. package/types/DrawerLayout/DrawerTray/index.d.ts +8 -6
  18. package/types/DrawerLayout/DrawerTray/index.d.ts.map +1 -1
  19. package/types/DrawerLayout/index.d.ts +2 -0
  20. package/types/DrawerLayout/index.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-drawer-layout
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-drawer-layout
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-drawer-layout
package/es/DrawerLayout/DrawerContent/index.js CHANGED
@@ -47,16 +47,19 @@ let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _d
47
47
  this.state = {
48
48
  shouldTransition: false
49
49
  };
50
+ this.ref = null;
50
51
  this._content = null;
51
52
  this._resizeListener = null;
52
53
  this._debounced = null;
53
54
  this._timeouts = [];
54
55
 
55
56
  this.handleContentRef = node => {
56
- if (typeof this.props.contentRef === 'function') {
57
- this._content = node;
58
- this.props.contentRef(node);
59
- }
57
+ var _this$props$contentRe, _this$props;
58
+
59
+ this.ref = node; // TODO: deprecate _content? ref should be enough
60
+
61
+ this._content = node;
62
+ (_this$props$contentRe = (_this$props = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props, node);
60
63
  };
61
64
  }
62
65
 
@@ -117,10 +120,10 @@ let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _d
117
120
  render() {
118
121
  var _this$props$styles;
119
122
 
120
- const _this$props = this.props,
121
- style = _this$props.style,
122
- label = _this$props.label,
123
- role = _this$props.role;
123
+ const _this$props2 = this.props,
124
+ style = _this$props2.style,
125
+ label = _this$props2.label,
126
+ role = _this$props2.role;
124
127
  return jsx("div", Object.assign({}, omitProps(this.props, DrawerContent.allowedProps, ['shouldTransition']), {
125
128
  role: role,
126
129
  style: style,
package/es/DrawerLayout/DrawerTray/index.js CHANGED
@@ -57,6 +57,8 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
57
57
  portalOpen: false
58
58
  };
59
59
  this._DOMNode = null;
60
+ this.ref = null;
61
+ this._content = null;
60
62
 
61
63
  this.makeStyleProps = () => {
62
64
  return {
@@ -65,12 +67,12 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
65
67
  };
66
68
 
67
69
  this.handleContentRef = node => {
68
- this._content = node;
70
+ var _this$props$contentRe, _this$props;
69
71
 
70
- if (typeof this.props.contentRef === 'function') {
71
- ;
72
- this.props.contentRef(node);
73
- }
72
+ this.ref = node; // TODO: deprecate _content? ref should be enough
73
+
74
+ this._content = node;
75
+ (_this$props$contentRe = (_this$props = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props, node);
74
76
  };
75
77
 
76
78
  this.handleTransitionEntered = () => {
@@ -110,9 +112,9 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
110
112
  }
111
113
 
112
114
  get placement() {
113
- const _this$props = this.props,
114
- placement = _this$props.placement,
115
- dir = _this$props.dir;
115
+ const _this$props2 = this.props,
116
+ placement = _this$props2.placement,
117
+ dir = _this$props2.dir;
116
118
  const isRtl = dir === bidirectional.DIRECTION.rtl;
117
119
  return isRtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
118
120
  }
@@ -134,9 +136,9 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
134
136
  }
135
137
 
136
138
  renderContent() {
137
- const _this$props2 = this.props,
138
- children = _this$props2.children,
139
- render = _this$props2.render;
139
+ const _this$props3 = this.props,
140
+ children = _this$props3.children,
141
+ render = _this$props3.render;
140
142
 
141
143
  if (typeof render === 'function') {
142
144
  return render();
@@ -148,34 +150,34 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
148
150
  }
149
151
 
150
152
  render() {
151
- const _this$props3 = this.props,
152
- label = _this$props3.label,
153
- children = _this$props3.children,
154
- render = _this$props3.render,
155
- placement = _this$props3.placement,
156
- open = _this$props3.open,
157
- onOpen = _this$props3.onOpen,
158
- onClose = _this$props3.onClose,
159
- border = _this$props3.border,
160
- shadow = _this$props3.shadow,
161
- onEnter = _this$props3.onEnter,
162
- onEntering = _this$props3.onEntering,
163
- onEntered = _this$props3.onEntered,
164
- onExit = _this$props3.onExit,
165
- onExiting = _this$props3.onExiting,
166
- onExited = _this$props3.onExited,
167
- contentRef = _this$props3.contentRef,
168
- mountNode = _this$props3.mountNode,
169
- defaultFocusElement = _this$props3.defaultFocusElement,
170
- liveRegion = _this$props3.liveRegion,
171
- onDismiss = _this$props3.onDismiss,
172
- onTransition = _this$props3.onTransition,
173
- shouldReturnFocus = _this$props3.shouldReturnFocus,
174
- shouldCloseOnEscape = _this$props3.shouldCloseOnEscape,
175
- shouldCloseOnDocumentClick = _this$props3.shouldCloseOnDocumentClick,
176
- shouldContainFocus = _this$props3.shouldContainFocus,
177
- styles = _this$props3.styles,
178
- props = _objectWithoutProperties(_this$props3, _excluded);
153
+ const _this$props4 = this.props,
154
+ label = _this$props4.label,
155
+ children = _this$props4.children,
156
+ render = _this$props4.render,
157
+ placement = _this$props4.placement,
158
+ open = _this$props4.open,
159
+ onOpen = _this$props4.onOpen,
160
+ onClose = _this$props4.onClose,
161
+ border = _this$props4.border,
162
+ shadow = _this$props4.shadow,
163
+ onEnter = _this$props4.onEnter,
164
+ onEntering = _this$props4.onEntering,
165
+ onEntered = _this$props4.onEntered,
166
+ onExit = _this$props4.onExit,
167
+ onExiting = _this$props4.onExiting,
168
+ onExited = _this$props4.onExited,
169
+ contentRef = _this$props4.contentRef,
170
+ mountNode = _this$props4.mountNode,
171
+ defaultFocusElement = _this$props4.defaultFocusElement,
172
+ liveRegion = _this$props4.liveRegion,
173
+ onDismiss = _this$props4.onDismiss,
174
+ onTransition = _this$props4.onTransition,
175
+ shouldReturnFocus = _this$props4.shouldReturnFocus,
176
+ shouldCloseOnEscape = _this$props4.shouldCloseOnEscape,
177
+ shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
178
+ shouldContainFocus = _this$props4.shouldContainFocus,
179
+ styles = _this$props4.styles,
180
+ props = _objectWithoutProperties(_this$props4, _excluded);
179
181
 
180
182
  return jsx(DrawerLayoutContext.Consumer, null, shouldOverlayTray => {
181
183
  var _this$props$styles;
package/es/DrawerLayout/index.js CHANGED
@@ -49,6 +49,11 @@ let DrawerLayout = (_dec = withStyle(generateStyle, null), _dec2 = bidirectional
49
49
  constructor(_props) {
50
50
  super(_props);
51
51
  this._content = null;
52
+ this.ref = null;
53
+
54
+ this.handleRef = el => {
55
+ this.ref = el;
56
+ };
52
57
 
53
58
  this.handleTrayContentRef = el => {
54
59
  this._tray = el;
@@ -234,7 +239,8 @@ let DrawerLayout = (_dec = withStyle(generateStyle, null), _dec2 = bidirectional
234
239
  return jsx(DrawerLayoutContext.Provider, {
235
240
  value: this.state.shouldOverlayTray
236
241
  }, jsx("div", Object.assign({}, props, {
237
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerLayout
242
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerLayout,
243
+ ref: this.handleRef
238
244
  }), this.renderChildren()));
239
245
  }
240
246
 
package/lib/DrawerLayout/DrawerContent/index.js CHANGED
@@ -39,16 +39,19 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
39
39
  this.state = {
40
40
  shouldTransition: false
41
41
  };
42
+ this.ref = null;
42
43
  this._content = null;
43
44
  this._resizeListener = null;
44
45
  this._debounced = null;
45
46
  this._timeouts = [];
46
47
 
47
48
  this.handleContentRef = node => {
48
- if (typeof this.props.contentRef === 'function') {
49
- this._content = node;
50
- this.props.contentRef(node);
51
- }
49
+ var _this$props$contentRe, _this$props;
50
+
51
+ this.ref = node; // TODO: deprecate _content? ref should be enough
52
+
53
+ this._content = node;
54
+ (_this$props$contentRe = (_this$props = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props, node);
52
55
  };
53
56
  }
54
57
 
@@ -109,10 +112,10 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
109
112
  render() {
110
113
  var _this$props$styles;
111
114
 
112
- const _this$props = this.props,
113
- style = _this$props.style,
114
- label = _this$props.label,
115
- role = _this$props.role;
115
+ const _this$props2 = this.props,
116
+ style = _this$props2.style,
117
+ label = _this$props2.label,
118
+ role = _this$props2.role;
116
119
  return (0, _emotion.jsx)("div", Object.assign({}, (0, _omitProps.omitProps)(this.props, DrawerContent.allowedProps, ['shouldTransition']), {
117
120
  role: role,
118
121
  style: style,
package/lib/DrawerLayout/DrawerTray/index.js CHANGED
@@ -55,6 +55,8 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
55
55
  portalOpen: false
56
56
  };
57
57
  this._DOMNode = null;
58
+ this.ref = null;
59
+ this._content = null;
58
60
 
59
61
  this.makeStyleProps = () => {
60
62
  return {
@@ -63,12 +65,12 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
63
65
  };
64
66
 
65
67
  this.handleContentRef = node => {
66
- this._content = node;
68
+ var _this$props$contentRe, _this$props;
67
69
 
68
- if (typeof this.props.contentRef === 'function') {
69
- ;
70
- this.props.contentRef(node);
71
- }
70
+ this.ref = node; // TODO: deprecate _content? ref should be enough
71
+
72
+ this._content = node;
73
+ (_this$props$contentRe = (_this$props = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props, node);
72
74
  };
73
75
 
74
76
  this.handleTransitionEntered = () => {
@@ -108,9 +110,9 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
108
110
  }
109
111
 
110
112
  get placement() {
111
- const _this$props = this.props,
112
- placement = _this$props.placement,
113
- dir = _this$props.dir;
113
+ const _this$props2 = this.props,
114
+ placement = _this$props2.placement,
115
+ dir = _this$props2.dir;
114
116
  const isRtl = dir === _bidirectional.bidirectional.DIRECTION.rtl;
115
117
  return isRtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement;
116
118
  }
@@ -132,9 +134,9 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
132
134
  }
133
135
 
134
136
  renderContent() {
135
- const _this$props2 = this.props,
136
- children = _this$props2.children,
137
- render = _this$props2.render;
137
+ const _this$props3 = this.props,
138
+ children = _this$props3.children,
139
+ render = _this$props3.render;
138
140
 
139
141
  if (typeof render === 'function') {
140
142
  return render();
@@ -146,34 +148,34 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
146
148
  }
147
149
 
148
150
  render() {
149
- const _this$props3 = this.props,
150
- label = _this$props3.label,
151
- children = _this$props3.children,
152
- render = _this$props3.render,
153
- placement = _this$props3.placement,
154
- open = _this$props3.open,
155
- onOpen = _this$props3.onOpen,
156
- onClose = _this$props3.onClose,
157
- border = _this$props3.border,
158
- shadow = _this$props3.shadow,
159
- onEnter = _this$props3.onEnter,
160
- onEntering = _this$props3.onEntering,
161
- onEntered = _this$props3.onEntered,
162
- onExit = _this$props3.onExit,
163
- onExiting = _this$props3.onExiting,
164
- onExited = _this$props3.onExited,
165
- contentRef = _this$props3.contentRef,
166
- mountNode = _this$props3.mountNode,
167
- defaultFocusElement = _this$props3.defaultFocusElement,
168
- liveRegion = _this$props3.liveRegion,
169
- onDismiss = _this$props3.onDismiss,
170
- onTransition = _this$props3.onTransition,
171
- shouldReturnFocus = _this$props3.shouldReturnFocus,
172
- shouldCloseOnEscape = _this$props3.shouldCloseOnEscape,
173
- shouldCloseOnDocumentClick = _this$props3.shouldCloseOnDocumentClick,
174
- shouldContainFocus = _this$props3.shouldContainFocus,
175
- styles = _this$props3.styles,
176
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
151
+ const _this$props4 = this.props,
152
+ label = _this$props4.label,
153
+ children = _this$props4.children,
154
+ render = _this$props4.render,
155
+ placement = _this$props4.placement,
156
+ open = _this$props4.open,
157
+ onOpen = _this$props4.onOpen,
158
+ onClose = _this$props4.onClose,
159
+ border = _this$props4.border,
160
+ shadow = _this$props4.shadow,
161
+ onEnter = _this$props4.onEnter,
162
+ onEntering = _this$props4.onEntering,
163
+ onEntered = _this$props4.onEntered,
164
+ onExit = _this$props4.onExit,
165
+ onExiting = _this$props4.onExiting,
166
+ onExited = _this$props4.onExited,
167
+ contentRef = _this$props4.contentRef,
168
+ mountNode = _this$props4.mountNode,
169
+ defaultFocusElement = _this$props4.defaultFocusElement,
170
+ liveRegion = _this$props4.liveRegion,
171
+ onDismiss = _this$props4.onDismiss,
172
+ onTransition = _this$props4.onTransition,
173
+ shouldReturnFocus = _this$props4.shouldReturnFocus,
174
+ shouldCloseOnEscape = _this$props4.shouldCloseOnEscape,
175
+ shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
176
+ shouldContainFocus = _this$props4.shouldContainFocus,
177
+ styles = _this$props4.styles,
178
+ props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
177
179
  return (0, _emotion.jsx)(_index.DrawerLayoutContext.Consumer, null, shouldOverlayTray => {
178
180
  var _this$props$styles;
179
181
 
package/lib/DrawerLayout/index.js CHANGED
@@ -62,6 +62,11 @@ let DrawerLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2
62
62
  constructor(_props) {
63
63
  super(_props);
64
64
  this._content = null;
65
+ this.ref = null;
66
+
67
+ this.handleRef = el => {
68
+ this.ref = el;
69
+ };
65
70
 
66
71
  this.handleTrayContentRef = el => {
67
72
  this._tray = el;
@@ -250,7 +255,8 @@ let DrawerLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2
250
255
  return (0, _emotion.jsx)(DrawerLayoutContext.Provider, {
251
256
  value: this.state.shouldOverlayTray
252
257
  }, (0, _emotion.jsx)("div", Object.assign({}, props, {
253
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerLayout
258
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerLayout,
259
+ ref: this.handleRef
254
260
  }), this.renderChildren()));
255
261
  }
256
262
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-drawer-layout",
3
- "version": "8.10.1-snapshot.9+93b506fe0",
3
+ "version": "8.10.3-snapshot.2+ccdf8f43b",
4
4
  "description": "A main-content-plus-tray layout component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -25,29 +25,29 @@
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/debounce": "8.10.1-snapshot.9+93b506fe0",
30
- "@instructure/emotion": "8.10.1-snapshot.9+93b506fe0",
31
- "@instructure/shared-types": "8.10.1-snapshot.9+93b506fe0",
32
- "@instructure/ui-dialog": "8.10.1-snapshot.9+93b506fe0",
33
- "@instructure/ui-dom-utils": "8.10.1-snapshot.9+93b506fe0",
34
- "@instructure/ui-i18n": "8.10.1-snapshot.9+93b506fe0",
35
- "@instructure/ui-motion": "8.10.1-snapshot.9+93b506fe0",
36
- "@instructure/ui-portal": "8.10.1-snapshot.9+93b506fe0",
37
- "@instructure/ui-position": "8.10.1-snapshot.9+93b506fe0",
38
- "@instructure/ui-prop-types": "8.10.1-snapshot.9+93b506fe0",
39
- "@instructure/ui-react-utils": "8.10.1-snapshot.9+93b506fe0",
40
- "@instructure/ui-test-utils": "8.10.1-snapshot.9+93b506fe0",
41
- "@instructure/ui-testable": "8.10.1-snapshot.9+93b506fe0",
42
- "@instructure/ui-utils": "8.10.1-snapshot.9+93b506fe0",
43
- "@instructure/ui-view": "8.10.1-snapshot.9+93b506fe0",
44
- "@instructure/uid": "8.10.1-snapshot.9+93b506fe0",
28
+ "@instructure/console": "8.10.3-snapshot.2+ccdf8f43b",
29
+ "@instructure/debounce": "8.10.3-snapshot.2+ccdf8f43b",
30
+ "@instructure/emotion": "8.10.3-snapshot.2+ccdf8f43b",
31
+ "@instructure/shared-types": "8.10.3-snapshot.2+ccdf8f43b",
32
+ "@instructure/ui-dialog": "8.10.3-snapshot.2+ccdf8f43b",
33
+ "@instructure/ui-dom-utils": "8.10.3-snapshot.2+ccdf8f43b",
34
+ "@instructure/ui-i18n": "8.10.3-snapshot.2+ccdf8f43b",
35
+ "@instructure/ui-motion": "8.10.3-snapshot.2+ccdf8f43b",
36
+ "@instructure/ui-portal": "8.10.3-snapshot.2+ccdf8f43b",
37
+ "@instructure/ui-position": "8.10.3-snapshot.2+ccdf8f43b",
38
+ "@instructure/ui-prop-types": "8.10.3-snapshot.2+ccdf8f43b",
39
+ "@instructure/ui-react-utils": "8.10.3-snapshot.2+ccdf8f43b",
40
+ "@instructure/ui-test-utils": "8.10.3-snapshot.2+ccdf8f43b",
41
+ "@instructure/ui-testable": "8.10.3-snapshot.2+ccdf8f43b",
42
+ "@instructure/ui-utils": "8.10.3-snapshot.2+ccdf8f43b",
43
+ "@instructure/ui-view": "8.10.3-snapshot.2+ccdf8f43b",
44
+ "@instructure/uid": "8.10.3-snapshot.2+ccdf8f43b",
45
45
  "prop-types": "^15"
46
46
  },
47
47
  "devDependencies": {
48
- "@instructure/ui-babel-preset": "8.10.1-snapshot.9+93b506fe0",
49
- "@instructure/ui-test-locator": "8.10.1-snapshot.9+93b506fe0",
50
- "@instructure/ui-themes": "8.10.1-snapshot.9+93b506fe0"
48
+ "@instructure/ui-babel-preset": "8.10.3-snapshot.2+ccdf8f43b",
49
+ "@instructure/ui-test-locator": "8.10.3-snapshot.2+ccdf8f43b",
50
+ "@instructure/ui-themes": "8.10.3-snapshot.2+ccdf8f43b"
51
51
  },
52
52
  "peerDependencies": {
53
53
  "react": ">=16.8 <=17"
@@ -56,5 +56,5 @@
56
56
  "access": "public"
57
57
  },
58
58
  "sideEffects": false,
59
- "gitHead": "93b506fe0860718ebe2cc2729fd023e3e7489231"
59
+ "gitHead": "ccdf8f43b56a8edef32600281692dfeb436d5a01"
60
60
  }
package/src/DrawerLayout/DrawerContent/index.tsx CHANGED
@@ -70,7 +70,8 @@ class DrawerContent extends Component<
70
70
  shouldTransition: false
71
71
  }
72
72
 
73
- _content = null
73
+ ref: Element | null = null
74
+ _content: Element | null = null
74
75
  _resizeListener = null
75
76
 
76
77
  _debounced = null
@@ -131,11 +132,11 @@ class DrawerContent extends Component<
131
132
  })
132
133
  }
133
134
 
134
- handleContentRef = (node: any) => {
135
- if (typeof this.props.contentRef === 'function') {
136
- this._content = node
137
- this.props.contentRef(node)
138
- }
135
+ handleContentRef = (node: Element | null) => {
136
+ this.ref = node
137
+ // TODO: deprecate _content? ref should be enough
138
+ this._content = node
139
+ this.props.contentRef?.(node)
139
140
  }
140
141
 
141
142
  render() {
package/src/DrawerLayout/DrawerTray/index.tsx CHANGED
@@ -93,7 +93,9 @@ class DrawerTray extends Component<
93
93
  portalOpen: false
94
94
  }
95
95
 
96
- _DOMNode?: PortalNode = null
96
+ _DOMNode: PortalNode = null
97
+ ref: Element | null = null
98
+ _content: Element | null = null
97
99
 
98
100
  componentDidMount() {
99
101
  ;(this.props as any).makeStyles(this.makeStyleProps())
@@ -131,12 +133,11 @@ class DrawerTray extends Component<
131
133
  return `slide-${this.direction}`
132
134
  }
133
135
 
134
- handleContentRef = (node: any) => {
135
- // @ts-expect-error ts-migrate(2551) FIXME: Property '_content' does not exist on type 'Drawer... Remove this comment to see the full error message
136
+ handleContentRef = (node: Element | null) => {
137
+ this.ref = node
138
+ // TODO: deprecate _content? ref should be enough
136
139
  this._content = node
137
- if (typeof (this.props as any).contentRef === 'function') {
138
- ;(this.props as any).contentRef(node)
139
- }
140
+ this.props.contentRef?.(node)
140
141
  }
141
142
 
142
143
  handleTransitionEntered = () => {
@@ -149,7 +150,7 @@ class DrawerTray extends Component<
149
150
  })
150
151
  }
151
152
 
152
- handlePortalOpen = (DOMNode?: PortalNode) => {
153
+ handlePortalOpen = (DOMNode: PortalNode) => {
153
154
  this.DOMNode = DOMNode
154
155
  this.setState({
155
156
  portalOpen: true
@@ -169,7 +170,6 @@ class DrawerTray extends Component<
169
170
  if (typeof render === 'function') {
170
171
  return render()
171
172
  } else if (typeof children === 'function') {
172
- // @ts-expect-error TODO: fix
173
173
  return children()
174
174
  } else {
175
175
  return children
package/src/DrawerLayout/index.tsx CHANGED
@@ -86,6 +86,12 @@ class DrawerLayout extends Component<DrawerLayoutProps> {
86
86
 
87
87
  _content = null
88
88
 
89
+ ref: Element | null = null
90
+
91
+ handleRef = (el: Element | null) => {
92
+ this.ref = el
93
+ }
94
+
89
95
  componentDidMount() {
90
96
  // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
91
97
  this.props.makeStyles()
@@ -323,9 +329,15 @@ class DrawerLayout extends Component<DrawerLayoutProps> {
323
329
  // @ts-expect-error ts-migrate(2339) FIXME: Property '_id' does not exist on type 'DrawerLayou... Remove this comment to see the full error message
324
330
  const props = { [DrawerLayout.locatorAttribute]: this._id }
325
331
  return (
326
- // @ts-expect-error ts-migrate(2339) FIXME: Property 'shouldOverlayTray' does not exist on typ... Remove this comment to see the full error message
327
- <DrawerLayoutContext.Provider value={this.state.shouldOverlayTray}>
328
- <div {...props} css={this.props.styles?.drawerLayout}>
332
+ <DrawerLayoutContext.Provider
333
+ // @ts-expect-error ts-migrate(2339) FIXME: Property 'shouldOverlayTray' does not exist on typ... Remove this comment to see the full error message
334
+ value={this.state.shouldOverlayTray}
335
+ >
336
+ <div
337
+ {...props}
338
+ css={this.props.styles?.drawerLayout}
339
+ ref={this.handleRef}
340
+ >
329
341
  {this.renderChildren()}
330
342
  </div>
331
343
  </DrawerLayoutContext.Provider>