@instructure/ui-dialog 8.12.1-snapshot.3 → 8.12.1-snapshot.32

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 (11) hide show
  1. package/es/Dialog/index.js +2 -7
  2. package/es/Dialog/props.js +38 -17
  3. package/lib/Dialog/index.js +2 -7
  4. package/lib/Dialog/props.js +38 -17
  5. package/package.json +11 -11
  6. package/src/Dialog/index.tsx +9 -28
  7. package/src/Dialog/props.ts +52 -39
  8. package/types/Dialog/index.d.ts +8 -47
  9. package/types/Dialog/index.d.ts.map +1 -1
  10. package/types/Dialog/props.d.ts +19 -13
  11. package/types/Dialog/props.d.ts.map +1 -1
package/es/Dialog/index.js CHANGED
@@ -36,6 +36,7 @@ import { propTypes, allowedProps } from './props';
36
36
  category: components/utilities
37
37
  ---
38
38
  @module Dialog
39
+ @tsProps
39
40
  **/
40
41
  class Dialog extends Component {
41
42
  constructor(...args) {
@@ -172,18 +173,12 @@ Dialog.componentId = 'Dialog';
172
173
  Dialog.propTypes = propTypes;
173
174
  Dialog.allowedProps = allowedProps;
174
175
  Dialog.defaultProps = {
175
- children: null,
176
176
  open: false,
177
177
  shouldFocusOnOpen: true,
178
178
  shouldContainFocus: false,
179
179
  shouldReturnFocus: false,
180
180
  shouldCloseOnDocumentClick: true,
181
- shouldCloseOnEscape: true,
182
- defaultFocusElement: void 0,
183
- contentElement: void 0,
184
- liveRegion: void 0,
185
- onBlur: event => {},
186
- onDismiss: event => {}
181
+ shouldCloseOnEscape: true
187
182
  };
188
183
  export default Dialog;
189
184
  export { Dialog };
package/es/Dialog/props.js CHANGED
@@ -22,51 +22,72 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
  import PropTypes from 'prop-types';
25
+ // JSDoc comments are here, because the doc app is not able to pick them up if
26
+ // they are in another package
25
27
  const propTypes = {
26
- /**
27
- * The children to be rendered within the `<Dialog />`
28
- */
29
28
  children: PropTypes.node,
30
-
31
- /**
32
- * The element to render as the component root, `span` by default
33
- */
34
29
  as: PropTypes.elementType,
35
30
  // eslint-disable-line react/require-default-props
36
31
  display: PropTypes.oneOf(['auto', 'block', 'inline-block']),
37
32
  label: PropTypes.string,
38
-
39
- /**
40
- * Whether or not the `<Dialog />` is open
41
- */
42
33
  open: PropTypes.bool,
43
34
 
44
35
  /**
45
- * Function called when tab focus leaves the `<Dialog />` focusable content. This only
36
+ * Function called when tab focus leaves the focusable content. This only
46
37
  * occurs when `shouldContainFocus` is set to false.
47
38
  */
48
39
  onBlur: PropTypes.func,
49
- onDismiss: PropTypes.func,
50
40
 
51
41
  /**
52
- * An element or a function returning an element to focus by default
42
+ * Function called when a focus region is dismissed. This can happen when
43
+ * the user presses the escape key and `shouldCloseOnEscape` is true or
44
+ * when an IFrame is clicked or when anything outside the focus region
45
+ * is clicked if `shouldCloseOnDocumentClick` is true.
46
+ * @param event The event triggered the dismissal
47
+ * @param documentClick Whether the dismissal was triggered by a mouse click.
53
48
  */
54
- defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
49
+ onDismiss: PropTypes.func,
55
50
 
56
51
  /**
57
- * An element or a function returning an element that wraps the content of the `<Dialog />`
52
+ * An element or a function returning an element to focus by default
58
53
  */
54
+ defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
59
55
  contentElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
60
56
 
61
57
  /**
62
58
  * An element, function returning an element, or array of elements that will not be hidden from
63
- * the screen reader when the `<Dialog />` is open
59
+ * the screen reader when the focus region is active
64
60
  */
65
61
  liveRegion: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
62
+
63
+ /**
64
+ * When set to true or its an array that includes the 'keyboard' string,
65
+ * the keyboard and screenreader focus is trapped; when set to 'screenreader'
66
+ * only the screenreader focus is trapped.
67
+ */
66
68
  shouldContainFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['keyboard', 'screenreader'])]),
