@instructure/ui-overlays 10.2.1-snapshot-11 → 10.2.1-snapshot-14

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 (3) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +22 -22
  3. package/src/Overlay/README.md +71 -22
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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
- ## [10.2.1-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1-snapshot-11) (2024-08-30)
6
+ ## [10.2.1-snapshot-14](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1-snapshot-14) (2024-08-30)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-overlays
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-overlays",
3
- "version": "10.2.1-snapshot-11",
3
+ "version": "10.2.1-snapshot-14",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,8 +23,8 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "10.2.1-snapshot-11",
27
- "@instructure/ui-themes": "10.2.1-snapshot-11",
26
+ "@instructure/ui-babel-preset": "10.2.1-snapshot-14",
27
+ "@instructure/ui-themes": "10.2.1-snapshot-14",
28
28
  "@testing-library/jest-dom": "^6.4.6",
29
29
  "@testing-library/react": "^15.0.7",
30
30
  "@testing-library/user-event": "^14.5.2",
@@ -33,25 +33,25 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@babel/runtime": "^7.24.5",
36
- "@instructure/console": "10.2.1-snapshot-11",
37
- "@instructure/emotion": "10.2.1-snapshot-11",
38
- "@instructure/shared-types": "10.2.1-snapshot-11",
39
- "@instructure/ui-buttons": "10.2.1-snapshot-11",
40
- "@instructure/ui-dialog": "10.2.1-snapshot-11",
41
- "@instructure/ui-dom-utils": "10.2.1-snapshot-11",
42
- "@instructure/ui-focusable": "10.2.1-snapshot-11",
43
- "@instructure/ui-i18n": "10.2.1-snapshot-11",
44
- "@instructure/ui-motion": "10.2.1-snapshot-11",
45
- "@instructure/ui-popover": "10.2.1-snapshot-11",
46
- "@instructure/ui-portal": "10.2.1-snapshot-11",
47
- "@instructure/ui-position": "10.2.1-snapshot-11",
48
- "@instructure/ui-prop-types": "10.2.1-snapshot-11",
49
- "@instructure/ui-react-utils": "10.2.1-snapshot-11",
50
- "@instructure/ui-testable": "10.2.1-snapshot-11",
51
- "@instructure/ui-tooltip": "10.2.1-snapshot-11",
52
- "@instructure/ui-utils": "10.2.1-snapshot-11",
53
- "@instructure/ui-view": "10.2.1-snapshot-11",
54
- "@instructure/uid": "10.2.1-snapshot-11",
36
+ "@instructure/console": "10.2.1-snapshot-14",
37
+ "@instructure/emotion": "10.2.1-snapshot-14",
38
+ "@instructure/shared-types": "10.2.1-snapshot-14",
39
+ "@instructure/ui-buttons": "10.2.1-snapshot-14",
40
+ "@instructure/ui-dialog": "10.2.1-snapshot-14",
41
+ "@instructure/ui-dom-utils": "10.2.1-snapshot-14",
42
+ "@instructure/ui-focusable": "10.2.1-snapshot-14",
43
+ "@instructure/ui-i18n": "10.2.1-snapshot-14",
44
+ "@instructure/ui-motion": "10.2.1-snapshot-14",
45
+ "@instructure/ui-popover": "10.2.1-snapshot-14",
46
+ "@instructure/ui-portal": "10.2.1-snapshot-14",
47
+ "@instructure/ui-position": "10.2.1-snapshot-14",
48
+ "@instructure/ui-prop-types": "10.2.1-snapshot-14",
49
+ "@instructure/ui-react-utils": "10.2.1-snapshot-14",
50
+ "@instructure/ui-testable": "10.2.1-snapshot-14",
51
+ "@instructure/ui-tooltip": "10.2.1-snapshot-14",
52
+ "@instructure/ui-utils": "10.2.1-snapshot-14",
53
+ "@instructure/ui-view": "10.2.1-snapshot-14",
54
+ "@instructure/uid": "10.2.1-snapshot-14",
55
55
  "no-scroll": "^2.1.1",
56
56
  "prop-types": "^15.8.1"
57
57
  },
package/src/Overlay/README.md CHANGED
@@ -5,39 +5,90 @@ describes: Overlay
5
5
  The Overlay component is a closable/dismissible component that transitions
6
6
  in and out content rendered in a [Portal](#Portal)
7
7
 
8
- ```js
9
- ---
10
- type: example
11
- ---
12
- class Example extends React.Component {
13
- state = {
14
- open: false
15
- }
8
+ - ```js
9
+ class Example extends React.Component {
10
+ state = {
11
+ open: false
12
+ }
13
+
14
+ _mask = null
16
15
 
17
- _mask = null
16
+ handleMaskRef = (el) => {
17
+ this._mask = el
18
+ }
18
19
 
19
- handleMaskRef = el => {
20
- this._mask = el
20
+ render() {
21
+ return (
22
+ <div>
23
+ <Button
24
+ onClick={() => {
25
+ this.setState({ open: true })
26
+ }}
27
+ >
28
+ Show the Overlay
29
+ </Button>
30
+ <Overlay
31
+ open={this.state.open}
32
+ transition="fade"
33
+ label="Overlay Example"
34
+ shouldReturnFocus
35
+ shouldContainFocus
36
+ onDismiss={() => {
37
+ this.setState({ open: false })
38
+ }}
39
+ defaultFocusElement={() => this._mask}
40
+ >
41
+ <Mask
42
+ onClick={() => {
43
+ this.setState({ open: false })
44
+ }}
45
+ elementRef={this.handleMaskRef}
46
+ >
47
+ <Spinner
48
+ renderTitle="Loading"
49
+ size="large"
50
+ margin="0 0 0 medium"
51
+ />
52
+ </Mask>
53
+ </Overlay>
54
+ </div>
55
+ )
56
+ }
21
57
  }
22
58
 
23
- render () {
59
+ render(<Example />)
60
+ ```
61
+
62
+ - ```js
63
+ const Example = () => {
64
+ const [open, setOpen] = useState(false)
65
+ const maskRef = useRef(null)
66
+
24
67
  return (
25
68
  <div>
26
- <Button onClick={() => { this.setState({ open: true })}}>
69
+ <Button
70
+ onClick={() => {
71
+ setOpen(true)
72
+ }}
73
+ >
27
74
  Show the Overlay
28
75
  </Button>
29
76
  <Overlay
30
- open={this.state.open}
77
+ open={open}
31
78
  transition="fade"
32
79
  label="Overlay Example"
33
80
  shouldReturnFocus
34
81
  shouldContainFocus
35
- onDismiss={() => { this.setState({ open: false })}}
36
- defaultFocusElement={() => this._mask}
82
+ onDismiss={() => {
83
+ setOpen(false)
84
+ }}
85
+ defaultFocusElement={() => maskRef.current}
37
86
  >
38
87
  <Mask
39
- onClick={() => { this.setState({ open: false })}}
40
- elementRef={this.handleMaskRef}
88
+ onClick={() => {
89
+ setOpen(false)
90
+ }}
91
+ elementRef={maskRef}
41
92
  >
42
93
  <Spinner renderTitle="Loading" size="large" margin="0 0 0 medium" />
43
94
  </Mask>
@@ -45,10 +96,8 @@ class Example extends React.Component {
45
96
  </div>
46
97
  )
47
98
  }
48
- }
49
-
50
- render(<Example />)
51
- ```
99
+ render(<Example />)
100
+ ```
52
101
 
53
102
  ### Guidelines
54
103