@procore/core-react 11.12.1 → 11.13.0-rc.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.
- package/dist/Breadcrumbs/Breadcrumbs.js +7 -5
- package/dist/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/Form/Form.js +12 -5
- package/dist/Form/Form.js.map +1 -1
- package/dist/Form/Form.types.d.ts +1 -0
- package/dist/Modal/Modal.d.ts +3 -1
- package/dist/Modal/Modal.js +72 -19
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/Modal/Modal.types.d.ts +59 -3
- package/dist/OverlayTrigger/OverlayTrigger.d.ts +6 -6
- package/dist/OverlayTrigger/OverlayTrigger.js +43 -32
- package/dist/OverlayTrigger/OverlayTrigger.js.map +1 -1
- package/dist/OverlayTrigger/OverlayTrigger.types.d.ts +15 -7
- package/dist/OverlayTrigger/a11yPresets.d.ts +202 -1
- package/dist/OverlayTrigger/a11yPresets.js +210 -0
- package/dist/OverlayTrigger/a11yPresets.js.map +1 -1
- package/dist/Popover/Popover.d.ts +24 -2
- package/dist/Popover/Popover.js +6 -4
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/Popover/Popover.types.d.ts +15 -2
- package/dist/Portal/Portal.d.ts +1 -1
- package/dist/Portal/Portal.js +24 -2
- package/dist/Portal/Portal.js.map +1 -1
- package/dist/Section/Section.d.ts +4 -0
- package/dist/Section/Section.js +12 -6
- package/dist/Section/Section.js.map +1 -1
- package/dist/Semantic/Semantic.d.ts +8 -0
- package/dist/Semantic/Semantic.js +28 -0
- package/dist/Semantic/Semantic.js.map +1 -1
- package/dist/Semantic/Semantic.types.d.ts +1 -1
- package/dist/Tearsheet/Tearsheet.d.ts +7 -1
- package/dist/Tearsheet/Tearsheet.js +32 -19
- package/dist/Tearsheet/Tearsheet.js.map +1 -1
- package/dist/Tearsheet/Tearsheet.types.d.ts +24 -0
- package/dist/_hooks/I18n.d.ts +1 -0
- package/dist/_locales/en.json +2 -1
- package/dist/_typedoc/Avatar/Avatar.types.json +28 -28
- package/dist/_typedoc/AvatarStack/AvatarStack.types.json +22 -22
- package/dist/_typedoc/Badge/Badge.types.json +10 -10
- package/dist/_typedoc/Banner/Banner.types.json +19 -19
- package/dist/_typedoc/Box/Box.types.json +70 -70
- package/dist/_typedoc/Breadcrumbs/Breadcrumbs.types.json +14 -14
- package/dist/_typedoc/Button/Button.types.json +11 -11
- package/dist/_typedoc/Calendar/Calendar.types.json +98 -98
- package/dist/_typedoc/Card/Card.types.json +8 -8
- package/dist/_typedoc/Checkbox/Checkbox.types.json +7 -7
- package/dist/_typedoc/ContactItem/ContactItem.types.json +11 -11
- package/dist/_typedoc/DateInput/DateInput.types.json +37 -37
- package/dist/_typedoc/DateSelect/DateSelect.types.json +13 -13
- package/dist/_typedoc/DetailPage/DetailPage.types.json +6 -6
- package/dist/_typedoc/Dropdown/Dropdown.types.json +37 -37
- package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +31 -31
- package/dist/_typedoc/Dropzone/Dropzone.types.json +41 -41
- package/dist/_typedoc/EmptyState/EmptyState.types.json +22 -22
- package/dist/_typedoc/FileList/FileList.types.json +9 -9
- package/dist/_typedoc/FileSelect/FileSelect.types.json +26 -26
- package/dist/_typedoc/FileSelect/GridSource/GridSource.types.json +20 -20
- package/dist/_typedoc/FileSelect/LocalSource/LocalSource.types.json +14 -14
- package/dist/_typedoc/FileSelect/TreeSource/TreeSource.types.json +9 -9
- package/dist/_typedoc/Flex/Flex.types.json +29 -29
- package/dist/_typedoc/FlexList/FlexList.types.json +32 -32
- package/dist/_typedoc/Form/Form.types.json +700 -700
- package/dist/_typedoc/Grid/Grid.types.json +8 -8
- package/dist/_typedoc/GroupSelect/GroupSelect.types.json +54 -54
- package/dist/_typedoc/Input/Input.types.json +2 -2
- package/dist/_typedoc/Link/Link.types.json +6 -6
- package/dist/_typedoc/ListPage/ListPage.types.json +19 -19
- package/dist/_typedoc/Menu/Menu.types.json +68 -68
- package/dist/_typedoc/MenuImperative/MenuImperative.types.json +75 -75
- package/dist/_typedoc/Modal/Modal.types.json +213 -70
- package/dist/_typedoc/MultiSelect/MultiSelect.types.json +31 -31
- package/dist/_typedoc/Notation/Notation.types.json +6 -6
- package/dist/_typedoc/NumberInput/NumberInput.types.json +38 -38
- package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +76 -34
- package/dist/_typedoc/PageLayout/PageLayout.types.json +32 -32
- package/dist/_typedoc/Pagination/Pagination.types.json +9 -9
- package/dist/_typedoc/Panel/Panel.types.json +29 -29
- package/dist/_typedoc/Pill/Pill.types.json +1 -1
- package/dist/_typedoc/PillSelect/PillSelect.types.json +46 -46
- package/dist/_typedoc/Popover/Popover.types.json +60 -38
- package/dist/_typedoc/ProgressBar/ProgressBar.types.json +8 -8
- package/dist/_typedoc/RadioButton/RadioButton.types.json +8 -8
- package/dist/_typedoc/Required/Required.types.json +5 -5
- package/dist/_typedoc/Search/Search.types.json +18 -18
- package/dist/_typedoc/Section/Section.types.json +16 -16
- package/dist/_typedoc/SegmentedController/SegmentedController.types.json +26 -26
- package/dist/_typedoc/Select/Select.types.json +32 -32
- package/dist/_typedoc/Slider/Slider.types.json +6 -6
- package/dist/_typedoc/Spinner/Spinner.types.json +11 -11
- package/dist/_typedoc/Switch/Switch.types.json +5 -5
- package/dist/_typedoc/Table/Table.types.json +116 -116
- package/dist/_typedoc/Tabs/Tabs.types.json +21 -21
- package/dist/_typedoc/Tearsheet/Tearsheet.types.json +70 -10
- package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
- package/dist/_typedoc/TextEditor/TextEditor.types.json +9 -9
- package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +3 -3
- package/dist/_typedoc/Thumbnail/Thumbnail.types.json +21 -21
- package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +42 -42
- package/dist/_typedoc/TieredSelect/TieredSelect.types.json +28 -28
- package/dist/_typedoc/Tile/Tile.types.json +42 -42
- package/dist/_typedoc/Toast/Toast.types.json +6 -6
- package/dist/_typedoc/ToggleButton/ToggleButton.types.json +3 -3
- package/dist/_typedoc/Token/Token.types.json +4 -4
- package/dist/_typedoc/ToolHeader/ToolHeader.types.json +14 -14
- package/dist/_typedoc/Tooltip/Tooltip.types.json +17 -17
- package/dist/_typedoc/Tree/Tree.types.json +88 -88
- package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
- package/dist/_typedoc/Typography/Typography.types.json +8 -8
- package/dist/_typedoc/_utils/types.json +5 -5
- package/dist/_utils/polymorphic.d.ts +4 -4
- package/dist/_utils/types.d.ts +0 -3
- package/package.json +3 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Placement } from '../_utils/placement';
|
|
3
|
-
import { OverlayTriggerProps
|
|
3
|
+
import { OverlayTriggerProps } from './OverlayTrigger.types';
|
|
4
4
|
/**
|
|
5
5
|
|
|
6
6
|
@since 10.19.0
|
|
@@ -18,18 +18,18 @@ export declare function useOverlayTriggerContext(): {
|
|
|
18
18
|
toggle: (event: any) => any;
|
|
19
19
|
};
|
|
20
20
|
interface TriggerOverlayProps {
|
|
21
|
+
containFocus?: boolean;
|
|
22
|
+
autoFocus?: boolean;
|
|
23
|
+
restoreFocus?: boolean;
|
|
21
24
|
placement: Placement;
|
|
22
25
|
canFlip?: boolean;
|
|
23
26
|
arrow?: boolean;
|
|
24
27
|
padding: number;
|
|
25
28
|
shrinkOverlay: boolean;
|
|
26
29
|
overlay: React.ReactNode;
|
|
30
|
+
overlayCloneProps: any;
|
|
31
|
+
wrapperProps: Record<string, unknown>;
|
|
27
32
|
referenceElement: HTMLElement | null;
|
|
28
|
-
role?: OverlayTriggerRole;
|
|
29
|
-
overlayId: string;
|
|
30
|
-
autoFocus?: boolean;
|
|
31
|
-
containFocus?: boolean;
|
|
32
|
-
passA11yPropsToOverlay: boolean;
|
|
33
33
|
}
|
|
34
34
|
export declare const TriggerOverlay: React.ForwardRefExoticComponent<TriggerOverlayProps & React.RefAttributes<HTMLElement>>;
|
|
35
35
|
export {};
|
|
@@ -32,7 +32,7 @@ import { DelayedToggleContext, useDelayedToggle, useDelayedToggleContext, } from
|
|
|
32
32
|
import { Trigger, useTrigger } from '../_hooks/Trigger';
|
|
33
33
|
import { useVisibility } from '../_hooks/Visibility';
|
|
34
34
|
import { mergeRefs } from '../_utils/mergeRefs';
|
|
35
|
-
import {
|
|
35
|
+
import { useOverlayTriggerA11y } from './a11yPresets';
|
|
36
36
|
if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.ResizeObserver)) {
|
|
37
37
|
globalThis.ResizeObserver = ResizeObserverPolyfill;
|
|
38
38
|
}
|
|
@@ -52,19 +52,24 @@ var ClickOutside = function (_a) {
|
|
|
52
52
|
|
|
53
53
|
*/
|
|
54
54
|
export var OverlayTrigger = React.forwardRef(function OverlayTrigger(_a, ref) {
|
|
55
|
-
var _b;
|
|
56
|
-
|
|
57
|
-
_p = _a.
|
|
58
|
-
|
|
59
|
-
|
|
55
|
+
var _b = _a.afterHide, afterHide = _b === void 0 ? function () { } : _b, _c = _a.afterShow, afterShow = _c === void 0 ? function () { } : _c, ariaDescribedby = _a["aria-describedby"], ariaDetails = _a["aria-details"], ariaLabelledby = _a["aria-labelledby"], ariaLabel = _a["aria-label"], autoFocus = _a.autoFocus, _d = _a.beforeHide, beforeHide = _d === void 0 ? function () { return true; } : _d, _e = _a.beforeShow, beforeShow = _e === void 0 ? function () { return true; } : _e, _f = _a.canFlip, canFlip = _f === void 0 ? true : _f, children = _a.children, _g = _a.clickOutsideIgnoreRefs, clickOutsideIgnoreRefs = _g === void 0 ? [] : _g, containFocus = _a.containFocus, _h = _a.hideDelay, hideDelay = _h === void 0 ? 100 : _h, hideKeys_ = _a.hideKeys, _j = _a.initialIsVisible, initialIsVisible = _j === void 0 ? false : _j, overlay = _a.overlay, _k = _a.padding, padding = _k === void 0 ? 2 : _k, _l = _a.placement, placement = _l === void 0 ? 'top' : _l, _m = _a.restoreFocusOnHide, restoreFocusOnHide = _m === void 0 ? true : _m, // TODO: change default to be false, but that is a breaking change
|
|
56
|
+
_o = _a.showDelay, // TODO: change default to be false, but that is a breaking change
|
|
57
|
+
showDelay = _o === void 0 ? 0 : _o, _p = _a.showKeys, showKeys = _p === void 0 ? ['ArrowDown', 'Down'] : _p, _q = _a.shrinkOverlay, shrinkOverlay = _q === void 0 ? false : _q, _r = _a.trigger, trigger = _r === void 0 ? 'click' : _r, _s = _a.arrow, arrow = _s === void 0 ? false : _s, overlayApiRef = _a.overlayRef, role = _a.role, _t = _a.passA11yPropsToOverlay, passA11yPropsToOverlay = _t === void 0 ? false : _t;
|
|
58
|
+
var isDialogRole = role === 'dialog';
|
|
59
|
+
if (isDialogRole && (trigger === 'hover' || (trigger === null || trigger === void 0 ? void 0 : trigger.includes('hover')))) {
|
|
60
|
+
console.warn("@procore/core-react: OverlayTigger has role ".concat(role, " and a hover trigger, this may cause weird focus management and is unrecommended. Review autoFocus prop."));
|
|
61
|
+
}
|
|
60
62
|
var hideKeys = hideKeys_ !== null && hideKeys_ !== void 0 ? hideKeys_ : {
|
|
61
|
-
|
|
63
|
+
// Note by default OverlayTrigger closes on tab. Dialog role changes the default.
|
|
64
|
+
overlay: (containFocus !== null && containFocus !== void 0 ? containFocus : isDialogRole)
|
|
65
|
+
? ['Escape', 'Esc']
|
|
66
|
+
: ['Escape', 'Esc', 'Tab'],
|
|
62
67
|
target: ['Escape', 'Esc'],
|
|
63
68
|
};
|
|
64
69
|
var innerTriggerElRef = React.useRef(null);
|
|
65
70
|
var triggerElRef = ref || innerTriggerElRef;
|
|
66
71
|
var overlayElRef = React.useRef(null);
|
|
67
|
-
var
|
|
72
|
+
var _u = React.useState(null), referenceElement = _u[0], setReferenceElement = _u[1];
|
|
68
73
|
var clickedOutsideRef = React.useRef(true);
|
|
69
74
|
var visibility = useVisibility({
|
|
70
75
|
afterHide: afterHide,
|
|
@@ -84,6 +89,7 @@ export var OverlayTrigger = React.forwardRef(function OverlayTrigger(_a, ref) {
|
|
|
84
89
|
visibility.show();
|
|
85
90
|
}
|
|
86
91
|
}, [triggers, visibility.isVisible]);
|
|
92
|
+
// TODO delete in a separate branch for testing and rely only on FocusScope
|
|
87
93
|
React.useEffect(function () {
|
|
88
94
|
if (restoreFocusOnHide &&
|
|
89
95
|
!visibility.isVisible &&
|
|
@@ -110,18 +116,25 @@ export var OverlayTrigger = React.forwardRef(function OverlayTrigger(_a, ref) {
|
|
|
110
116
|
trigger: trigger,
|
|
111
117
|
triggerRef: triggerElRef,
|
|
112
118
|
});
|
|
113
|
-
var overlayId = useId();
|
|
114
119
|
var triggerElement = typeof children === 'function'
|
|
115
120
|
? children(triggerApi)
|
|
116
121
|
: children;
|
|
117
|
-
var
|
|
118
|
-
|
|
122
|
+
var overlayId = useId();
|
|
123
|
+
var _v = useOverlayTriggerA11y({
|
|
124
|
+
canPropOverlayUp: React.isValidElement(overlay) && passA11yPropsToOverlay,
|
|
125
|
+
'aria-describedby': ariaDescribedby,
|
|
126
|
+
'aria-details': ariaDetails,
|
|
127
|
+
'aria-labelledby': ariaLabelledby,
|
|
128
|
+
'aria-label': ariaLabel,
|
|
129
|
+
id: overlayId,
|
|
130
|
+
isOpen: visibility.isVisible,
|
|
119
131
|
role: role,
|
|
120
|
-
|
|
121
|
-
|
|
132
|
+
}), wrapperProps = _v.wrapperProps, overlayProps = _v.overlayProps, portalProps = _v.portalProps, triggerProps = _v.triggerProps, focusScopeProps = _v.focusScopeProps,
|
|
133
|
+
// Does not use. User needs to wire up when using dialog role!
|
|
134
|
+
labelProps = _v.labelProps;
|
|
122
135
|
var wrappedTriggerElement = React.cloneElement(triggerElement, __assign({ open: triggerApi.isVisible, ref: triggerElement.ref
|
|
123
136
|
? mergeRefs(triggerElement.ref, triggerElRef, setReferenceElement)
|
|
124
|
-
: mergeRefs(triggerElRef, setReferenceElement) },
|
|
137
|
+
: mergeRefs(triggerElRef, setReferenceElement) }, triggerProps));
|
|
125
138
|
React.useEffect(function () {
|
|
126
139
|
var targetErrors = [
|
|
127
140
|
'ResizeObserver loop completed with undelivered notifications.',
|
|
@@ -149,7 +162,7 @@ export var OverlayTrigger = React.forwardRef(function OverlayTrigger(_a, ref) {
|
|
|
149
162
|
},
|
|
150
163
|
refs: __spreadArray([overlayElRef, triggerElRef], clickOutsideIgnoreRefs, true),
|
|
151
164
|
})),
|
|
152
|
-
React.createElement(Portal,
|
|
165
|
+
React.createElement(Portal, __assign({}, portalProps),
|
|
153
166
|
React.createElement(Trigger, __assign({}, {
|
|
154
167
|
isEnabled: visibility.isVisible,
|
|
155
168
|
enable: delayedToggle.enable,
|
|
@@ -158,7 +171,9 @@ export var OverlayTrigger = React.forwardRef(function OverlayTrigger(_a, ref) {
|
|
|
158
171
|
trigger: trigger === 'click' ? 'none' : trigger,
|
|
159
172
|
triggerRef: overlayElRef,
|
|
160
173
|
}),
|
|
161
|
-
React.createElement(TriggerOverlay, {
|
|
174
|
+
React.createElement(TriggerOverlay, { autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : focusScopeProps.autoFocus, containFocus: containFocus !== null && containFocus !== void 0 ? containFocus : focusScopeProps.contain,
|
|
175
|
+
// TODO add restoreFocusOnHide ?? when inhouse hook removed
|
|
176
|
+
restoreFocus: focusScopeProps.restoreFocus, ref: overlayElRef, referenceElement: referenceElement, overlay: overlay, shrinkOverlay: shrinkOverlay, placement: placement, padding: padding, canFlip: canFlip, arrow: arrow, wrapperProps: wrapperProps, overlayCloneProps: overlayProps })))))));
|
|
162
177
|
});
|
|
163
178
|
export function CloseOnFocus(_a) {
|
|
164
179
|
var hide = _a.hide;
|
|
@@ -182,8 +197,7 @@ export function useOverlayTriggerContext() {
|
|
|
182
197
|
};
|
|
183
198
|
}
|
|
184
199
|
export var TriggerOverlay = React.forwardRef(function (_a, ref) {
|
|
185
|
-
var
|
|
186
|
-
var placement = _a.placement, canFlip = _a.canFlip, arrow = _a.arrow, padding = _a.padding, shrinkOverlay = _a.shrinkOverlay, overlay = _a.overlay, referenceElement = _a.referenceElement, role = _a.role, overlayId = _a.overlayId, autoFocus = _a.autoFocus, containFocus = _a.containFocus, passA11yPropsToOverlay = _a.passA11yPropsToOverlay;
|
|
200
|
+
var autoFocus = _a.autoFocus, containFocus = _a.containFocus, restoreFocus = _a.restoreFocus, placement = _a.placement, canFlip = _a.canFlip, arrow = _a.arrow, padding = _a.padding, shrinkOverlay = _a.shrinkOverlay, overlay = _a.overlay, referenceElement = _a.referenceElement, wrapperProps = _a.wrapperProps, overlayCloneProps = _a.overlayCloneProps;
|
|
187
201
|
var arrowRef = React.useRef(null);
|
|
188
202
|
var arrowPadding = arrowSize / 2 + 1;
|
|
189
203
|
var middleware = [
|
|
@@ -205,25 +219,22 @@ export var TriggerOverlay = React.forwardRef(function (_a, ref) {
|
|
|
205
219
|
padding: 6,
|
|
206
220
|
}),
|
|
207
221
|
].filter(function (middleware) { return middleware !== null; });
|
|
208
|
-
var
|
|
222
|
+
var _b = useOverlay({
|
|
209
223
|
middleware: middleware,
|
|
210
224
|
placement: placement,
|
|
211
|
-
}), overlayStyle =
|
|
225
|
+
}), overlayStyle = _b.overlayStyle, referenceRefCallback = _b.referenceRef, overlayRef = _b.overlayRef, middlewareData = _b.middlewareData, currentPlacement = _b.placement;
|
|
212
226
|
React.useEffect(function () {
|
|
213
227
|
referenceRefCallback(referenceElement);
|
|
214
228
|
}, [referenceElement, referenceRefCallback]);
|
|
215
|
-
var
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
React.createElement("div", __assign({ "data-qa": "core-overlay-trigger-overlay-wrapper", ref: mergeRefs(ref, overlayRef), style: overlayStyle }, overlayWrapperA11yProps),
|
|
225
|
-
canPropOverlayUp
|
|
226
|
-
? React.cloneElement(overlay, overlayElementA11yProps)
|
|
229
|
+
var mergedRefs = mergeRefs(ref, overlayRef);
|
|
230
|
+
// TODO could just move clone and clone props to parent
|
|
231
|
+
if (!React.isValidElement(overlay) && overlayCloneProps) {
|
|
232
|
+
console.warn('PLEASE REPORT ISSUE @procore/core-react: OverlayTrigger TriggerOverlay is not a valid React element but wants to clone "overlay" with props. Cannot pass props to the element.');
|
|
233
|
+
}
|
|
234
|
+
return (React.createElement(FocusScope, { autoFocus: autoFocus, contain: containFocus, restoreFocus: restoreFocus },
|
|
235
|
+
React.createElement("div", __assign({ "data-qa": "core-overlay-trigger-overlay-wrapper", ref: mergedRefs, style: overlayStyle }, wrapperProps),
|
|
236
|
+
React.isValidElement(overlay)
|
|
237
|
+
? React.cloneElement(overlay, overlayCloneProps)
|
|
227
238
|
: overlay,
|
|
228
239
|
arrow && (React.createElement(Arrow, { ref: arrowRef, arrow: middlewareData.arrow, placement: currentPlacement })))));
|
|
229
240
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayTrigger.js","sourceRoot":"","sources":["../../src/OverlayTrigger/OverlayTrigger.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EACL,KAAK,IAAI,aAAa,EACtB,IAAI,IAAI,YAAY,EACpB,UAAU,EACV,MAAM,IAAI,cAAc,EACxB,KAAK,IAAI,aAAa,EACtB,IAAI,IAAI,YAAY,GACrB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,sBAAsB,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,EAAqB,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAsB,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAE,OAAO,EAAc,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAG/C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"OverlayTrigger.js","sourceRoot":"","sources":["../../src/OverlayTrigger/OverlayTrigger.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EACL,KAAK,IAAI,aAAa,EACtB,IAAI,IAAI,YAAY,EACpB,UAAU,EACV,MAAM,IAAI,cAAc,EACxB,KAAK,IAAI,aAAa,EACtB,IAAI,IAAI,YAAY,GACrB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,sBAAsB,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,EAAqB,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAsB,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAE,OAAO,EAAc,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAG/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAMrD,IAAI,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,cAAc,CAAA,EAAE;IAC/B,UAAU,CAAC,cAAc,GAAG,sBAAsB,CAAA;CACnD;AAED,IAAM,YAAY,GAAG,UAAC,EAA4C;QAA1C,cAAc,oBAAA,EAAE,IAAI,UAAA;IAC1C,eAAe,CAAC;QACd,cAAc,gBAAA;QACd,IAAI,MAAA;KACL,CAAC,CAAA;IAEF,OAAO,yCAAK,CAAA;AACd,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,SAAS,cAAc,CACvB,EA6BC,EACD,GAAG;QA7BD,iBAAoB,EAApB,SAAS,mBAAG,cAAO,CAAC,KAAA,EACpB,iBAAoB,EAApB,SAAS,mBAAG,cAAO,CAAC,KAAA,EACE,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACR,cAAc,wBAAA,EACnB,SAAS,mBAAA,EACzB,SAAS,eAAA,EACT,kBAAuB,EAAvB,UAAU,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA,EACvB,kBAAuB,EAAvB,UAAU,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA,EACvB,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,QAAQ,cAAA,EACR,8BAA2B,EAA3B,sBAAsB,mBAAG,EAAE,KAAA,EAC3B,YAAY,kBAAA,EACZ,iBAAe,EAAf,SAAS,mBAAG,GAAG,KAAA,EACL,SAAS,cAAA,EACnB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,OAAO,aAAA,EACP,eAAW,EAAX,OAAO,mBAAG,CAAC,KAAA,EACX,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,0BAAyB,EAAzB,kBAAkB,mBAAG,IAAI,KAAA,EAAE,kEAAkE;IAC7F,iBAAa,EADc,kEAAkE;IAC7F,SAAS,mBAAG,CAAC,KAAA,EACb,gBAAgC,EAAhC,QAAQ,mBAAG,CAAC,WAAW,EAAE,MAAM,CAAC,KAAA,EAChC,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,eAAiB,EAAjB,OAAO,mBAAG,OAAO,KAAA,EACjB,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACD,aAAa,gBAAA,EACzB,IAAI,UAAA,EACJ,8BAA8B,EAA9B,sBAAsB,mBAAG,KAAK,KAAA;IAIhC,IAAM,YAAY,GAAG,IAAI,KAAK,QAAQ,CAAA;IAEtC,IAAI,YAAY,IAAI,CAAC,OAAO,KAAK,OAAO,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,OAAO,CAAC,CAAA,CAAC,EAAE;QACvE,OAAO,CAAC,IAAI,CACV,sDAA+C,IAAI,6GAA0G,CAC9J,CAAA;KACF;IAED,IAAM,QAAQ,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI;QAC5B,iFAAiF;QACjF,OAAO,EACL,CAAA,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,YAAY;YAC1B,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC;YACnB,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC;QAC9B,MAAM,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC;KAC1B,CAAA;IAED,IAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAA;IACzD,IAAM,YAAY,GACf,GAAoC,IAAI,iBAAiB,CAAA;IAC5D,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAA;IAC9C,IAAA,KACJ,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,EADnC,gBAAgB,QAAA,EAAE,mBAAmB,QACF,CAAA;IAC1C,IAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAE5C,IAAM,UAAU,GAAG,aAAa,CAAC;QAC/B,SAAS,WAAA;QACT,SAAS,WAAA;QACT,gBAAgB,kBAAA;KACjB,CAAC,CAAA;IAEF,KAAK,CAAC,mBAAmB,CAAC,aAAa,EAAE,cAAM,OAAA,CAAC;QAC9C,IAAI,EAAE,UAAU,CAAC,IAAI;QACrB,IAAI,EAAE,UAAU,CAAC,IAAI;KACtB,CAAC,EAH6C,CAG7C,CAAC,CAAA;IAEH,IAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAC5B,cAAM,OAAA,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAA9C,CAA8C,EACpD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,SAAS,EAAE;YACzD,UAAU,CAAC,IAAI,EAAE,CAAA;SAClB;QACD,IAAI,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE;YAC5D,UAAU,CAAC,IAAI,EAAE,CAAA;SAClB;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAA;IAEpC,2EAA2E;IAC3E,KAAK,CAAC,SAAS,CAAC;QACd,IACE,kBAAkB;YAClB,CAAC,UAAU,CAAC,SAAS;YACrB,CAAC,iBAAiB,CAAC,OAAO,EAC1B;YACA,YAAY,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;SACrD;QAED,iBAAiB,CAAC,OAAO,GAAG,KAAK,CAAA;IACnC,CAAC,EAAE,CAAC,kBAAkB,EAAE,YAAY,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAA;IAE5D,IAAM,aAAa,GAAG,gBAAgB,CAAC;QACrC,aAAa,EAAE,UAAU;QACzB,YAAY,EAAE,UAAU;QACxB,YAAY,EAAE,SAAS;QACvB,WAAW,EAAE,SAAS;QACtB,SAAS,EAAE,UAAU,CAAC,SAAS;QAC/B,SAAS,EAAE,UAAU,CAAC,IAAI;QAC1B,QAAQ,EAAE,UAAU,CAAC,IAAI;KAC1B,CAAC,CAAA;IAEF,IAAM,UAAU,GAAG,UAAU,CAAC;QAC5B,SAAS,EAAE,UAAU,CAAC,SAAS;QAC/B,MAAM,EAAE,aAAa,CAAC,MAAM;QAC5B,OAAO,EAAE,aAAa,CAAC,OAAO;QAC9B,UAAU,EAAE,QAAQ;QACpB,WAAW,EAAE,QAAQ,CAAC,MAAM;QAC5B,OAAO,SAAA;QACP,UAAU,EAAE,YAAY;KACzB,CAAC,CAAA;IAEF,IAAM,cAAc,GAClB,OAAO,QAAQ,KAAK,UAAU;QAC5B,CAAC,CAAE,QAAuD,CAAC,UAAU,CAAC;QACtE,CAAC,CAAE,QAAgC,CAAA;IAEvC,IAAM,SAAS,GAAG,KAAK,EAAE,CAAA;IAEnB,IAAA,KAQF,qBAAqB,CAAC;QACxB,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,sBAAsB;QACzE,kBAAkB,EAAE,eAAe;QACnC,cAAc,EAAE,WAAW;QAC3B,iBAAiB,EAAE,cAAc;QACjC,YAAY,EAAE,SAAS;QACvB,EAAE,EAAE,SAAS;QACb,MAAM,EAAE,UAAU,CAAC,SAAS;QAC5B,IAAI,MAAA;KACL,CAAC,EAhBA,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,eAAe,qBAAA;IACf,8DAA8D;IAC9D,UAAU,gBAUV,CAAA;IAEF,IAAM,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,aAC7D,IAAI,EAAE,UAAU,CAAC,SAAS,EAC1B,GAAG,EAAE,cAAc,CAAC,GAAG;YACrB,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,YAAY,EAAE,mBAAmB,CAAC;YAClE,CAAC,CAAC,SAAS,CAAC,YAAY,EAAE,mBAAmB,CAAC,IAC7C,YAAY,EACf,CAAA;IAEF,KAAK,CAAC,SAAS,CAAC;QACd,IAAM,YAAY,GAAG;YACnB,+DAA+D;YAC/D,oCAAoC;SACrC,CAAA;QAED,IAAM,aAAa,GAAG,UAAC,CAA0B;YAC/C,IAAI,UAAU,CAAC,SAAS,EAAE;gBACxB,IAAI,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE;oBACpC,CAAC,CAAC,wBAAwB,EAAE,CAAA;iBAC7B;aACF;QACH,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAA;QAE/C,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAA;QACpD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa;QAChD,qBAAqB;QACrB,UAAU,CAAC,SAAS,IAAI,CACvB;YACE,oBAAC,YAAY,eACP;gBACF,cAAc,EAAE,UAAC,KAAK;oBACpB,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAA;oBAChC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;gBAC9B,CAAC;gBACD,IAAI,iBAAG,YAAY,EAAE,YAAY,GAAK,sBAAsB,OAAC;aAC9D,EACD;YACF,oBAAC,MAAM,eAAK,WAAW;gBACrB,oBAAC,OAAO,eACF;oBACF,SAAS,EAAE,UAAU,CAAC,SAAS;oBAC/B,MAAM,EAAE,aAAa,CAAC,MAAM;oBAC5B,OAAO,EAAE,aAAa,CAAC,OAAO;oBAC9B,WAAW,EAAE,QAAQ,CAAC,OAAO;oBAC7B,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBAC/C,UAAU,EAAE,YAAY;iBACzB;oBAED,oBAAC,cAAc,IACb,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,eAAe,CAAC,SAAS,EACjD,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,eAAe,CAAC,OAAO;wBACrD,2DAA2D;wBAC3D,YAAY,EAAE,eAAe,CAAC,YAAY,EAC1C,GAAG,EAAE,YAAY,EACjB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,iBAAiB,EAAE,YAAY,GAC/B,CACM,CACH,CACR,CACJ,CAC6B,CACjC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,YAAY,CAAC,EAAuC;QAArC,IAAI,UAAA;IACjC,OAAO;IACL,gEAAgE;IAChE,+DAA+D;IAC/D,6BACE,KAAK,EAAE;YACL,MAAM,EAAE,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,IAAI;YACT,KAAK,EAAE,CAAC;SACT;QAED,+BAAO,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,GAAI,CAC3C,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,wBAAwB;IAChC,IAAA,KAA0C,uBAAuB,EAAE,EAAzD,IAAI,YAAA,EAAW,IAAI,aAAA,EAAE,MAAM,YAA8B,CAAA;IAEzE,OAAO;QACL,IAAI,MAAA;QACJ,IAAI,MAAA;QACJ,MAAM,QAAA;KACP,CAAA;AACH,CAAC;AAiBD,MAAM,CAAC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,UACA,EAaC,EACD,GAAG;QAbD,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,OAAO,aAAA,EACP,KAAK,WAAA,EACL,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,gBAAgB,sBAAA,EAChB,YAAY,kBAAA,EACZ,iBAAiB,uBAAA;IAInB,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEnD,IAAM,YAAY,GAAG,SAAS,GAAG,CAAC,GAAG,CAAC,CAAA;IACtC,IAAM,UAAU,GAAG;QACjB,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;QACtE,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI;QAC/B,aAAa,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC;QACxC,CAAC,aAAa;YACZ,CAAC,CAAC,YAAY,CAAC;gBACX,KAAK,YAAC,EAAY;wBAAV,QAAQ,cAAA;oBACd,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;wBACrC,QAAQ,EAAE,UAAG,QAAQ,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC,KAAK,OAAI;qBAClE,CAAC,CAAA;gBACJ,CAAC;aACF,CAAC;YACJ,CAAC,CAAC,IAAI;QACR,aAAa,CAAC;YACZ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC;SACX,CAAC;KACH,CAAC,MAAM,CAAC,UAAC,UAAU,IAAK,OAAA,UAAU,KAAK,IAAI,EAAnB,CAAmB,CAAwB,CAAA;IAE9D,IAAA,KAMF,UAAU,CAAC;QACb,UAAU,YAAA;QACV,SAAS,WAAA;KACV,CAAC,EARA,YAAY,kBAAA,EACE,oBAAoB,kBAAA,EAClC,UAAU,gBAAA,EACV,cAAc,oBAAA,EACH,gBAAgB,eAI3B,CAAA;IAEF,KAAK,CAAC,SAAS,CAAC;QACd,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;IACxC,CAAC,EAAE,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,CAAC,CAAA;IAE5C,IAAM,UAAU,GAAG,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,CAAA;IAE7C,uDAAuD;IACvD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,iBAAiB,EAAE;QACvD,OAAO,CAAC,IAAI,CACV,gLAAgL,CACjL,CAAA;KACF;IAED,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,YAAY,EACrB,YAAY,EAAE,YAAY;QAE1B,iDACU,sCAAsC,EAC9C,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,YAAY,IACf,YAAY;YAEf,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;gBAC5B,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;gBAChD,CAAC,CAAC,OAAO;YACV,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,cAAc,CAAC,KAAK,EAC3B,SAAS,EAAE,gBAAgB,GAC3B,CACH,CACG,CACK,CACd,CAAA;AACH,CAAC,CAAC,CAAA"}
|
|
@@ -9,6 +9,10 @@ export declare type PickedTriggerProps = Pick<TriggerRenderProps, 'children' | '
|
|
|
9
9
|
export declare type PickedTriggerRenderProps = Pick<TriggerRenderProps, 'children'>;
|
|
10
10
|
export declare type PickedVisibilityProps = Pick<VisibilityConfig, 'afterHide' | 'afterShow' | 'initialIsVisible'>;
|
|
11
11
|
export interface OverlayTriggerProps extends PickedOverlayProps, PickedTriggerProps, PickedTriggerRenderProps, PickedVisibilityProps {
|
|
12
|
+
['aria-labelledby']?: string;
|
|
13
|
+
['aria-label']?: string;
|
|
14
|
+
['aria-describedby']?: string;
|
|
15
|
+
['aria-details']?: string;
|
|
12
16
|
/**
|
|
13
17
|
* The callback to run before the overlay is hidden. Returning
|
|
14
18
|
* `false` will prevent hiding.
|
|
@@ -37,11 +41,13 @@ export interface OverlayTriggerProps extends PickedOverlayProps, PickedTriggerPr
|
|
|
37
41
|
* @since 10.19.0
|
|
38
42
|
*/
|
|
39
43
|
hideDelay?: number;
|
|
44
|
+
/**
|
|
45
|
+
* Keys to hide the overlay when the overlay is focused
|
|
46
|
+
* @a11y OverlayTrigger by default closes on tab. To remove tab from closing
|
|
47
|
+
* and have only Esc keys, set "containFocus" to true, or opt-in to a full dialog role.
|
|
48
|
+
* @since 10.19.0
|
|
49
|
+
*/
|
|
40
50
|
hideKeys?: {
|
|
41
|
-
/**
|
|
42
|
-
* Keys to hide the overlay when the overlay is focused
|
|
43
|
-
* @since 10.19.0
|
|
44
|
-
*/
|
|
45
51
|
overlay: string[];
|
|
46
52
|
target: string[];
|
|
47
53
|
};
|
|
@@ -68,12 +74,14 @@ export interface OverlayTriggerProps extends PickedOverlayProps, PickedTriggerPr
|
|
|
68
74
|
*/
|
|
69
75
|
overlayRef?: React.Ref<OverlayTriggerRef>;
|
|
70
76
|
/**
|
|
71
|
-
* Accessibility props
|
|
77
|
+
* Accessibility props.
|
|
78
|
+
* @a11y May opionate "autoFocus" and "containFocus"
|
|
72
79
|
* @since 11.2.0
|
|
73
80
|
*/
|
|
74
81
|
role?: OverlayTriggerRole;
|
|
75
82
|
/**
|
|
76
83
|
* Whether to auto focus the first focusable element in the overlay on mount.
|
|
84
|
+
* True by default for role "dialog"
|
|
77
85
|
* @since 11.5.0
|
|
78
86
|
*/
|
|
79
87
|
autoFocus?: boolean;
|
|
@@ -84,8 +92,8 @@ export interface OverlayTriggerProps extends PickedOverlayProps, PickedTriggerPr
|
|
|
84
92
|
* */
|
|
85
93
|
containFocus?: boolean;
|
|
86
94
|
/**
|
|
87
|
-
* By default, role and id are applied to wrapper.
|
|
88
|
-
* Set to true, if you want to
|
|
95
|
+
* By default, role and id are applied to wrapper. But has knowledge of
|
|
96
|
+
* Set to true, if you want OverlayTrigger to place them on your overlay component.
|
|
89
97
|
*
|
|
90
98
|
* @default false
|
|
91
99
|
* @since 11.5.0
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AriaAttributes } from 'react';
|
|
1
|
+
import React, { AriaAttributes } from 'react';
|
|
2
2
|
import { OverlayTriggerRole } from './OverlayTrigger.types';
|
|
3
3
|
declare type GetA11yProps = (props: {
|
|
4
4
|
role: OverlayTriggerRole;
|
|
@@ -11,4 +11,205 @@ export declare function getA11yPreset(role?: OverlayTriggerRole): {
|
|
|
11
11
|
getOverlayProps: GetA11yProps;
|
|
12
12
|
getTriggerProps: GetA11yProps;
|
|
13
13
|
};
|
|
14
|
+
declare type LabelConfig = {
|
|
15
|
+
'aria-describedby'?: string;
|
|
16
|
+
'aria-details'?: string;
|
|
17
|
+
'aria-labelledby'?: string;
|
|
18
|
+
'aria-label'?: string;
|
|
19
|
+
/**
|
|
20
|
+
* ID for the widget itself
|
|
21
|
+
*/
|
|
22
|
+
id?: string;
|
|
23
|
+
};
|
|
24
|
+
declare type DialogBase = LabelConfig & {
|
|
25
|
+
isOpen: boolean;
|
|
26
|
+
role?: 'dialog';
|
|
27
|
+
};
|
|
28
|
+
declare type NonModalDialogConfig = DialogBase & {
|
|
29
|
+
isModal?: never | false;
|
|
30
|
+
};
|
|
31
|
+
declare type ModalDialogConfig = DialogBase & {
|
|
32
|
+
/**
|
|
33
|
+
*
|
|
34
|
+
* To enable `ariaHideOutside`. Set `isModal` to false to disable.
|
|
35
|
+
* @a11y Replicates `aria-modal` inert outside content
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
isModal: true;
|
|
39
|
+
ref: React.RefObject<HTMLElement>;
|
|
40
|
+
};
|
|
41
|
+
declare type ModalDialogLikeConfig = NonModalDialogConfig | ModalDialogConfig;
|
|
42
|
+
declare type OverlayTriggerA11yConfig = LabelConfig & {
|
|
43
|
+
/**
|
|
44
|
+
* Assure `aria-hidden` is not applied. A code side-effect
|
|
45
|
+
* from `ariaHideOutside` hiding everthing outside the scope.
|
|
46
|
+
*/
|
|
47
|
+
alwaysAriaVisible?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* When properties should be passed to the overlay UI itself,
|
|
50
|
+
* and not the wrapper element.
|
|
51
|
+
*/
|
|
52
|
+
canPropOverlayUp: boolean;
|
|
53
|
+
isOpen: boolean;
|
|
54
|
+
role?: OverlayTriggerRole;
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* Manages labelling for an element and the other DOM. Defaults an ID for `aria-labelledby` usage.
|
|
58
|
+
*
|
|
59
|
+
* When `aria-label` and `aria-labelledby` both exist, it combines them into `aria-labelledby` for a screen reader chain.
|
|
60
|
+
* @link [W3 naming with aria-labelledby](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_with_aria-labelledby)
|
|
61
|
+
*/
|
|
62
|
+
export declare function useLabelled(props?: LabelConfig): {
|
|
63
|
+
descriptionProps: {
|
|
64
|
+
id: string | undefined;
|
|
65
|
+
};
|
|
66
|
+
labelProps: {
|
|
67
|
+
id: string | undefined;
|
|
68
|
+
};
|
|
69
|
+
widgetProps: {
|
|
70
|
+
'aria-describedby': string | undefined;
|
|
71
|
+
'aria-details': string | undefined;
|
|
72
|
+
id?: string | undefined;
|
|
73
|
+
'aria-label'?: string | undefined;
|
|
74
|
+
'aria-labelledby'?: string | undefined;
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
/**
|
|
78
|
+
* Cover the label links for the trigger (button), the popup element (dialog), and the popup element title (heading).
|
|
79
|
+
* Similar to [React Aria useOverlayTrigger](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/useOverlayTrigger.ts)
|
|
80
|
+
* but with element title support.
|
|
81
|
+
* @link [MDN aria-haspopup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)
|
|
82
|
+
*/
|
|
83
|
+
export declare function useLabelledPopup({ 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, id: id_, isOpen, type, popupRole, popupId: popupId_, }: LabelConfig & {
|
|
84
|
+
isOpen: boolean;
|
|
85
|
+
popupId?: string;
|
|
86
|
+
type?: 'button' | 'combobox';
|
|
87
|
+
popupRole: 'dialog' | 'menu' | 'listbox';
|
|
88
|
+
}): {
|
|
89
|
+
labelProps: {
|
|
90
|
+
id: string | undefined;
|
|
91
|
+
};
|
|
92
|
+
popupProps: {
|
|
93
|
+
'aria-activedescendant'?: string | undefined;
|
|
94
|
+
'aria-atomic'?: boolean | "true" | "false" | undefined;
|
|
95
|
+
'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
|
|
96
|
+
'aria-busy'?: boolean | "true" | "false" | undefined;
|
|
97
|
+
'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
98
|
+
'aria-colcount'?: number | undefined;
|
|
99
|
+
'aria-colindex'?: number | undefined;
|
|
100
|
+
'aria-colspan'?: number | undefined;
|
|
101
|
+
'aria-controls'?: string | undefined;
|
|
102
|
+
'aria-current'?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date" | undefined;
|
|
103
|
+
'aria-describedby': string | undefined;
|
|
104
|
+
'aria-details': string | undefined;
|
|
105
|
+
'aria-disabled'?: boolean | "true" | "false" | undefined;
|
|
106
|
+
'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
|
|
107
|
+
'aria-errormessage'?: string | undefined;
|
|
108
|
+
'aria-expanded'?: boolean | "true" | "false" | undefined;
|
|
109
|
+
'aria-flowto'?: string | undefined;
|
|
110
|
+
'aria-grabbed'?: boolean | "true" | "false" | undefined;
|
|
111
|
+
'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | "grid" | undefined;
|
|
112
|
+
'aria-hidden'?: boolean | "true" | "false" | undefined;
|
|
113
|
+
'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
114
|
+
'aria-keyshortcuts'?: string | undefined;
|
|
115
|
+
'aria-label'?: string | undefined;
|
|
116
|
+
'aria-labelledby'?: string | undefined;
|
|
117
|
+
'aria-level'?: number | undefined;
|
|
118
|
+
'aria-live'?: "off" | "assertive" | "polite" | undefined;
|
|
119
|
+
'aria-modal'?: boolean | "true" | "false" | undefined;
|
|
120
|
+
'aria-multiline'?: boolean | "true" | "false" | undefined;
|
|
121
|
+
'aria-multiselectable'?: boolean | "true" | "false" | undefined;
|
|
122
|
+
'aria-orientation'?: "horizontal" | "vertical" | undefined;
|
|
123
|
+
'aria-owns'?: string | undefined;
|
|
124
|
+
'aria-placeholder'?: string | undefined;
|
|
125
|
+
'aria-posinset'?: number | undefined;
|
|
126
|
+
'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
127
|
+
'aria-readonly'?: boolean | "true" | "false" | undefined;
|
|
128
|
+
'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
129
|
+
'aria-required'?: boolean | "true" | "false" | undefined;
|
|
130
|
+
'aria-roledescription'?: string | undefined;
|
|
131
|
+
'aria-rowcount'?: number | undefined;
|
|
132
|
+
'aria-rowindex'?: number | undefined;
|
|
133
|
+
'aria-rowspan'?: number | undefined;
|
|
134
|
+
'aria-selected'?: boolean | "true" | "false" | undefined;
|
|
135
|
+
'aria-setsize'?: number | undefined;
|
|
136
|
+
'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
137
|
+
'aria-valuemax'?: number | undefined;
|
|
138
|
+
'aria-valuemin'?: number | undefined;
|
|
139
|
+
'aria-valuenow'?: number | undefined;
|
|
140
|
+
'aria-valuetext'?: string | undefined;
|
|
141
|
+
id?: string | undefined;
|
|
142
|
+
role: "dialog" | "menu" | "listbox";
|
|
143
|
+
};
|
|
144
|
+
triggerProps: React.AriaAttributes & {
|
|
145
|
+
id?: string | undefined;
|
|
146
|
+
};
|
|
147
|
+
};
|
|
148
|
+
/**
|
|
149
|
+
* For dialog experiences:
|
|
150
|
+
* - Has role dialog and aria linked title props
|
|
151
|
+
* - Focus management props to work with FocusScope
|
|
152
|
+
*
|
|
153
|
+
* For modal dialog experiences (full screen locked experiences):
|
|
154
|
+
* - Hides old and new content outside with aria-hidden with ariaHideOutside (like aria-modal)
|
|
155
|
+
* - (it will in breaking) Prevent scroll
|
|
156
|
+
*
|
|
157
|
+
* For either experiences, you still MUST support:
|
|
158
|
+
* - have Escape key to close (It should!)
|
|
159
|
+
* - have click outside, like scrim click
|
|
160
|
+
*
|
|
161
|
+
* _More about 'modal dialog' and `isModal` not using `aria-modal`:_
|
|
162
|
+
* Setting aria-modal="true" tells assistive technologies to let the user know the ability to interact with,
|
|
163
|
+
* or access other content on the page requires the modal dialog to be closed or otherwise lose focus.
|
|
164
|
+
* Modal dialogs are when content is displayed and the user's interaction is limited to only that section until it is dismissed.
|
|
165
|
+
* [MDN aria modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).
|
|
166
|
+
* To support the most, like Narrator in Edge, Core React uses `ariaHideOutside` to set `aria-hidden` on
|
|
167
|
+
* all elements outside the dialog, and **all elements outside added while opened**, so the dialog will act as a
|
|
168
|
+
* _modal_ even without `aria-modal` on the dialog itself. See Future Considerations below.
|
|
169
|
+
* [Screen Reader aria modal support table](https://a11ysupport.io/tech/aria/aria-modal_attribute) - [MS Narrator Edge aria modal support](https://a11ysupport.io/tests/apg__modal-dialog-example/aria__aria-modal_attribute/convey_presence/narrator/edge)
|
|
170
|
+
* _Future Considerations:_ Replace ariaHideOutside with aria-modal="true".
|
|
171
|
+
* Using aria-modal, then we would need to involve Portal and so tooltips
|
|
172
|
+
* or Toasts could mount within the visible aria-modal container.
|
|
173
|
+
*/
|
|
174
|
+
export declare function useModalDialogLike({ 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, id, isModal, isOpen, ref, role, }: ModalDialogLikeConfig): {
|
|
175
|
+
dialogProps: {
|
|
176
|
+
id: string | undefined;
|
|
177
|
+
role: "dialog";
|
|
178
|
+
tabIndex: number;
|
|
179
|
+
'aria-describedby': string | undefined;
|
|
180
|
+
'aria-details': string | undefined;
|
|
181
|
+
'aria-label'?: string | undefined;
|
|
182
|
+
'aria-labelledby'?: string | undefined;
|
|
183
|
+
};
|
|
184
|
+
labelProps: {
|
|
185
|
+
id: string | undefined;
|
|
186
|
+
};
|
|
187
|
+
focusScopeProps: {
|
|
188
|
+
autoFocus: boolean;
|
|
189
|
+
contain: boolean;
|
|
190
|
+
restoreFocus: boolean;
|
|
191
|
+
};
|
|
192
|
+
};
|
|
193
|
+
/**
|
|
194
|
+
* Takes many roles and determines props necessary for DOM/components.
|
|
195
|
+
* **Side effect of role="dialog"**, current and any content added later
|
|
196
|
+
* outside of the element (like by portals) will get `aria-hidden=true`
|
|
197
|
+
* to replace the `aria-modal=true` `inert` nature.
|
|
198
|
+
* @see useModalDialogLike */
|
|
199
|
+
export declare function useOverlayTriggerA11y({ alwaysAriaVisible, 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, canPropOverlayUp, id: id_, isOpen, role, }: OverlayTriggerA11yConfig): {
|
|
200
|
+
focusScopeProps: {
|
|
201
|
+
autoFocus?: boolean | undefined;
|
|
202
|
+
contain?: boolean | undefined;
|
|
203
|
+
restoreFocus?: boolean | undefined;
|
|
204
|
+
};
|
|
205
|
+
labelProps: {
|
|
206
|
+
id: string | undefined;
|
|
207
|
+
};
|
|
208
|
+
overlayProps: {};
|
|
209
|
+
portalProps: {};
|
|
210
|
+
triggerProps: React.AriaAttributes & {
|
|
211
|
+
id?: string | undefined;
|
|
212
|
+
};
|
|
213
|
+
wrapperProps: {};
|
|
214
|
+
};
|
|
14
215
|
export {};
|