69
+
70
+ /**
71
+ * When set to true the keyboard focus is returned to the active element
72
+ * before the focus region was activated.
73
+ */
67
74
  shouldReturnFocus: PropTypes.bool,
75
+
76
+ /**
77
+ * When set to true the `onDismiss` function is called on a click outside
78
+ * the focus region.
79
+ */
68
80
  shouldCloseOnDocumentClick: PropTypes.bool,
81
+
82
+ /**
83
+ * When set to true the `onDismiss` function is called on the `Escape`
84
+ * keypress
85
+ */
69
86
  shouldCloseOnEscape: PropTypes.bool,
87
+
88
+ /**
89
+ * When set to true, the `defaultFocusElement` is focused on initialization.
90
+ */
70
91
  shouldFocusOnOpen: PropTypes.bool,
71
92
 
72
93
  /**
package/lib/Dialog/index.js CHANGED
@@ -34,6 +34,7 @@ const _excluded = ["open", "contentElement"];
34
34
  category: components/utilities
35
35
  ---
36
36
  @module Dialog
37
+ @tsProps
37
38
  **/
38
39
  class Dialog extends _react.Component {
39
40
  constructor(...args) {
@@ -171,18 +172,12 @@ Dialog.componentId = 'Dialog';
171
172
  Dialog.propTypes = _props.propTypes;
172
173
  Dialog.allowedProps = _props.allowedProps;
173
174
  Dialog.defaultProps = {
174
- children: null,
175
175
  open: false,
176
176
  shouldFocusOnOpen: true,
177
177
  shouldContainFocus: false,
178
178
  shouldReturnFocus: false,
179
179
  shouldCloseOnDocumentClick: true,
180
- shouldCloseOnEscape: true,
181
- defaultFocusElement: void 0,
182
- contentElement: void 0,
183
- liveRegion: void 0,
184
- onBlur: event => {},
185
- onDismiss: event => {}
180
+ shouldCloseOnEscape: true
186
181
  };
187
182
  var _default = Dialog;
188
183
  exports.default = _default;
package/lib/Dialog/props.js CHANGED
@@ -32,51 +32,72 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
32
32
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
33
33
  * SOFTWARE.
34
34
  */
35
+ // JSDoc comments are here, because the doc app is not able to pick them up if
36
+ // they are in another package
35
37
  const propTypes = {
36
- /**
37
- * The children to be rendered within the `<Dialog />`
38
- */
39
38
  children: _propTypes.default.node,
40
-
41
- /**
42
- * The element to render as the component root, `span` by default
43
- */
44
39
  as: _propTypes.default.elementType,
45
40
  // eslint-disable-line react/require-default-props
46
41
  display: _propTypes.default.oneOf(['auto', 'block', 'inline-block']),
47
42
  label: _propTypes.default.string,
48
-
49
- /**
50
- * Whether or not the `<Dialog />` is open
51
- */
52
43
  open: _propTypes.default.bool,
53
44
 
54
45
  /**
55
- * Function called when tab focus leaves the `<Dialog />` focusable content. This only
46
+ * Function called when tab focus leaves the focusable content. This only
56
47
  * occurs when `shouldContainFocus` is set to false.
57
48
  */
58
49
  onBlur: _propTypes.default.func,
59
- onDismiss: _propTypes.default.func,
60
50
 
61
51
  /**
62
- * An element or a function returning an element to focus by default
52
+ * Function called when a focus region is dismissed. This can happen when
53
+ * the user presses the escape key and `shouldCloseOnEscape` is true or
54
+ * when an IFrame is clicked or when anything outside the focus region
55
+ * is clicked if `shouldCloseOnDocumentClick` is true.
56
+ * @param event The event triggered the dismissal
57
+ * @param documentClick Whether the dismissal was triggered by a mouse click.
63
58
  */
64
- defaultFocusElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
59
+ onDismiss: _propTypes.default.func,
65
60
 
66
61
  /**
67
- * An element or a function returning an element that wraps the content of the `<Dialog />`
62
+ * An element or a function returning an element to focus by default
68
63
  */
64
+ defaultFocusElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
69
65
  contentElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
70
66
 
71
67
  /**
72
68
  * An element, function returning an element, or array of elements that will not be hidden from
73
- * the screen reader when the `<Dialog />` is open
69
+ * the screen reader when the focus region is active
74
70
  */
75
71
  liveRegion: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element, _propTypes.default.func]),
72
+
73
+ /**
74
+ * When set to true or its an array that includes the 'keyboard' string,
75
+ * the keyboard and screenreader focus is trapped; when set to 'screenreader'
76
+ * only the screenreader focus is trapped.
77
+ */
76
78
  shouldContainFocus: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.oneOf(['keyboard', 'screenreader'])]),
