@instructure/ui-popover 8.10.3-snapshot.4 → 8.11.1

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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/es/Popover/index.js +14 -12
  3. package/es/Popover/props.js +4 -1
  4. package/lib/Popover/index.js +14 -12
  5. package/lib/Popover/props.js +4 -1
  6. package/package.json +20 -21
  7. package/src/Popover/README.md +247 -33
  8. package/src/Popover/index.tsx +6 -1
  9. package/src/Popover/props.ts +29 -1
  10. package/types/Popover/index.d.ts.map +1 -1
  11. package/types/Popover/props.d.ts.map +1 -1
  12. package/LICENSE.md +0 -27
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.11.1](https://github.com/instructure/instructure-ui/compare/v8.11.0...v8.11.1) (2021-10-19)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-popover
9
+
10
+ # [8.11.0](https://github.com/instructure/instructure-ui/compare/v8.10.2...v8.11.0) (2021-10-15)
11
+
12
+ **Note:** Version bump only for package @instructure/ui-popover
13
+
6
14
  ## [8.10.2](https://github.com/instructure/instructure-ui/compare/v8.10.1...v8.10.2) (2021-10-01)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-popover
package/es/Popover/index.js CHANGED
@@ -53,10 +53,12 @@ let Popover = (_dec = bidirectional(), _dec2 = testable(), _dec(_class = _dec2(_
53
53
  this.ref = null;
54
54
 
55
55
  this.handleRef = el => {
56
- var _this$props$elementRe, _this$props;
57
-
56
+ const elementRef = this.props.elementRef;
58
57
  this.ref = el;
59
- (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
58
+
59
+ if (typeof elementRef === 'function') {
60
+ elementRef(el);
61
+ }
60
62
  };
61
63
 
62
64
  this.show = event => {
@@ -70,9 +72,9 @@ let Popover = (_dec = bidirectional(), _dec2 = testable(), _dec(_class = _dec2(_
70
72
  };
71
73
 
72
74
  this.hide = (event, documentClick = false) => {
73
- const _this$props2 = this.props,
74
- onHideContent = _this$props2.onHideContent,
75
- isShowingContent = _this$props2.isShowingContent;
75
+ const _this$props = this.props,
76
+ onHideContent = _this$props.onHideContent,
77
+ isShowingContent = _this$props.isShowingContent;
76
78
 
77
79
  if (typeof isShowingContent === 'undefined') {
78
80
  // uncontrolled, set state, fire callbacks
@@ -265,9 +267,9 @@ let Popover = (_dec = bidirectional(), _dec2 = testable(), _dec(_class = _dec2(_
265
267
  }
266
268
 
267
269
  computeOffsets(placement) {
268
- let _this$props3 = this.props,
269
- offsetX = _this$props3.offsetX,
270
- offsetY = _this$props3.offsetY;
270
+ let _this$props2 = this.props,
271
+ offsetX = _this$props2.offsetX,
272
+ offsetY = _this$props2.offsetY;
271
273
 
272
274
  if (this.props.shouldAlignArrow && this._view) {
273
275
  const secondaryPlacement = parsePlacement(placement)[1]; // arrowSize and arrowBorderWidth are component theme variables
@@ -337,9 +339,9 @@ let Popover = (_dec = bidirectional(), _dec2 = testable(), _dec(_class = _dec2(_
337
339
  let trigger = callRenderProp(this.props.renderTrigger);
338
340
 
339
341
  if (trigger) {
340
- const _this$props4 = this.props,
341
- on = _this$props4.on,
342
- shouldContainFocus = _this$props4.shouldContainFocus;
342
+ const _this$props3 = this.props,
343
+ on = _this$props3.on,
344
+ shouldContainFocus = _this$props3.shouldContainFocus;
343
345
  let onClick;
344
346
  let onFocus;
345
347
  let onMouseOut;
package/es/Popover/props.js CHANGED
@@ -25,6 +25,9 @@ import PropTypes from 'prop-types';
25
25
  import { element } from '@instructure/ui-prop-types';
26
26
  import { ThemeablePropTypes } from '@instructure/emotion';
27
27
  import { PositionPropTypes } from '@instructure/ui-position';
28
+ // Copied list from "PositionPropTypes.placement" so that it appears as options in the properties table.
29
+ // TODO: try to use "PositionPropTypes.placement" again once Popover is fully typed and uses @tsProps
30
+ const placementPropValues = ['top', 'bottom', 'start', 'end', 'top start', 'top center', 'top end', 'top stretch', 'bottom start', 'bottom center', 'bottom end', 'bottom stretch', 'start top', 'start center', 'start bottom', 'start stretch', 'end top', 'end center', 'end bottom', 'end stretch', 'center start', 'center end', 'offscreen'];
28
31
  const propTypes = {
29
32
  /**
30
33
  * Whether or not the `<Popover />` content is shown
@@ -54,7 +57,7 @@ const propTypes = {
54
57
  /**
55
58
  * The placement of the content in relation to the trigger
56
59
  */
57
- placement: PositionPropTypes.placement,
60
+ placement: PropTypes.oneOf(placementPropValues),
58
61
 
59
62
  /**
60
63
  * Controls the shadow depth for the `<Popover />`
package/lib/Popover/index.js CHANGED
@@ -72,10 +72,12 @@ let Popover = (_dec = (0, _bidirectional.bidirectional)(), _dec2 = (0, _testable
72
72
  this.ref = null;
73
73
 
74
74
  this.handleRef = el => {
75
- var _this$props$elementRe, _this$props;
76
-
75
+ const elementRef = this.props.elementRef;
77
76
  this.ref = el;
78
- (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
77
+
78
+ if (typeof elementRef === 'function') {
79
+ elementRef(el);
80
+ }
79
81
  };
80
82
 
81
83
  this.show = event => {
@@ -89,9 +91,9 @@ let Popover = (_dec = (0, _bidirectional.bidirectional)(), _dec2 = (0, _testable
89
91
  };
90
92
 
91
93
  this.hide = (event, documentClick = false) => {
92
- const _this$props2 = this.props,
93
- onHideContent = _this$props2.onHideContent,
94
- isShowingContent = _this$props2.isShowingContent;
94
+ const _this$props = this.props,
95
+ onHideContent = _this$props.onHideContent,
96
+ isShowingContent = _this$props.isShowingContent;
95
97
 
96
98
  if (typeof isShowingContent === 'undefined') {
97
99
  // uncontrolled, set state, fire callbacks
@@ -284,9 +286,9 @@ let Popover = (_dec = (0, _bidirectional.bidirectional)(), _dec2 = (0, _testable
284
286
  }
285
287
 
286
288
  computeOffsets(placement) {
287
- let _this$props3 = this.props,
288
- offsetX = _this$props3.offsetX,
289
- offsetY = _this$props3.offsetY;
289
+ let _this$props2 = this.props,
290
+ offsetX = _this$props2.offsetX,
291
+ offsetY = _this$props2.offsetY;
290
292
 
291
293
  if (this.props.shouldAlignArrow && this._view) {
292
294
  const secondaryPlacement = (0, _parsePlacement.parsePlacement)(placement)[1]; // arrowSize and arrowBorderWidth are component theme variables
@@ -356,9 +358,9 @@ let Popover = (_dec = (0, _bidirectional.bidirectional)(), _dec2 = (0, _testable
356
358
  let trigger = (0, _callRenderProp.callRenderProp)(this.props.renderTrigger);
357
359
 
358
360
  if (trigger) {
359
- const _this$props4 = this.props,
360
- on = _this$props4.on,
361
- shouldContainFocus = _this$props4.shouldContainFocus;
361
+ const _this$props3 = this.props,
362
+ on = _this$props3.on,
363
+ shouldContainFocus = _this$props3.shouldContainFocus;
362
364
  let onClick;
363
365
  let onFocus;
364
366
  let onMouseOut;
package/lib/Popover/props.js CHANGED
@@ -38,6 +38,9 @@ var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes
38
38
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
39
39
  * SOFTWARE.
40
40
  */
41
+ // Copied list from "PositionPropTypes.placement" so that it appears as options in the properties table.
42
+ // TODO: try to use "PositionPropTypes.placement" again once Popover is fully typed and uses @tsProps
43
+ const placementPropValues = ['top', 'bottom', 'start', 'end', 'top start', 'top center', 'top end', 'top stretch', 'bottom start', 'bottom center', 'bottom end', 'bottom stretch', 'start top', 'start center', 'start bottom', 'start stretch', 'end top', 'end center', 'end bottom', 'end stretch', 'center start', 'center end', 'offscreen'];
41
44
  const propTypes = {
42
45
  /**
43
46
  * Whether or not the `<Popover />` content is shown
@@ -67,7 +70,7 @@ const propTypes = {
67
70
  /**
68
71
  * The placement of the content in relation to the trigger
69
72
  */
70
- placement: _PositionPropTypes.PositionPropTypes.placement,
73
+ placement: _propTypes.default.oneOf(placementPropValues),
71
74
 
72
75
  /**
73
76
  * Controls the shadow depth for the `<Popover />`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-popover",
3
- "version": "8.10.3-snapshot.4+118e47643",
3
+ "version": "8.11.1",
4
4
  "description": "A component for hiding or showing content based on user interaction.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -25,28 +25,28 @@
25
25
  "license": "MIT",
26
26
  "dependencies": {
27
27
  "@babel/runtime": "^7.13.10",
28
- "@instructure/console": "8.10.3-snapshot.4+118e47643",
29
- "@instructure/emotion": "8.10.3-snapshot.4+118e47643",
30
- "@instructure/ui-a11y-utils": "8.10.3-snapshot.4+118e47643",
31
- "@instructure/ui-dialog": "8.10.3-snapshot.4+118e47643",
32
- "@instructure/ui-dom-utils": "8.10.3-snapshot.4+118e47643",
33
- "@instructure/ui-i18n": "8.10.3-snapshot.4+118e47643",
34
- "@instructure/ui-position": "8.10.3-snapshot.4+118e47643",
35
- "@instructure/ui-prop-types": "8.10.3-snapshot.4+118e47643",
36
- "@instructure/ui-react-utils": "8.10.3-snapshot.4+118e47643",
37
- "@instructure/ui-testable": "8.10.3-snapshot.4+118e47643",
38
- "@instructure/ui-utils": "8.10.3-snapshot.4+118e47643",
39
- "@instructure/ui-view": "8.10.3-snapshot.4+118e47643",
40
- "@instructure/uid": "8.10.3-snapshot.4+118e47643",
28
+ "@instructure/console": "8.11.1",
29
+ "@instructure/emotion": "8.11.1",
30
+ "@instructure/ui-a11y-utils": "8.11.1",
31
+ "@instructure/ui-dialog": "8.11.1",
32
+ "@instructure/ui-dom-utils": "8.11.1",
33
+ "@instructure/ui-i18n": "8.11.1",
34
+ "@instructure/ui-position": "8.11.1",
35
+ "@instructure/ui-prop-types": "8.11.1",
36
+ "@instructure/ui-react-utils": "8.11.1",
37
+ "@instructure/ui-testable": "8.11.1",
38
+ "@instructure/ui-utils": "8.11.1",
39
+ "@instructure/ui-view": "8.11.1",
40
+ "@instructure/uid": "8.11.1",
41
41
  "keycode": "^2",
42
42
  "prop-types": "^15"
43
43
  },
44
44
  "devDependencies": {
45
- "@instructure/ui-babel-preset": "8.10.3-snapshot.4+118e47643",
46
- "@instructure/ui-color-utils": "8.10.3-snapshot.4+118e47643",
47
- "@instructure/ui-test-locator": "8.10.3-snapshot.4+118e47643",
48
- "@instructure/ui-test-queries": "8.10.3-snapshot.4+118e47643",
49
- "@instructure/ui-test-utils": "8.10.3-snapshot.4+118e47643"
45
+ "@instructure/ui-babel-preset": "8.11.1",
46
+ "@instructure/ui-color-utils": "8.11.1",
47
+ "@instructure/ui-test-locator": "8.11.1",
48
+ "@instructure/ui-test-queries": "8.11.1",
49
+ "@instructure/ui-test-utils": "8.11.1"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "react": ">=16.8 <=17"
@@ -54,6 +54,5 @@
54
54
  "publishConfig": {
55
55
  "access": "public"
56
56
  },
57
- "sideEffects": false,
58
- "gitHead": "118e47643bbadaf5beac7f8ffb047b29eb0618d1"
57
+ "sideEffects": false
59
58
  }
package/src/Popover/README.md CHANGED
@@ -9,25 +9,72 @@ Popovers hide or show content as a result of user interaction, such as clicking,
9
9
  ```js
10
10
  ---
11
11
  example: true
12
+ render: false
12
13
  ---
13
- <Popover
14
- renderTrigger={
15
- <Link aria-describedby="tip">
16
- Hover or focus me
17
- </Link>
14
+ class Example extends React.Component {
15
+ state = {
16
+ withArrow: true,
17
+ shouldAlignArrow: true,
18
+ color : "primary"
18
19
  }
19
- shouldRenderOffscreen
20
- shouldReturnFocus={false}
21
- placement="top center"
22
- mountNode={() => document.getElementById('main')}
23
- onPositioned={() => console.log('positioned')}
24
- onShowContent={() => console.log('showing')}
25
- onHideContent={() => console.log('hidden')}
26
- >
27
- <View padding="x-small" display="block" as="div" id="tip">
28
- Hello World
29
- </View>
30
- </Popover>
20
+ toggleWithArrow = (event) => this.setState({ withArrow: !this.state.withArrow })
21
+ toggleAlignArrow = (event) => this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
22
+ changeColor = (event,color) => {this.setState({color})}
23
+ render() {
24
+ return (
25
+ <>
26
+ <FormFieldGroup description="Uncontrolled Popover Example">
27
+ <Checkbox
28
+ checked={this.state.withArrow}
29
+ label="With Arrow"
30
+ onChange={this.toggleWithArrow}
31
+ />
32
+ <Checkbox
33
+ checked={this.state.shouldAlignArrow}
34
+ label="Align Arrow"
35
+ onChange={this.toggleAlignArrow}
36
+ />
37
+ </FormFieldGroup>
38
+ <View display="block" margin="small none">
39
+ <RadioInputGroup
40
+ name="color"
41
+ defaultValue="primary"
42
+ description="Color:"
43
+ variant="toggle"
44
+ size="small"
45
+ onChange={this.changeColor} >
46
+ <RadioInput label="Primary" value="primary"/>
47
+ <RadioInput label="Primary inverse" value="primary-inverse" />
48
+ </RadioInputGroup>
49
+ </View>
50
+ <View display="block" as="div" margin="small">
51
+ <Popover
52
+ renderTrigger={
53
+ <Link aria-describedby="tip">
54
+ Hover or focus me
55
+ </Link>
56
+ }
57
+ shouldRenderOffscreen
58
+ shouldReturnFocus={false}
59
+ withArrow={this.state.withArrow}
60
+ shouldAlignArrow={this.state.shouldAlignArrow}
61
+ color = {this.state.color}
62
+ placement = "top end"
63
+ mountNode={() => document.getElementById('main')}
64
+ onPositioned={() => console.log('positioned')}
65
+ onShowContent={() => console.log('showing')}
66
+ onHideContent={() => console.log('hidden')}
67
+ >
68
+ <View padding="x-small" display="block" as="div" id="tip">
69
+ Hello World
70
+ </View>
71
+ </Popover>
72
+ </View>
73
+ </>
74
+ )
75
+ }
76
+ }
77
+ render(<Example />)
31
78
 
32
79
  ```
33
80
 
@@ -39,14 +86,12 @@ render: false
39
86
  example: true
40
87
  ---
41
88
  class Example extends React.Component {
42
- constructor (props) {
43
- super(props)
44
89
 
45
- this.state = {
46
- isShowingContent: false
47
- }
90
+ state = {
91
+ isShowingContent: false
48
92
  }
49
93
 
94
+
50
95
  renderCloseButton () {
51
96
  return (
52
97
  <CloseButton
@@ -105,21 +150,35 @@ render: false
105
150
  example: true
106
151
  ---
107
152
  class Example extends React.Component {
108
- render () {
109
- return (
153
+ state={
154
+ shouldAlignArrow : true
155
+ }
156
+ toggleAlignArrow = (event) => this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
157
+
158
+ render () {
159
+ return (
160
+ <>
161
+ <FormFieldGroup description="Align Arrow Example">
162
+ <Checkbox
163
+ checked={this.state.shouldAlignArrow}
164
+ label="Align Arrow"
165
+ onChange={this.toggleAlignArrow}
166
+ />
167
+ </FormFieldGroup>
110
168
  <div style={{ paddingBottom: 25, display: 'flex', justifyContent: 'center' }}>
111
169
  <Popover
112
170
  renderTrigger={<div style={{display: 'inline-block', height: '3px', width: '3px', background: 'blue'}}/>}
113
171
  isShowingContent={true}
114
172
  placement="end top"
115
- shouldAlignArrow
173
+ shouldAlignArrow={this.state.shouldAlignArrow}
116
174
  mountNode={() => document.getElementById('main')}
117
175
  >
118
176
  <Heading>Small<br/>Target</Heading>
119
177
  </Popover>
120
178
  </div>
121
- )
122
- }
179
+ </>
180
+ )
181
+ }
123
182
  }
124
183
 
125
184
  render(<Example />)
@@ -133,12 +192,9 @@ render: false
133
192
  example: true
134
193
  ---
135
194
  class Example extends React.Component {
136
- constructor (props) {
137
- super(props)
138
195
 
139
- this.state = {
140
- isShowingContent: false
141
- }
196
+ state = {
197
+ isShowingContent: false
142
198
  }
143
199
 
144
200
  render () {
@@ -170,7 +226,7 @@ class Example extends React.Component {
170
226
  render(<Example />)
171
227
  ```
172
228
 
173
- ### Custom elements as renderTrigger
229
+ #### Custom elements as renderTrigger
174
230
 
175
231
  Popover and Tooltip attach mouse and focus event listeners to their `renderTrigger` components via props. These need to be propagated to the component for the listeners to work:
176
232
 
@@ -193,6 +249,164 @@ class MyComponent extends React.Component {
193
249
  </Popover>
194
250
  ```
195
251
 
252
+ #### Popover playground
253
+
254
+ ```js
255
+ ---
256
+ render: false
257
+ example: true
258
+ ---
259
+ class Example extends React.Component {
260
+
261
+ state = {
262
+ shouldAlignArrow: true,
263
+ isShowingContent: true,
264
+ withArrow: true,
265
+ placement: 'top',
266
+ shadow: 'topmost',
267
+ color : 'primary'
268
+ }
269
+ static placementsValues = [
270
+ 'top',
271
+ 'end',
272
+ 'bottom',
273
+ 'start',
274
+ 'top start',
275
+ 'start top',
276
+ 'start center',
277
+ 'start bottom',
278
+ 'bottom start',
279
+ 'bottom center',
280
+ 'bottom end',
281
+ 'end bottom',
282
+ 'end center',
283
+ 'end top',
284
+ 'top end',
285
+ 'top center',
286
+ 'center end',
287
+ 'center start'
288
+ ];
289
+ static shadowValues = [
290
+ 'none',
291
+ 'resting',
292
+ 'above',
293
+ 'topmost'
294
+ ];
295
+ changePlacement = (e, { value }) => this.setState({ placement: value })
296
+ changeShadow = (e, { value }) => this.setState({ shadow: value})
297
+ toggleWithArrow = (event) => this.setState({ withArrow: !this.state.withArrow })
298
+ toggleAlignArrow = (event) => this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
299
+ toggleShowContent = (event) => this.setState({ isShowingContent: !this.state.isShowingContent })
300
+ changeColor = (event,value) => this.setState({color:value})
301
+ render() {
302
+ return (
303
+ <View as="div" background="primary" padding="small">
304
+ <Flex margin="small small large" justifyItems="space-around">
305
+ <Flex.Item align="start">
306
+ <FormFieldGroup description="Popover Example">
307
+ <Checkbox
308
+ checked={this.state.isShowingContent}
309
+ label="Show Content"
310
+ onChange={this.toggleShowContent}
311
+ />
312
+ <Checkbox
313
+ checked={this.state.withArrow}
314
+ label="With Arrow"
315
+ onChange={this.toggleWithArrow}
316
+ />
317
+ <Checkbox
318
+ checked={this.state.shouldAlignArrow}
319
+ label="Align Arrow"
320
+ onChange={this.toggleAlignArrow}
321
+ />
322
+ </FormFieldGroup>
323
+ </Flex.Item>
324
+ <Flex.Item>
325
+ <View
326
+ as="div"
327
+ margin="none"
328
+ maxWidth="15rem"
329
+ >
330
+ <SimpleSelect
331
+ renderLabel="Placement"
332
+ value={this.state.placement}
333
+ onChange={this.changePlacement}
334
+ >
335
+ {Example.placementsValues.map((placement, index) => (
336
+ <SimpleSelect.Option
337
+ key={index}
338
+ id={`${index}`}
339
+ value={placement}
340
+ >
341
+ {placement}
342
+ </SimpleSelect.Option>
343
+ ))}
344
+ </SimpleSelect>
345
+ </View>
346
+ <View
347
+ as="div"
348
+ margin="medium none"
349
+ maxWidth="15rem"
350
+ >
351
+ <SimpleSelect value={this.state.shadow}
352
+ onChange={this.changeShadow}
353
+ renderLabel="Shadow"
354
+ >
355
+ {
356
+ Example.shadowValues.map((shadow, index) => (
357
+ <SimpleSelect.Option
358
+ key={index}
359
+ id={`${index}`}
360
+ value={shadow}
361
+ >
362
+ {shadow}
363
+ </SimpleSelect.Option>
364
+ ))
365
+ }
366
+ </SimpleSelect>
367
+ </View>
368
+ </Flex.Item>
369
+ <Flex.Item align="start">
370
+ <View as="div" margin="none">
371
+ <RadioInputGroup
372
+ name="changeColor"
373
+ defaultValue="primary"
374
+ description="Color:"
375
+ variant="toggle"
376
+ size="small"
377
+ onChange={this.changeColor} >
378
+ <RadioInput label="Primary" value="primary"/>
379
+ <RadioInput label="Primary inverse" value="primary-inverse" />
380
+ </RadioInputGroup>
381
+ </View>
382
+ </Flex.Item>
383
+ </Flex>
384
+ <View
385
+ as="div"
386
+ display="block"
387
+ padding="large"
388
+ textAlign="center">
389
+ <Popover
390
+ renderTrigger={<div style={{ display: 'inline-block', height: '3px', width: '3px', background: 'blue' }}/>}
391
+ isShowingContent={this.state.isShowingContent}
392
+ placement={this.state.placement}
393
+ withArrow={this.state.withArrow}
394
+ shouldAlignArrow={this.state.shouldAlignArrow}
395
+ shadow={this.state.shadow}
396
+ color={this.state.color}
397
+ mountNode={() => document.getElementById('main')}
398
+ >
399
+ <Heading>Small<br />Target</Heading>
400
+ </Popover>
401
+ </View>
402
+ </View>
403
+ )
404
+ }
405
+ }
406
+
407
+ render(<Example />)
408
+ ```
409
+
196
410
  ### Guidelines
197
411
 
198
412
  ```js
package/src/Popover/index.tsx CHANGED
@@ -156,8 +156,13 @@ class Popover extends Component<PopoverProps> {
156
156
  ref: Element | null = null
157
157
 
158
158
  handleRef = (el: Element | null) => {
159
+ const { elementRef } = this.props
160
+
159
161
  this.ref = el
160
- this.props.elementRef?.(el)
162
+
163
+ if (typeof elementRef === 'function') {
164
+ elementRef(el)
165
+ }
161
166
  }
162
167
 
163
168
  get isTooltip() {
package/src/Popover/props.ts CHANGED
@@ -38,6 +38,34 @@ import type {
38
38
  import type { BidirectionalProps } from '@instructure/ui-i18n'
39
39
  import type { PropValidators } from '@instructure/shared-types'
40
40
 
41
+ // Copied list from "PositionPropTypes.placement" so that it appears as options in the properties table.
42
+ // TODO: try to use "PositionPropTypes.placement" again once Popover is fully typed and uses @tsProps
43
+ const placementPropValues = [
44
+ 'top',
45
+ 'bottom',
46
+ 'start',
47
+ 'end',
48
+ 'top start',
49
+ 'top center',
50
+ 'top end',
51
+ 'top stretch',
52
+ 'bottom start',
53
+ 'bottom center',
54
+ 'bottom end',
55
+ 'bottom stretch',
56
+ 'start top',
57
+ 'start center',
58
+ 'start bottom',
59
+ 'start stretch',
60
+ 'end top',
61
+ 'end center',
62
+ 'end bottom',
63
+ 'end stretch',
64
+ 'center start',
65
+ 'center end',
66
+ 'offscreen'
67
+ ]
68
+
41
69
  type PopoverOwnProps = {
42
70
  isShowingContent?: boolean
43
71
  defaultIsShowingContent?: boolean
@@ -118,7 +146,7 @@ const propTypes: PropValidators<PropKeys> = {
118
146
  /**
119
147
  * The placement of the content in relation to the trigger
120
148
  */
121
- placement: PositionPropTypes.placement,
149
+ placement: PropTypes.oneOf(placementPropValues),
122
150
  /**
123
151
  * Controls the shadow depth for the `<Popover />`
124
152
  */
package/types/Popover/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBxC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAS1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C;;;;;GAKG;AACH,cAEM,OAAQ,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC3C,MAAM,CAAC,QAAQ,CAAC,WAAW,aAAY;IAEvC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8ClB;IAED,gBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,GAAG,SAAS,CAAA;IACrD,eAAe,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,GAAG,SAAS,CAAA;gBAGxC,KAAK,KAAA;IAkCjB,IAAI,EAAE,yBAAyB,EAAE,CAAK;IAEtC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;IAED,IAAI,SAAS,wBAOZ;IAED,iBAAiB;IAmBjB,oBAAoB;IAcpB,qBAAqB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,WAAW,KAAA;IAQvD,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IA6CjD,cAAc,CAAC,SAAS,KAAA;;;;IA4BxB,IAAI,SAAS,2DAWZ;IAED,IAAI,aAAa;;;;;;;;;;;;MAiBhB;IAED,IAAI,KAAK,QAKR;IAED,IAAI,mBAAmB,+GAEtB;IAGD,IAAI,uBAMH;IAGD,IAAI,gDAkBH;IAGD,MAAM,uBAML;IAGD,mBAAmB,2BAclB;IAGD,gBAAgB,uBASf;IAGD,oBAAoB,uBAcnB;IAGD,kBAAkB,uBAOjB;IAGD,iBAAiB,uBAYhB;IAGD,gBAAgB,0BAQf;IAGD,qBAAqB,0BAQpB;IAED,aAAa;IAyEb,aAAa;IA0Fb,MAAM;CAsBP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBxC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAS1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C;;;;;GAKG;AACH,cAEM,OAAQ,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC3C,MAAM,CAAC,QAAQ,CAAC,WAAW,aAAY;IAEvC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8ClB;IAED,gBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,GAAG,SAAS,CAAA;IACrD,eAAe,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,GAAG,SAAS,CAAA;gBAGxC,KAAK,KAAA;IAkCjB,IAAI,EAAE,yBAAyB,EAAE,CAAK;IAEtC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,IAAI,SAAS,wBAOZ;IAED,iBAAiB;IAmBjB,oBAAoB;IAcpB,qBAAqB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,WAAW,KAAA;IAQvD,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IA6CjD,cAAc,CAAC,SAAS,KAAA;;;;IA4BxB,IAAI,SAAS,2DAWZ;IAED,IAAI,aAAa;;;;;;;;;;;;MAiBhB;IAED,IAAI,KAAK,QAKR;IAED,IAAI,mBAAmB,+GAEtB;IAGD,IAAI,uBAMH;IAGD,IAAI,gDAkBH;IAGD,MAAM,uBAML;IAGD,mBAAmB,2BAclB;IAGD,gBAAgB,uBASf;IAGD,oBAAoB,uBAcnB;IAGD,kBAAkB,uBAOjB;IAGD,iBAAiB,uBAYhB;IAGD,gBAAgB,0BAQf;IAGD,qBAAqB,0BAQpB;IAED,aAAa;IAyEb,aAAa;IA0Fb,MAAM;CAsBP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}
package/types/Popover/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Popover/props.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Popover/props.ts"],"names":[],"mappings":"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"}
package/LICENSE.md DELETED
@@ -1,27 +0,0 @@
1
- ---
2
- title: The MIT License (MIT)
3
- category: Getting Started
4
- order: 9
5
- ---
6
-
7
- # The MIT License (MIT)
8
-
9
- Copyright (c) 2015 Instructure, Inc.
10
-
11
- **Permission is hereby granted, free of charge, to any person obtaining a copy
12
- of this software and associated documentation files (the "Software"), to deal
13
- in the Software without restriction, including without limitation the rights
14
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
- copies of the Software, and to permit persons to whom the Software is
16
- furnished to do so, subject to the following conditions.**
17
-
18
- The above copyright notice and this permission notice shall be included in all
19
- copies or substantial portions of the Software.
20
-
21
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27
- SOFTWARE.