@workday/canvas-kit-react 5.3.5 → 5.3.9
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/common/lib/utils/index.ts +1 -0
- package/common/lib/utils/useIsFullscreen.ts +20 -0
- package/dist/commonjs/common/lib/utils/index.d.ts +1 -0
- package/dist/commonjs/common/lib/utils/index.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/index.js +1 -0
- package/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts +2 -0
- package/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts.map +1 -0
- package/dist/commonjs/common/lib/utils/useIsFullscreen.js +20 -0
- package/dist/commonjs/popup/lib/Popper.d.ts +5 -0
- package/dist/commonjs/popup/lib/Popper.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/Popper.js +9 -8
- package/dist/commonjs/popup/lib/hooks/index.d.ts +3 -0
- package/dist/commonjs/popup/lib/hooks/index.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/hooks/index.js +3 -0
- package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
- package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts.map +1 -0
- package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.js +34 -0
- package/dist/commonjs/popup/lib/hooks/useInitialFocus.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/hooks/useInitialFocus.js +5 -3
- package/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/hooks/usePopupStack.js +1 -1
- package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
- package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts.map +1 -0
- package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.js +41 -0
- package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts +9 -0
- package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts.map +1 -0
- package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.js +40 -0
- package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map +1 -1
- package/dist/commonjs/tooltip/lib/useTooltip.js +1 -0
- package/dist/es6/common/lib/utils/index.d.ts +1 -0
- package/dist/es6/common/lib/utils/index.d.ts.map +1 -1
- package/dist/es6/common/lib/utils/index.js +1 -0
- package/dist/es6/common/lib/utils/useIsFullscreen.d.ts +2 -0
- package/dist/es6/common/lib/utils/useIsFullscreen.d.ts.map +1 -0
- package/dist/es6/common/lib/utils/useIsFullscreen.js +15 -0
- package/dist/es6/popup/lib/Popper.d.ts +5 -0
- package/dist/es6/popup/lib/Popper.d.ts.map +1 -1
- package/dist/es6/popup/lib/Popper.js +9 -8
- package/dist/es6/popup/lib/hooks/index.d.ts +3 -0
- package/dist/es6/popup/lib/hooks/index.d.ts.map +1 -1
- package/dist/es6/popup/lib/hooks/index.js +3 -0
- package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
- package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts.map +1 -0
- package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.js +29 -0
- package/dist/es6/popup/lib/hooks/useInitialFocus.d.ts.map +1 -1
- package/dist/es6/popup/lib/hooks/useInitialFocus.js +5 -3
- package/dist/es6/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
- package/dist/es6/popup/lib/hooks/usePopupStack.js +1 -1
- package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
- package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts.map +1 -0
- package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.js +36 -0
- package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts +9 -0
- package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts.map +1 -0
- package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.js +35 -0
- package/dist/es6/tooltip/lib/useTooltip.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/useTooltip.js +2 -1
- package/package.json +8 -6
- package/popup/lib/Popper.tsx +13 -5
- package/popup/lib/hooks/index.ts +3 -0
- package/popup/lib/hooks/useCloseOnFullscreenExit.ts +37 -0
- package/popup/lib/hooks/useInitialFocus.tsx +3 -1
- package/popup/lib/hooks/usePopupStack.ts +2 -1
- package/popup/lib/hooks/useTransferOnFullscreenEnter.ts +44 -0
- package/popup/lib/hooks/useTransferOnFullscreenExit.ts +43 -0
- package/tooltip/lib/useTooltip.tsx +2 -0
- package/ts3.5/dist/commonjs/common/lib/utils/index.d.ts +1 -0
- package/ts3.5/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts +2 -0
- package/ts3.5/dist/commonjs/popup/lib/Popper.d.ts +5 -0
- package/ts3.5/dist/commonjs/popup/lib/hooks/index.d.ts +3 -0
- package/ts3.5/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
- package/ts3.5/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
- package/ts3.5/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts +9 -0
- package/ts3.5/dist/es6/common/lib/utils/index.d.ts +1 -0
- package/ts3.5/dist/es6/common/lib/utils/useIsFullscreen.d.ts +2 -0
- package/ts3.5/dist/es6/popup/lib/Popper.d.ts +5 -0
- package/ts3.5/dist/es6/popup/lib/hooks/index.d.ts +3 -0
- package/ts3.5/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
- package/ts3.5/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
- package/ts3.5/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts +9 -0
|
@@ -17,10 +17,12 @@ export var useInitialFocus = function (model, elemProps) {
|
|
|
17
17
|
React.useEffect(function () {
|
|
18
18
|
var _a;
|
|
19
19
|
if (visible && model.state.stackRef.current) {
|
|
20
|
-
var
|
|
20
|
+
var element_1 = ((_a = model.state.initialFocusRef) === null || _a === void 0 ? void 0 : _a.current) ||
|
|
21
21
|
getFirstFocusableElement(model.state.stackRef.current);
|
|
22
|
-
assert(
|
|
23
|
-
|
|
22
|
+
assert(element_1, 'No focusable element was found. Please ensure popup has at least one focusable element');
|
|
23
|
+
requestAnimationFrame(function () {
|
|
24
|
+
changeFocus(element_1);
|
|
25
|
+
});
|
|
24
26
|
}
|
|
25
27
|
}, [model.state.initialFocusRef, model.state.stackRef, visible]);
|
|
26
28
|
return elemProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa,wMA8CzB,CAAC"}
|
|
@@ -56,8 +56,8 @@ export var usePopupStack = function (ref, target) {
|
|
|
56
56
|
? target.current || undefined
|
|
57
57
|
: target
|
|
58
58
|
: undefined;
|
|
59
|
-
PopupStack.add({ element: localRef.current, owner: targetEl });
|
|
60
59
|
var element = localRef.current;
|
|
60
|
+
PopupStack.add({ element: element, owner: targetEl });
|
|
61
61
|
return function () {
|
|
62
62
|
PopupStack.remove(element);
|
|
63
63
|
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
|
|
3
|
+
* popup would seem to disappear because the popup container element is not a child of the
|
|
4
|
+
* fullscreen element.
|
|
5
|
+
*
|
|
6
|
+
* Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
|
|
7
|
+
* Doing so would open the popup when the intention was to close it.
|
|
8
|
+
*/
|
|
9
|
+
export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
|
|
10
|
+
//# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTransferOnFullscreenEnter.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenEnter.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,sIA6BxC,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import screenfull from 'screenfull';
|
|
3
|
+
import { PopupStack } from '@workday/canvas-kit-popup-stack';
|
|
4
|
+
/**
|
|
5
|
+
* Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
|
|
6
|
+
* popup would seem to disappear because the popup container element is not a child of the
|
|
7
|
+
* fullscreen element.
|
|
8
|
+
*
|
|
9
|
+
* Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
|
|
10
|
+
* Doing so would open the popup when the intention was to close it.
|
|
11
|
+
*/
|
|
12
|
+
export var useTransferOnFullscreenEnter = function (model, elemProps) {
|
|
13
|
+
if (elemProps === void 0) { elemProps = {}; }
|
|
14
|
+
var handler = React.useCallback(function (event) {
|
|
15
|
+
if (screenfull.isFullscreen && model.state.stackRef.current) {
|
|
16
|
+
PopupStack.transferToCurrentContext({
|
|
17
|
+
element: model.state.stackRef.current,
|
|
18
|
+
owner: model.state.targetRef.current,
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
}, [model.state.stackRef, model.state.targetRef]);
|
|
22
|
+
var visible = model.state.visibility !== 'hidden';
|
|
23
|
+
React.useEffect(function () {
|
|
24
|
+
if (!visible) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
if (screenfull.isEnabled) {
|
|
28
|
+
screenfull.on('change', handler);
|
|
29
|
+
return function () {
|
|
30
|
+
screenfull.off('change', handler);
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
return;
|
|
34
|
+
}, [handler, visible]);
|
|
35
|
+
return elemProps;
|
|
36
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
|
|
3
|
+
* would not operate correctly with other popups on the screen.
|
|
4
|
+
*
|
|
5
|
+
* Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
|
|
6
|
+
* Doing so would open the popup when the intention was to close it.
|
|
7
|
+
*/
|
|
8
|
+
export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
|
|
9
|
+
//# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTransferOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenExit.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,sIA6BvC,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import screenfull from 'screenfull';
|
|
3
|
+
import { PopupStack } from '@workday/canvas-kit-popup-stack';
|
|
4
|
+
/**
|
|
5
|
+
* Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
|
|
6
|
+
* would not operate correctly with other popups on the screen.
|
|
7
|
+
*
|
|
8
|
+
* Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
|
|
9
|
+
* Doing so would open the popup when the intention was to close it.
|
|
10
|
+
*/
|
|
11
|
+
export var useTransferOnFullscreenExit = function (model, elemProps) {
|
|
12
|
+
if (elemProps === void 0) { elemProps = {}; }
|
|
13
|
+
var handler = React.useCallback(function (event) {
|
|
14
|
+
if (!screenfull.isFullscreen && model.state.stackRef.current) {
|
|
15
|
+
PopupStack.transferToCurrentContext({
|
|
16
|
+
element: model.state.stackRef.current,
|
|
17
|
+
owner: model.state.targetRef.current,
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
}, [model.state.stackRef, model.state.targetRef]);
|
|
21
|
+
var visible = model.state.visibility !== 'hidden';
|
|
22
|
+
React.useEffect(function () {
|
|
23
|
+
if (!visible) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
if (screenfull.isEnabled) {
|
|
27
|
+
screenfull.on('change', handler);
|
|
28
|
+
return function () {
|
|
29
|
+
screenfull.off('change', handler);
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
return;
|
|
33
|
+
}, [handler, visible]);
|
|
34
|
+
return elemProps;
|
|
35
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA6CF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import uuid from 'uuid/v4';
|
|
3
|
-
import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, } from '@workday/canvas-kit-react/popup';
|
|
3
|
+
import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, useCloseOnFullscreenExit, } from '@workday/canvas-kit-react/popup';
|
|
4
4
|
var useIntentTimer = function (fn, waitMs) {
|
|
5
5
|
if (waitMs === void 0) { waitMs = 0; }
|
|
6
6
|
var timer = React.useRef();
|
|
@@ -74,6 +74,7 @@ export function useTooltip(_a) {
|
|
|
74
74
|
};
|
|
75
75
|
useCloseOnEscape(popupModel);
|
|
76
76
|
useAlwaysCloseOnOutsideClick(popupModel);
|
|
77
|
+
useCloseOnFullscreenExit(popupModel);
|
|
77
78
|
var visible = popupModel.state.visibility !== 'hidden';
|
|
78
79
|
return {
|
|
79
80
|
/** Mix these properties into the target element. **Must be an Element** */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "5.3.
|
|
3
|
+
"version": "5.3.9",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
"build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
|
|
39
39
|
"prepack": "node ../../utils/publish.js pre react",
|
|
40
40
|
"postpack": "node ../../utils/publish.js post react",
|
|
41
|
-
"depcheck": "node ../../utils/check-dependencies-exist.js"
|
|
41
|
+
"depcheck": "node ../../utils/check-dependencies-exist.js",
|
|
42
|
+
"typecheck:src": "tsc -p . --noEmit --incremental false"
|
|
42
43
|
},
|
|
43
44
|
"keywords": [
|
|
44
45
|
"canvas",
|
|
@@ -57,9 +58,9 @@
|
|
|
57
58
|
"@popperjs/core": "^2.5.4",
|
|
58
59
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
59
60
|
"@workday/canvas-depth-web": "^0.16.4",
|
|
60
|
-
"@workday/canvas-kit-labs-react": "^5.3.
|
|
61
|
-
"@workday/canvas-kit-popup-stack": "^5.3.
|
|
62
|
-
"@workday/canvas-kit-preview-react": "^5.3.
|
|
61
|
+
"@workday/canvas-kit-labs-react": "^5.3.9",
|
|
62
|
+
"@workday/canvas-kit-popup-stack": "^5.3.9",
|
|
63
|
+
"@workday/canvas-kit-preview-react": "^5.3.9",
|
|
63
64
|
"@workday/canvas-system-icons-web": "1.0.41",
|
|
64
65
|
"@workday/design-assets-types": "^0.2.4",
|
|
65
66
|
"chroma-js": "^2.1.0",
|
|
@@ -69,11 +70,12 @@
|
|
|
69
70
|
"polished": "^4.1.3",
|
|
70
71
|
"react-innertext": "^1.1.5",
|
|
71
72
|
"rtl-css-js": "^1.14.1",
|
|
73
|
+
"screenfull": "^5.2.0",
|
|
72
74
|
"uuid": "^3.3.3"
|
|
73
75
|
},
|
|
74
76
|
"devDependencies": {
|
|
75
77
|
"@workday/canvas-accent-icons-web": "^1.0.0",
|
|
76
78
|
"@workday/canvas-applet-icons-web": "^0.17.50"
|
|
77
79
|
},
|
|
78
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "54edc15783b6a3e2673a05103065091167a5a8a3"
|
|
79
81
|
}
|
package/popup/lib/Popper.tsx
CHANGED
|
@@ -6,6 +6,7 @@ export type Placement = PopperJS.Placement;
|
|
|
6
6
|
export type PopperOptions = PopperJS.Options;
|
|
7
7
|
|
|
8
8
|
import {usePopupStack} from './hooks';
|
|
9
|
+
import {useLocalRef} from '@workday/canvas-kit-react/common';
|
|
9
10
|
|
|
10
11
|
export interface PopperProps {
|
|
11
12
|
/**
|
|
@@ -68,6 +69,11 @@ export interface PopperProps {
|
|
|
68
69
|
* @default true
|
|
69
70
|
*/
|
|
70
71
|
portal?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Reference to the PopperJS instance. Useful for making direct method calls on the popper
|
|
74
|
+
* instance like `update`.
|
|
75
|
+
*/
|
|
76
|
+
popperInstanceRef?: React.Ref<PopperJS.Instance>;
|
|
71
77
|
}
|
|
72
78
|
|
|
73
79
|
export const Popper = React.forwardRef<HTMLDivElement, PopperProps>(
|
|
@@ -108,11 +114,12 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
|
|
|
108
114
|
children,
|
|
109
115
|
portal,
|
|
110
116
|
containerElement,
|
|
117
|
+
popperInstanceRef,
|
|
111
118
|
}: PopperProps,
|
|
112
119
|
ref
|
|
113
120
|
) => {
|
|
114
121
|
const firstRender = React.useRef(true);
|
|
115
|
-
const
|
|
122
|
+
const {localRef, elementRef} = useLocalRef(popperInstanceRef);
|
|
116
123
|
const [placement, setPlacement] = React.useState(popperPlacement);
|
|
117
124
|
const stackRef = usePopupStack(ref, anchorElement as HTMLElement);
|
|
118
125
|
|
|
@@ -141,14 +148,15 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
|
|
|
141
148
|
}
|
|
142
149
|
|
|
143
150
|
if (stackRef.current) {
|
|
144
|
-
|
|
151
|
+
const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
|
|
145
152
|
placement: popperPlacement,
|
|
146
153
|
...popperOptions,
|
|
147
154
|
modifiers: [...(popperOptions.modifiers || []), placementModifier],
|
|
148
155
|
});
|
|
156
|
+
elementRef(instance); // update the ref with the instance
|
|
149
157
|
|
|
150
158
|
return () => {
|
|
151
|
-
|
|
159
|
+
instance?.destroy();
|
|
152
160
|
};
|
|
153
161
|
}
|
|
154
162
|
|
|
@@ -162,14 +170,14 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
|
|
|
162
170
|
React.useLayoutEffect(() => {
|
|
163
171
|
// Only update options if this is _not_ the first render
|
|
164
172
|
if (!firstRender.current) {
|
|
165
|
-
|
|
173
|
+
localRef.current?.setOptions({
|
|
166
174
|
placement: popperPlacement,
|
|
167
175
|
...popperOptions,
|
|
168
176
|
modifiers: [...(popperOptions.modifiers || []), placementModifier],
|
|
169
177
|
});
|
|
170
178
|
}
|
|
171
179
|
firstRender.current = false;
|
|
172
|
-
}, [popperOptions, popperPlacement, placementModifier]);
|
|
180
|
+
}, [popperOptions, popperPlacement, placementModifier, localRef]);
|
|
173
181
|
|
|
174
182
|
const contents = <>{isRenderProp(children) ? children({placement}) : children}</>;
|
|
175
183
|
|
package/popup/lib/hooks/index.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
|
|
|
2
2
|
export * from './useAssistiveHideSiblings';
|
|
3
3
|
export * from './useBringToTopOnClick';
|
|
4
4
|
export * from './useCloseOnEscape';
|
|
5
|
+
export * from './useCloseOnFullscreenExit';
|
|
5
6
|
export * from './useCloseOnOutsideClick';
|
|
6
7
|
export * from './useDisableBodyScroll';
|
|
7
8
|
export * from './useFocusRedirect';
|
|
@@ -15,3 +16,5 @@ export * from './usePopupPopper';
|
|
|
15
16
|
export * from './usePopupStack';
|
|
16
17
|
export * from './usePopupTarget';
|
|
17
18
|
export * from './useReturnFocus';
|
|
19
|
+
export * from './useTransferOnFullscreenEnter';
|
|
20
|
+
export * from './useTransferOnFullscreenExit';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import screenfull from 'screenfull';
|
|
3
|
+
|
|
4
|
+
import {PopupModel} from './usePopupModel';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
|
|
8
|
+
* the entire screen. This should be added to popup types that are very context sensitive like
|
|
9
|
+
* Tooltips.
|
|
10
|
+
*/
|
|
11
|
+
export const useCloseOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
|
|
12
|
+
const handler = React.useCallback(
|
|
13
|
+
event => {
|
|
14
|
+
if (!screenfull.isFullscreen) {
|
|
15
|
+
model.events.hide({event});
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
[model.events]
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
const visible = model.state.visibility !== 'hidden';
|
|
22
|
+
|
|
23
|
+
React.useEffect(() => {
|
|
24
|
+
if (!visible) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
if (screenfull.isEnabled) {
|
|
28
|
+
screenfull.on('change', handler);
|
|
29
|
+
return () => {
|
|
30
|
+
screenfull.off('change', handler);
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
return;
|
|
34
|
+
}, [handler, visible]);
|
|
35
|
+
|
|
36
|
+
return elemProps;
|
|
37
|
+
};
|
|
@@ -29,7 +29,9 @@ export const useInitialFocus = (model: PopupModel, elemProps = {}) => {
|
|
|
29
29
|
'No focusable element was found. Please ensure popup has at least one focusable element'
|
|
30
30
|
);
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
requestAnimationFrame(() => {
|
|
33
|
+
changeFocus(element);
|
|
34
|
+
});
|
|
33
35
|
}
|
|
34
36
|
}, [model.state.initialFocusRef, model.state.stackRef, visible]);
|
|
35
37
|
|
|
@@ -64,8 +64,9 @@ export const usePopupStack = <E extends HTMLElement>(
|
|
|
64
64
|
? target.current || undefined
|
|
65
65
|
: target
|
|
66
66
|
: undefined;
|
|
67
|
-
PopupStack.add({element: localRef.current!, owner: targetEl});
|
|
68
67
|
const element = localRef.current!;
|
|
68
|
+
|
|
69
|
+
PopupStack.add({element: element, owner: targetEl});
|
|
69
70
|
return () => {
|
|
70
71
|
PopupStack.remove(element);
|
|
71
72
|
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import screenfull from 'screenfull';
|
|
3
|
+
|
|
4
|
+
import {PopupModel} from './usePopupModel';
|
|
5
|
+
import {PopupStack} from '@workday/canvas-kit-popup-stack';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
|
|
9
|
+
* popup would seem to disappear because the popup container element is not a child of the
|
|
10
|
+
* fullscreen element.
|
|
11
|
+
*
|
|
12
|
+
* Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
|
|
13
|
+
* Doing so would open the popup when the intention was to close it.
|
|
14
|
+
*/
|
|
15
|
+
export const useTransferOnFullscreenEnter = (model: PopupModel, elemProps = {}) => {
|
|
16
|
+
const handler = React.useCallback(
|
|
17
|
+
event => {
|
|
18
|
+
if (screenfull.isFullscreen && model.state.stackRef.current) {
|
|
19
|
+
PopupStack.transferToCurrentContext({
|
|
20
|
+
element: model.state.stackRef.current,
|
|
21
|
+
owner: model.state.targetRef.current!,
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
[model.state.stackRef, model.state.targetRef]
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
const visible = model.state.visibility !== 'hidden';
|
|
29
|
+
|
|
30
|
+
React.useEffect(() => {
|
|
31
|
+
if (!visible) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if (screenfull.isEnabled) {
|
|
35
|
+
screenfull.on('change', handler);
|
|
36
|
+
return () => {
|
|
37
|
+
screenfull.off('change', handler);
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
return;
|
|
41
|
+
}, [handler, visible]);
|
|
42
|
+
|
|
43
|
+
return elemProps;
|
|
44
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import screenfull from 'screenfull';
|
|
3
|
+
|
|
4
|
+
import {PopupModel} from './usePopupModel';
|
|
5
|
+
import {PopupStack} from '@workday/canvas-kit-popup-stack';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
|
|
9
|
+
* would not operate correctly with other popups on the screen.
|
|
10
|
+
*
|
|
11
|
+
* Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
|
|
12
|
+
* Doing so would open the popup when the intention was to close it.
|
|
13
|
+
*/
|
|
14
|
+
export const useTransferOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
|
|
15
|
+
const handler = React.useCallback(
|
|
16
|
+
event => {
|
|
17
|
+
if (!screenfull.isFullscreen && model.state.stackRef.current) {
|
|
18
|
+
PopupStack.transferToCurrentContext({
|
|
19
|
+
element: model.state.stackRef.current,
|
|
20
|
+
owner: model.state.targetRef.current!,
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
[model.state.stackRef, model.state.targetRef]
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
const visible = model.state.visibility !== 'hidden';
|
|
28
|
+
|
|
29
|
+
React.useEffect(() => {
|
|
30
|
+
if (!visible) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
if (screenfull.isEnabled) {
|
|
34
|
+
screenfull.on('change', handler);
|
|
35
|
+
return () => {
|
|
36
|
+
screenfull.off('change', handler);
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
return;
|
|
40
|
+
}, [handler, visible]);
|
|
41
|
+
|
|
42
|
+
return elemProps;
|
|
43
|
+
};
|
|
@@ -4,6 +4,7 @@ import {
|
|
|
4
4
|
useCloseOnEscape,
|
|
5
5
|
useAlwaysCloseOnOutsideClick,
|
|
6
6
|
usePopupModel,
|
|
7
|
+
useCloseOnFullscreenExit,
|
|
7
8
|
} from '@workday/canvas-kit-react/popup';
|
|
8
9
|
|
|
9
10
|
const useIntentTimer = (fn: Function, waitMs: number = 0): {start(): void; clear(): void} => {
|
|
@@ -126,6 +127,7 @@ export function useTooltip<T extends Element = Element>({
|
|
|
126
127
|
|
|
127
128
|
useCloseOnEscape(popupModel);
|
|
128
129
|
useAlwaysCloseOnOutsideClick(popupModel);
|
|
130
|
+
useCloseOnFullscreenExit(popupModel);
|
|
129
131
|
|
|
130
132
|
const visible = popupModel.state.visibility !== 'hidden';
|
|
131
133
|
|
|
@@ -10,6 +10,7 @@ export * from './useMount';
|
|
|
10
10
|
export * from './components';
|
|
11
11
|
export * from './models';
|
|
12
12
|
export * from './elements';
|
|
13
|
+
export * from './useIsFullscreen';
|
|
13
14
|
export * from './useWindowSize';
|
|
14
15
|
export * from './StaticStates';
|
|
15
16
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -65,6 +65,11 @@ export interface PopperProps {
|
|
|
65
65
|
* @default true
|
|
66
66
|
*/
|
|
67
67
|
portal?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Reference to the PopperJS instance. Useful for making direct method calls on the popper
|
|
70
|
+
* instance like `update`.
|
|
71
|
+
*/
|
|
72
|
+
popperInstanceRef?: React.Ref<PopperJS.Instance>;
|
|
68
73
|
}
|
|
69
74
|
export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
|
|
70
75
|
//# sourceMappingURL=Popper.d.ts.map
|
|
@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
|
|
|
2
2
|
export * from './useAssistiveHideSiblings';
|
|
3
3
|
export * from './useBringToTopOnClick';
|
|
4
4
|
export * from './useCloseOnEscape';
|
|
5
|
+
export * from './useCloseOnFullscreenExit';
|
|
5
6
|
export * from './useCloseOnOutsideClick';
|
|
6
7
|
export * from './useDisableBodyScroll';
|
|
7
8
|
export * from './useFocusRedirect';
|
|
@@ -15,4 +16,6 @@ export * from './usePopupPopper';
|
|
|
15
16
|
export * from './usePopupStack';
|
|
16
17
|
export * from './usePopupTarget';
|
|
17
18
|
export * from './useReturnFocus';
|
|
19
|
+
export * from './useTransferOnFullscreenEnter';
|
|
20
|
+
export * from './useTransferOnFullscreenExit';
|
|
18
21
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
|
|
3
|
+
* the entire screen. This should be added to popup types that are very context sensitive like
|
|
4
|
+
* Tooltips.
|
|
5
|
+
*/
|
|
6
|
+
export declare const useCloseOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
|
|
7
|
+
//# sourceMappingURL=useCloseOnFullscreenExit.d.ts.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
|
|
3
|
+
* popup would seem to disappear because the popup container element is not a child of the
|
|
4
|
+
* fullscreen element.
|
|
5
|
+
*
|
|
6
|
+
* Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
|
|
7
|
+
* Doing so would open the popup when the intention was to close it.
|
|
8
|
+
*/
|
|
9
|
+
export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
|
|
10
|
+
//# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
|
|
3
|
+
* would not operate correctly with other popups on the screen.
|
|
4
|
+
*
|
|
5
|
+
* Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
|
|
6
|
+
* Doing so would open the popup when the intention was to close it.
|
|
7
|
+
*/
|
|
8
|
+
export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
|
|
9
|
+
//# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map
|
|
@@ -10,6 +10,7 @@ export * from './useMount';
|
|
|
10
10
|
export * from './components';
|
|
11
11
|
export * from './models';
|
|
12
12
|
export * from './elements';
|
|
13
|
+
export * from './useIsFullscreen';
|
|
13
14
|
export * from './useWindowSize';
|
|
14
15
|
export * from './StaticStates';
|
|
15
16
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -65,6 +65,11 @@ export interface PopperProps {
|
|
|
65
65
|
* @default true
|
|
66
66
|
*/
|
|
67
67
|
portal?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Reference to the PopperJS instance. Useful for making direct method calls on the popper
|
|
70
|
+
* instance like `update`.
|
|
71
|
+
*/
|
|
72
|
+
popperInstanceRef?: React.Ref<PopperJS.Instance>;
|
|
68
73
|
}
|
|
69
74
|
export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
|
|
70
75
|
//# sourceMappingURL=Popper.d.ts.map
|
|
@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
|
|
|
2
2
|
export * from './useAssistiveHideSiblings';
|
|
3
3
|
export * from './useBringToTopOnClick';
|
|
4
4
|
export * from './useCloseOnEscape';
|
|
5
|
+
export * from './useCloseOnFullscreenExit';
|
|
5
6
|
export * from './useCloseOnOutsideClick';
|
|
6
7
|
export * from './useDisableBodyScroll';
|
|
7
8
|
export * from './useFocusRedirect';
|
|
@@ -15,4 +16,6 @@ export * from './usePopupPopper';
|
|
|
15
16
|
export * from './usePopupStack';
|
|
16
17
|
export * from './usePopupTarget';
|
|
17
18
|
export * from './useReturnFocus';
|
|
19
|
+
export * from './useTransferOnFullscreenEnter';
|
|
20
|
+
export * from './useTransferOnFullscreenExit';
|
|
18
21
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
|
|
3
|
+
* the entire screen. This should be added to popup types that are very context sensitive like
|
|
4
|
+
* Tooltips.
|
|
5
|
+
*/
|
|
6
|
+
export declare const useCloseOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
|
|
7
|
+
//# sourceMappingURL=useCloseOnFullscreenExit.d.ts.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
|
|
3
|
+
* popup would seem to disappear because the popup container element is not a child of the
|
|
4
|
+
* fullscreen element.
|
|
5
|
+
*
|
|
6
|
+
* Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
|
|
7
|
+
* Doing so would open the popup when the intention was to close it.
|
|
8
|
+
*/
|
|
9
|
+
export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
|
|
10
|
+
//# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
|
|
3
|
+
* would not operate correctly with other popups on the screen.
|
|
4
|
+
*
|
|
5
|
+
* Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
|
|
6
|
+
* Doing so would open the popup when the intention was to close it.
|
|
7
|
+
*/
|
|
8
|
+
export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
|
|
9
|
+
//# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map
|