79
+
80
+ /**
81
+ * When set to true the keyboard focus is returned to the active element
82
+ * before the focus region was activated.
83
+ */
77
84
  shouldReturnFocus: _propTypes.default.bool,
85
+
86
+ /**
87
+ * When set to true the `onDismiss` function is called on a click outside
88
+ * the focus region.
89
+ */
78
90
  shouldCloseOnDocumentClick: _propTypes.default.bool,
91
+
92
+ /**
93
+ * When set to true the `onDismiss` function is called on the `Escape`
94
+ * keypress
95
+ */
79
96
  shouldCloseOnEscape: _propTypes.default.bool,
97
+
98
+ /**
99
+ * When set to true, the `defaultFocusElement` is focused on initialization.
100
+ */
80
101
  shouldFocusOnOpen: _propTypes.default.bool,
81
102
 
82
103
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-dialog",
3
- "version": "8.12.1-snapshot.3+ff273fca9",
3
+ "version": "8.12.1-snapshot.32+ee1eeeb96",
4
4
  "description": "A utility component for managing keyboard accessibility and screen reader behavior",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -25,18 +25,18 @@
25
25
  "license": "MIT",
26
26
  "dependencies": {
27
27
  "@babel/runtime": "^7.13.10",
28
- "@instructure/shared-types": "8.12.1-snapshot.3+ff273fca9",
29
- "@instructure/ui-a11y-utils": "8.12.1-snapshot.3+ff273fca9",
30
- "@instructure/ui-dom-utils": "8.12.1-snapshot.3+ff273fca9",
31
- "@instructure/ui-react-utils": "8.12.1-snapshot.3+ff273fca9",
32
- "@instructure/ui-testable": "8.12.1-snapshot.3+ff273fca9",
28
+ "@instructure/shared-types": "8.12.1-snapshot.32+ee1eeeb96",
29
+ "@instructure/ui-a11y-utils": "8.12.1-snapshot.32+ee1eeeb96",
30
+ "@instructure/ui-dom-utils": "8.12.1-snapshot.32+ee1eeeb96",
31
+ "@instructure/ui-react-utils": "8.12.1-snapshot.32+ee1eeeb96",
32
+ "@instructure/ui-testable": "8.12.1-snapshot.32+ee1eeeb96",
33
33
  "prop-types": "^15"
34
34
  },
35
35
  "devDependencies": {
36
- "@instructure/console": "8.12.1-snapshot.3+ff273fca9",
37
- "@instructure/ui-babel-preset": "8.12.1-snapshot.3+ff273fca9",
38
- "@instructure/ui-prop-types": "8.12.1-snapshot.3+ff273fca9",
39
- "@instructure/ui-test-utils": "8.12.1-snapshot.3+ff273fca9"
36
+ "@instructure/console": "8.12.1-snapshot.32+ee1eeeb96",
37
+ "@instructure/ui-babel-preset": "8.12.1-snapshot.32+ee1eeeb96",
38
+ "@instructure/ui-prop-types": "8.12.1-snapshot.32+ee1eeeb96",
39
+ "@instructure/ui-test-utils": "8.12.1-snapshot.32+ee1eeeb96"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "react": ">=16.8 <=17"
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "sideEffects": false,
48
- "gitHead": "ff273fca985c08abf804c155bbd3a6a893a142c8"
48
+ "gitHead": "ee1eeeb96b9dd03d5fd1c3301e5d4df12ff5cce4"
49
49
  }
package/src/Dialog/index.tsx CHANGED
@@ -28,7 +28,7 @@ import { omitProps, getElementType } from '@instructure/ui-react-utils'
28
28
  import { findDOMNode, requestAnimationFrame } from '@instructure/ui-dom-utils'
29
29
  import type { RequestAnimationFrameType } from '@instructure/ui-dom-utils'
30
30
  import { logError as error } from '@instructure/console'
31
- import { FocusRegionManager } from '@instructure/ui-a11y-utils'
31
+ import { FocusRegion, FocusRegionManager } from '@instructure/ui-a11y-utils'
32
32
 
33
33
  import { propTypes, allowedProps } from './props'
34
34
  import type { DialogProps } from './props'
@@ -38,59 +38,48 @@ import type { DialogProps } from './props'
38
38
  category: components/utilities
39
39
  ---
40
40
  @module Dialog
41
+ @tsProps
41
42
  **/
42
-
43
43
  class Dialog extends Component<DialogProps> {
44
44
  static readonly componentId = 'Dialog'
45
45
 
46
46
  static propTypes = propTypes
47
47
  static allowedProps = allowedProps
48
48
  static defaultProps = {
49
- children: null,
50
49
  open: false,
51
50
  shouldFocusOnOpen: true,
52
51
  shouldContainFocus: false,
53
52
  shouldReturnFocus: false,
54
53
  shouldCloseOnDocumentClick: true,
55
- shouldCloseOnEscape: true,
56
- defaultFocusElement: undefined,
57
- contentElement: undefined,
58
- liveRegion: undefined,
59
- // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
60
- onBlur: (event) => {},
61
- // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
62
- onDismiss: (event) => {}
54
+ shouldCloseOnEscape: true
63
55
  } as const
64
56
 
65
57
  _timeouts: ReturnType<typeof setTimeout>[] = []
66
58
  _raf: RequestAnimationFrameType[] = []
67
- _focusRegion = null
59
+ private _focusRegion: FocusRegion | null = null
68
60
  ref: Element | null = null
61
+
69
62
  get _root() {
70
63
  console.warn(
71
64
  '_root property is deprecated and will be removed in v9, please use ref instead'
72
65
  )
73
-
74
66
  return this.ref
75
67
  }
68
+
76
69
  componentDidMount() {
77
70
  if (this.props.open) {
78
71
  this.open()
79
72
  }
80
73
  }
81
74
 
82
- // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'prevProps' implicitly has an 'any' type... Remove this comment to see the full error message
83
- componentDidUpdate(prevProps) {
75
+ componentDidUpdate(prevProps: DialogProps) {
84
76
  const { open } = this.props
85
-
86
77
  if (open && !prevProps.open) {
87
78
  this.open()
88
79
  } else if (!open && prevProps.open) {
89
80
  this.close()
90
81
  }
91
-
92
82
  if (this._focusRegion) {
93
- // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
94
83
  this._focusRegion.updateElement(this.contentElement)
95
84
  }
96
85
  }
@@ -99,7 +88,6 @@ class Dialog extends Component<DialogProps> {
99
88
  if (this.props.open) {
100
89
  this.close()
101
90
  }
102
-
103
91
  this._timeouts.forEach((timeout) => clearTimeout(timeout))
104
92
  this._timeouts = []
105
93
  this._raf.forEach((request) => request.cancel())
@@ -118,9 +106,8 @@ class Dialog extends Component<DialogProps> {
118
106
  // final position, making the page jump.
119
107
  this._timeouts.push(
120
108
  setTimeout(() => {
121
- // @ts-expect-error ts-migrate(2322) FIXME: Type 'FocusRegion' is not assignable to type 'null... Remove this comment to see the full error message
122
109
  this._focusRegion = FocusRegionManager.activateRegion(
123
- this.contentElement,
110
+ this.contentElement as Element,
124
111
  {
125
112
  ...options
126
113
  }
@@ -133,7 +120,6 @@ class Dialog extends Component<DialogProps> {
133
120
 
134
121
  close() {
135
122
  if (this._focusRegion) {
136
- // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
137
123
  FocusRegionManager.blurRegion(this.contentElement, this._focusRegion.id)
138
124
  }
139
125
  }
@@ -145,7 +131,6 @@ class Dialog extends Component<DialogProps> {
145
131
  }
146
132
 
147
133
  if (this._focusRegion) {
148
- // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
149
134
  FocusRegionManager.focusRegion(this.contentElement, this._focusRegion.id)
150
135
  }
151
136
  }
@@ -155,7 +140,6 @@ class Dialog extends Component<DialogProps> {
155
140
  error(false, "[Dialog] Can't blur a Dialog that isn't open.")
156
141
  return
157
142
  }
158
-
159
143
  this.close()
160
144
  }
161
145
 
@@ -171,19 +155,16 @@ class Dialog extends Component<DialogProps> {
171
155
 
172
156
  get contentElement() {
173
157
  let contentElement = findDOMNode(this.props.contentElement)
174
-
175
158
  if (!contentElement) {
176
159
  contentElement = findDOMNode(this.ref)
177
160
  }
178
-
179
- return contentElement
161
+ return contentElement as Element | Node
180
162
  }
181
163
 
182
164
  get focused() {
183
165
  return (
184
166
  this.contentElement &&
185
167
  this._focusRegion &&
186
- // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
187
168
  FocusRegionManager.isFocused(this.contentElement, this._focusRegion.id)
188
169
  )
189
170
  }
package/src/Dialog/props.ts CHANGED
@@ -28,30 +28,34 @@ import PropTypes from 'prop-types'
28
28
  import type {
29
29
  AsElementType,
30
30
  OtherHTMLAttributes,
31
- PropValidators
31
+ PropValidators,
32
+ UIElement
32
33
  } from '@instructure/shared-types'
34
+ import type { FocusRegionOptions } from '@instructure/ui-a11y-utils'
33
35
 
34
36
  type DialogOwnProps = {
37
+ /**
38
+ * The children to be rendered within the `<Dialog />`
39
+ */
35
40
  children?: React.ReactNode
41
+ /**
42
+ * The element to render as the component root, `span` by default
43
+ */
36
44
  as?: AsElementType
37
45
  display?: 'auto' | 'block' | 'inline-block'
46
+ /**
47
+ * The aria-label to read for screen reader.
48
+ */
38
49
  label?: string
50
+ /**
51
+ * Whether or not the `<Dialog />` is open
52
+ */
39
53
  open?: boolean
40
- onBlur?: (...args: any[]) => any
41
- onDismiss?: (...args: any[]) => any
42
- defaultFocusElement?: React.ReactElement | ((...args: any[]) => any)
43
- contentElement?: React.ReactElement | ((...args: any[]) => any)
44
- liveRegion?:
45
- | React.ReactElement[]
46
- | React.ReactElement
47
- | ((...args: any[]) => any)
48
- shouldContainFocus?: boolean | ('keyboard' | 'screenreader')
49
- shouldReturnFocus?: boolean
50
- shouldCloseOnDocumentClick?: boolean
51
- shouldCloseOnEscape?: boolean
52
- shouldFocusOnOpen?: boolean
53
- elementRef?: (element: Element | null) => void
54
- }
54
+ /**
55
+ * An element or a function returning an element that wraps the content of the `<Dialog />`
56
+ */
57
+ contentElement?: UIElement
58
+ } & FocusRegionOptions
55
59
 
56
60
  type PropKeys = keyof DialogOwnProps
57
61
 
@@ -59,60 +63,69 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
59
63
 
60
64
  type DialogProps = DialogOwnProps & OtherHTMLAttributes<DialogOwnProps>
61
65
 
66
+ // JSDoc comments are here, because the doc app is not able to pick them up if
67
+ // they are in another package
62
68
  const propTypes: PropValidators<PropKeys> = {
63
- /**
64
- * The children to be rendered within the `<Dialog />`
65
- */
66
69
  children: PropTypes.node,
67
-
68
- /**
69
- * The element to render as the component root, `span` by default
70
- */
71
70
  as: PropTypes.elementType, // eslint-disable-line react/require-default-props
72
-
73
71
  display: PropTypes.oneOf(['auto', 'block', 'inline-block']),
74
-
75
72
  label: PropTypes.string,
76
-
77
- /**
78
- * Whether or not the `<Dialog />` is open
79
- */
80
73
  open: PropTypes.bool,
81
-
82
74
  /**
83
- * Function called when tab focus leaves the `<Dialog />` focusable content. This only
75
+ * Function called when tab focus leaves the focusable content. This only
84
76
  * occurs when `shouldContainFocus` is set to false.
85
77
  */
86
78
  onBlur: PropTypes.func,
87
-
79
+ /**
80
+ * Function called when a focus region is dismissed. This can happen when
81
+ * the user presses the escape key and `shouldCloseOnEscape` is true or
82
+ * when an IFrame is clicked or when anything outside the focus region
83
+ * is clicked if `shouldCloseOnDocumentClick` is true.
84
+ * @param event The event triggered the dismissal
85
+ * @param documentClick Whether the dismissal was triggered by a mouse click.
86
+ */
88
87
  onDismiss: PropTypes.func,
89
-
90
88
  /**
91
89
  * An element or a function returning an element to focus by default
92
90
  */
93
91
  defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
94
-
95
- /**
96
- * An element or a function returning an element that wraps the content of the `<Dialog />`
97
- */
98
92
  contentElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
99
-
100
93
  /**
101
94
  * An element, function returning an element, or array of elements that will not be hidden from
102
- * the screen reader when the `<Dialog />` is open
95
+ * the screen reader when the focus region is active
103
96
  */
104
97
  liveRegion: PropTypes.oneOfType([
105
98
  PropTypes.arrayOf(PropTypes.element),
106
99
  PropTypes.element,
107
100
  PropTypes.func
108
101
  ]),
102
+ /**
103
+ * When set to true or its an array that includes the 'keyboard' string,
104
+ * the keyboard and screenreader focus is trapped; when set to 'screenreader'
105
+ * only the screenreader focus is trapped.
106
+ */
109
107
  shouldContainFocus: PropTypes.oneOfType([
110
108
  PropTypes.bool,
111
109
  PropTypes.oneOf(['keyboard', 'screenreader'])
112
110
  ]),
111
+ /**
112
+ * When set to true the keyboard focus is returned to the active element
113
+ * before the focus region was activated.
114
+ */
113
115
  shouldReturnFocus: PropTypes.bool,
116
+ /**
117
+ * When set to true the `onDismiss` function is called on a click outside
118
+ * the focus region.
119
+ */
114
120
  shouldCloseOnDocumentClick: PropTypes.bool,
121
+ /**
122
+ * When set to true the `onDismiss` function is called on the `Escape`
123
+ * keypress
124
+ */
115
125
  shouldCloseOnEscape: PropTypes.bool,
126
+ /**
127
+ * When set to true, the `defaultFocusElement` is focused on initialization.
128
+ */
116
129
  shouldFocusOnOpen: PropTypes.bool,
117
130
  /**
118
131
  * provides a reference to the underlying html root element
package/types/Dialog/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { Component } from 'react';
1
+ import { Component } from 'react';
2
2
  import type { RequestAnimationFrameType } from '@instructure/ui-dom-utils';
3
3
  import type { DialogProps } from './props';
4
4
  /**
@@ -6,74 +6,35 @@ import type { DialogProps } from './props';
6
6
  category: components/utilities
7
7
  ---
8
8
  @module Dialog
9
+ @tsProps
9
10
  **/
10
11
  declare class Dialog extends Component<DialogProps> {
11
12
  static readonly componentId = "Dialog";
12
- static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
13
- children?: React.ReactNode;
14
- as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
15
- display?: "auto" | "block" | "inline-block" | undefined;
16
- label?: string | undefined;
17
- open?: boolean | undefined;
18
- onBlur?: ((...args: any[]) => any) | undefined;
19
- onDismiss?: ((...args: any[]) => any) | undefined;
20
- defaultFocusElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((...args: any[]) => any) | undefined;
21
- contentElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((...args: any[]) => any) | undefined;
22
- liveRegion?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | ((...args: any[]) => any) | undefined;
23
- shouldContainFocus?: boolean | "keyboard" | "screenreader" | undefined;
24
- shouldReturnFocus?: boolean | undefined;
25
- shouldCloseOnDocumentClick?: boolean | undefined;
26
- shouldCloseOnEscape?: boolean | undefined;
27
- shouldFocusOnOpen?: boolean | undefined;
28
- elementRef?: ((element: Element | null) => void) | undefined;
29
- }>;
30
- static allowedProps: readonly (keyof {
31
- children?: React.ReactNode;
32
- as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
33
- display?: "auto" | "block" | "inline-block" | undefined;
34
- label?: string | undefined;
35
- open?: boolean | undefined;
36
- onBlur?: ((...args: any[]) => any) | undefined;
37
- onDismiss?: ((...args: any[]) => any) | undefined;
38
- defaultFocusElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((...args: any[]) => any) | undefined;
39
- contentElement?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((...args: any[]) => any) | undefined;
40
- liveRegion?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | ((...args: any[]) => any) | undefined;
41
- shouldContainFocus?: boolean | "keyboard" | "screenreader" | undefined;
42
- shouldReturnFocus?: boolean | undefined;
43
- shouldCloseOnDocumentClick?: boolean | undefined;
44
- shouldCloseOnEscape?: boolean | undefined;
45
- shouldFocusOnOpen?: boolean | undefined;
46
- elementRef?: ((element: Element | null) => void) | undefined;
47
- })[];
13
+ static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<"label" | "children" | "as" | "display" | "open" | "contentElement" | keyof import("@instructure/ui-a11y-utils").FocusRegionOptions>;
14
+ static allowedProps: readonly ("label" | "children" | "as" | "display" | "open" | "contentElement" | keyof import("@instructure/ui-a11y-utils").FocusRegionOptions)[];
48
15
  static defaultProps: {
49
- readonly children: null;
50
16
  readonly open: false;
51
17
  readonly shouldFocusOnOpen: true;
52
18
  readonly shouldContainFocus: false;
53
19
  readonly shouldReturnFocus: false;
54
20
  readonly shouldCloseOnDocumentClick: true;
55
21
  readonly shouldCloseOnEscape: true;
56
- readonly defaultFocusElement: undefined;
57
- readonly contentElement: undefined;
58
- readonly liveRegion: undefined;
59
- readonly onBlur: (event: any) => void;
60
- readonly onDismiss: (event: any) => void;
61
22
  };
62
23
  _timeouts: ReturnType<typeof setTimeout>[];
63
24
  _raf: RequestAnimationFrameType[];
64
- _focusRegion: null;
25
+ private _focusRegion;
65
26
  ref: Element | null;
66
27
  get _root(): Element | null;
67
28
  componentDidMount(): void;
68
- componentDidUpdate(prevProps: any): void;
29
+ componentDidUpdate(prevProps: DialogProps): void;
69
30
  componentWillUnmount(): void;
70
31
  open(): void;
71
32
  close(): void;
72
33
  focus(): void;
73
34
  blur(): void;
74
35
  getRef: (el: Element | null) => void;
75
- get contentElement(): Element | Node | Window | undefined;
76
- get focused(): null | undefined;
36
+ get contentElement(): Node | Element;
37
+ get focused(): boolean | null | undefined;
77
38
  render(): JSX.Element | null;
78
39
  }
79
40
  export default Dialog;
package/types/Dialog/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Dialog/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAK1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;;GAKG;AAEH,cAAM,MAAO,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,YAAW;IAEtC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;;;;;;MAeT;IAEV,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,EAAE,CAAK;IAC/C,IAAI,EAAE,yBAAyB,EAAE,CAAK;IACtC,YAAY,OAAO;IACnB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAC1B,IAAI,KAAK,mBAMR;IACD,iBAAiB;IAOjB,kBAAkB,CAAC,SAAS,KAAA;IAe5B,oBAAoB;IAWpB,IAAI;IAyBJ,KAAK;IAOL,KAAK;IAYL,IAAI;IASJ,MAAM,OAAQ,OAAO,GAAG,IAAI,UAQ3B;IAED,IAAI,cAAc,wCAQjB;IAED,IAAI,OAAO,qBAOV;IAED,MAAM;CAmBP;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Dialog/index.tsx"],"names":[],"mappings":"AAwBA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAK1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;;;GAMG;AACH,cAAM,MAAO,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,YAAW;IAEtC,MAAM,CAAC,SAAS,6MAAY;IAC5B,MAAM,CAAC,YAAY,mJAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;MAOT;IAEV,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,EAAE,CAAK;IAC/C,IAAI,EAAE,yBAAyB,EAAE,CAAK;IACtC,OAAO,CAAC,YAAY,CAA2B;IAC/C,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,IAAI,KAAK,mBAKR;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,EAAE,WAAW;IAYzC,oBAAoB;IAUpB,IAAI;IAwBJ,KAAK;IAML,KAAK;IAWL,IAAI;IAQJ,MAAM,OAAQ,OAAO,GAAG,IAAI,UAQ3B;IAED,IAAI,cAAc,mBAMjB;IAED,IAAI,OAAO,+BAMV;IAED,MAAM;CAmBP;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}
package/types/Dialog/props.d.ts CHANGED
@@ -1,23 +1,29 @@
1
1
  import React from 'react';
2
- import type { AsElementType, OtherHTMLAttributes, PropValidators } from '@instructure/shared-types';
2
+ import type { AsElementType, OtherHTMLAttributes, PropValidators, UIElement } from '@instructure/shared-types';
3
+ import type { FocusRegionOptions } from '@instructure/ui-a11y-utils';
3
4
  declare type DialogOwnProps = {
5
+ /**
6
+ * The children to be rendered within the `<Dialog />`
7
+ */
4
8
  children?: React.ReactNode;
9
+ /**
10
+ * The element to render as the component root, `span` by default
11
+ */
5
12
  as?: AsElementType;
6
13
  display?: 'auto' | 'block' | 'inline-block';
14
+ /**
15
+ * The aria-label to read for screen reader.
16
+ */
7
17
  label?: string;
18
+ /**
19
+ * Whether or not the `<Dialog />` is open
20
+ */
8
21
  open?: boolean;
9
- onBlur?: (...args: any[]) => any;
10
- onDismiss?: (...args: any[]) => any;
11
- defaultFocusElement?: React.ReactElement | ((...args: any[]) => any);
12
- contentElement?: React.ReactElement | ((...args: any[]) => any);
13
- liveRegion?: React.ReactElement[] | React.ReactElement | ((...args: any[]) => any);
14
- shouldContainFocus?: boolean | ('keyboard' | 'screenreader');
15
- shouldReturnFocus?: boolean;
16
- shouldCloseOnDocumentClick?: boolean;
17
- shouldCloseOnEscape?: boolean;
18
- shouldFocusOnOpen?: boolean;
19
- elementRef?: (element: Element | null) => void;
20
- };
22
+ /**
23
+ * An element or a function returning an element that wraps the content of the `<Dialog />`
24
+ */
25
+ contentElement?: UIElement;
26
+ } & FocusRegionOptions;
21
27
  declare type PropKeys = keyof DialogOwnProps;
22
28
  declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
23
29
  declare type DialogProps = DialogOwnProps & OtherHTMLAttributes<DialogOwnProps>;
package/types/Dialog/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Dialog/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EACV,aAAa,EACb,mBAAmB,EACnB,cAAc,EACf,MAAM,2BAA2B,CAAA;AAElC,aAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,CAAA;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAChC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,mBAAmB,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACpE,cAAc,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC/D,UAAU,CAAC,EACP,KAAK,CAAC,YAAY,EAAE,GACpB,KAAK,CAAC,YAAY,GAClB,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC7B,kBAAkB,CAAC,EAAE,OAAO,GAAG,CAAC,UAAU,GAAG,cAAc,CAAC,CAAA;IAC5D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,cAAc,CAAA;AAEpC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,WAAW,GAAG,cAAc,GAAG,mBAAmB,CAAC,cAAc,CAAC,CAAA;AAEvE,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA2DvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAiBnB,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Dialog/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EACV,aAAa,EACb,mBAAmB,EACnB,cAAc,EACd,SAAS,EACV,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAEpE,aAAK,cAAc,GAAG;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,CAAA;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAA;CAC3B,GAAG,kBAAkB,CAAA;AAEtB,aAAK,QAAQ,GAAG,MAAM,cAAc,CAAA;AAEpC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,WAAW,GAAG,cAAc,GAAG,mBAAmB,CAAC,cAAc,CAAC,CAAA;AAIvE,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAkEvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAiBnB,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}