@workday/canvas-kit-react 6.1.2 → 6.2.0
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/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/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/tabs/lib/overflow/useOverflowModel.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/overflow/useOverflowModel.js +9 -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/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/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/tabs/lib/overflow/useOverflowModel.d.ts.map +1 -1
- package/dist/es6/tabs/lib/overflow/useOverflowModel.js +9 -0
- package/dist/es6/tooltip/lib/useTooltip.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/useTooltip.js +2 -1
- package/package.json +6 -5
- package/popup/lib/hooks/index.ts +3 -0
- package/popup/lib/hooks/useCloseOnFullscreenExit.ts +37 -0
- 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/tabs/lib/overflow/useOverflowModel.tsx +22 -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/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/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
|
@@ -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 './useResizeObserver';
|
|
15
16
|
export * from './StaticStates';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import screenfull from 'screenfull';
|
|
3
|
+
|
|
4
|
+
export const useIsFullscreen = () => {
|
|
5
|
+
const [isFullscreen, setIsFullscreen] = React.useState(false);
|
|
6
|
+
|
|
7
|
+
const handler = React.useCallback(() => {
|
|
8
|
+
setIsFullscreen(screenfull.isFullscreen);
|
|
9
|
+
}, []);
|
|
10
|
+
|
|
11
|
+
React.useEffect(() => {
|
|
12
|
+
screenfull.on('change', handler);
|
|
13
|
+
|
|
14
|
+
return () => {
|
|
15
|
+
screenfull.off('change', handler);
|
|
16
|
+
};
|
|
17
|
+
}, [handler]);
|
|
18
|
+
|
|
19
|
+
return isFullscreen;
|
|
20
|
+
};
|
|
@@ -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 './useResizeObserver';
|
|
15
16
|
export * from './StaticStates';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}
|
|
@@ -15,6 +15,7 @@ __export(require("./useMount"));
|
|
|
15
15
|
__export(require("./components"));
|
|
16
16
|
__export(require("./models"));
|
|
17
17
|
__export(require("./elements"));
|
|
18
|
+
__export(require("./useIsFullscreen"));
|
|
18
19
|
__export(require("./useWindowSize"));
|
|
19
20
|
__export(require("./useResizeObserver"));
|
|
20
21
|
__export(require("./StaticStates"));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsFullscreen.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useIsFullscreen.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,eAgB3B,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var screenfull_1 = __importDefault(require("screenfull"));
|
|
8
|
+
exports.useIsFullscreen = function () {
|
|
9
|
+
var _a = react_1.default.useState(false), isFullscreen = _a[0], setIsFullscreen = _a[1];
|
|
10
|
+
var handler = react_1.default.useCallback(function () {
|
|
11
|
+
setIsFullscreen(screenfull_1.default.isFullscreen);
|
|
12
|
+
}, []);
|
|
13
|
+
react_1.default.useEffect(function () {
|
|
14
|
+
screenfull_1.default.on('change', handler);
|
|
15
|
+
return function () {
|
|
16
|
+
screenfull_1.default.off('change', handler);
|
|
17
|
+
};
|
|
18
|
+
}, [handler]);
|
|
19
|
+
return isFullscreen;
|
|
20
|
+
};
|
|
@@ -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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC"}
|
|
@@ -7,6 +7,7 @@ __export(require("./useAlwaysCloseOnOutsideClick"));
|
|
|
7
7
|
__export(require("./useAssistiveHideSiblings"));
|
|
8
8
|
__export(require("./useBringToTopOnClick"));
|
|
9
9
|
__export(require("./useCloseOnEscape"));
|
|
10
|
+
__export(require("./useCloseOnFullscreenExit"));
|
|
10
11
|
__export(require("./useCloseOnOutsideClick"));
|
|
11
12
|
__export(require("./useDisableBodyScroll"));
|
|
12
13
|
__export(require("./useFocusRedirect"));
|
|
@@ -20,3 +21,5 @@ __export(require("./usePopupPopper"));
|
|
|
20
21
|
__export(require("./usePopupStack"));
|
|
21
22
|
__export(require("./usePopupTarget"));
|
|
22
23
|
__export(require("./useReturnFocus"));
|
|
24
|
+
__export(require("./useTransferOnFullscreenEnter"));
|
|
25
|
+
__export(require("./useTransferOnFullscreenExit"));
|
|
@@ -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 @@
|
|
|
1
|
+
{"version":3,"file":"useCloseOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnFullscreenExit.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,sIA0BpC,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var screenfull_1 = __importDefault(require("screenfull"));
|
|
8
|
+
/**
|
|
9
|
+
* Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
|
|
10
|
+
* the entire screen. This should be added to popup types that are very context sensitive like
|
|
11
|
+
* Tooltips.
|
|
12
|
+
*/
|
|
13
|
+
exports.useCloseOnFullscreenExit = function (model, elemProps) {
|
|
14
|
+
if (elemProps === void 0) { elemProps = {}; }
|
|
15
|
+
var handler = react_1.default.useCallback(function (event) {
|
|
16
|
+
if (!screenfull_1.default.isFullscreen) {
|
|
17
|
+
model.events.hide({ event: event });
|
|
18
|
+
}
|
|
19
|
+
}, [model.events]);
|
|
20
|
+
var visible = model.state.visibility !== 'hidden';
|
|
21
|
+
react_1.default.useEffect(function () {
|
|
22
|
+
if (!visible) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
if (screenfull_1.default.isEnabled) {
|
|
26
|
+
screenfull_1.default.on('change', handler);
|
|
27
|
+
return function () {
|
|
28
|
+
screenfull_1.default.off('change', handler);
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
return;
|
|
32
|
+
}, [handler, visible]);
|
|
33
|
+
return elemProps;
|
|
34
|
+
};
|
|
@@ -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"}
|
|
@@ -61,8 +61,8 @@ exports.usePopupStack = function (ref, target) {
|
|
|
61
61
|
? target.current || undefined
|
|
62
62
|
: target
|
|
63
63
|
: undefined;
|
|
64
|
-
canvas_kit_popup_stack_1.PopupStack.add({ element: localRef.current, owner: targetEl });
|
|
65
64
|
var element = localRef.current;
|
|
65
|
+
canvas_kit_popup_stack_1.PopupStack.add({ element: element, owner: targetEl });
|
|
66
66
|
return function () {
|
|
67
67
|
canvas_kit_popup_stack_1.PopupStack.remove(element);
|
|
68
68
|
};
|
|
@@ -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,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var screenfull_1 = __importDefault(require("screenfull"));
|
|
8
|
+
var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
|
|
9
|
+
/**
|
|
10
|
+
* Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
|
|
11
|
+
* popup would seem to disappear because the popup container element is not a child of the
|
|
12
|
+
* fullscreen element.
|
|
13
|
+
*
|
|
14
|
+
* Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
|
|
15
|
+
* Doing so would open the popup when the intention was to close it.
|
|
16
|
+
*/
|
|
17
|
+
exports.useTransferOnFullscreenEnter = function (model, elemProps) {
|
|
18
|
+
if (elemProps === void 0) { elemProps = {}; }
|
|
19
|
+
var handler = react_1.default.useCallback(function (event) {
|
|
20
|
+
if (screenfull_1.default.isFullscreen && model.state.stackRef.current) {
|
|
21
|
+
canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({
|
|
22
|
+
element: model.state.stackRef.current,
|
|
23
|
+
owner: model.state.targetRef.current,
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
}, [model.state.stackRef, model.state.targetRef]);
|
|
27
|
+
var visible = model.state.visibility !== 'hidden';
|
|
28
|
+
react_1.default.useEffect(function () {
|
|
29
|
+
if (!visible) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
if (screenfull_1.default.isEnabled) {
|
|
33
|
+
screenfull_1.default.on('change', handler);
|
|
34
|
+
return function () {
|
|
35
|
+
screenfull_1.default.off('change', handler);
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
return;
|
|
39
|
+
}, [handler, visible]);
|
|
40
|
+
return elemProps;
|
|
41
|
+
};
|
|
@@ -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,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var screenfull_1 = __importDefault(require("screenfull"));
|
|
8
|
+
var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
|
|
9
|
+
/**
|
|
10
|
+
* Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
|
|
11
|
+
* would not operate correctly with other popups on the screen.
|
|
12
|
+
*
|
|
13
|
+
* Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
|
|
14
|
+
* Doing so would open the popup when the intention was to close it.
|
|
15
|
+
*/
|
|
16
|
+
exports.useTransferOnFullscreenExit = function (model, elemProps) {
|
|
17
|
+
if (elemProps === void 0) { elemProps = {}; }
|
|
18
|
+
var handler = react_1.default.useCallback(function (event) {
|
|
19
|
+
if (!screenfull_1.default.isFullscreen && model.state.stackRef.current) {
|
|
20
|
+
canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({
|
|
21
|
+
element: model.state.stackRef.current,
|
|
22
|
+
owner: model.state.targetRef.current,
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
}, [model.state.stackRef, model.state.targetRef]);
|
|
26
|
+
var visible = model.state.visibility !== 'hidden';
|
|
27
|
+
react_1.default.useEffect(function () {
|
|
28
|
+
if (!visible) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
if (screenfull_1.default.isEnabled) {
|
|
32
|
+
screenfull_1.default.on('change', handler);
|
|
33
|
+
return function () {
|
|
34
|
+
screenfull_1.default.off('change', handler);
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
return;
|
|
38
|
+
}, [handler, visible]);
|
|
39
|
+
return elemProps;
|
|
40
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverflowModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/overflow/useOverflowModel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EACL,cAAc,EACd,eAAe,EACf,wBAAwB,EAGxB,iBAAiB,EACjB,cAAc,EACf,MAAM,cAAc,CAAC;AAEtB,oBAAY,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,oBAAY,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG;IAC7D,iBAAiB,CAAC,IAAI,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAChD,sBAAsB,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACpD,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACtD,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAC1C,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACvC,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAEH,oBAAY,uBAAuB,CAAC,CAAC,IAAI,wBAAwB,CAAC,CAAC,CAAC,GAAG;IACrE,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,oBAAY,mBAAmB,CAAC,CAAC,IAAI,uBAAuB,CAAC,CAAC,CAAC,GAC7D,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAExF,wBAAgB,YAAY,CAC1B,cAAc,EAAE,MAAM,EACtB,mBAAmB,EAAE,MAAM,EAC3B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtC,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,GAC5B,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"useOverflowModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/overflow/useOverflowModel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EACL,cAAc,EACd,eAAe,EACf,wBAAwB,EAGxB,iBAAiB,EACjB,cAAc,EACf,MAAM,cAAc,CAAC;AAEtB,oBAAY,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,oBAAY,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG;IAC7D,iBAAiB,CAAC,IAAI,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAChD,sBAAsB,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACpD,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACtD,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAC1C,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACvC,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAEH,oBAAY,uBAAuB,CAAC,CAAC,IAAI,wBAAwB,CAAC,CAAC,CAAC,GAAG;IACrE,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,oBAAY,mBAAmB,CAAC,CAAC,IAAI,uBAAuB,CAAC,CAAC,CAAC,GAC7D,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAExF,wBAAgB,YAAY,CAC1B,cAAc,EAAE,MAAM,EACtB,mBAAmB,EAAE,MAAM,EAC3B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtC,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,GAC5B,MAAM,EAAE,CAwCV;AAED,eAAO,MAAM,gBAAgB,0EAgG5B,CAAC"}
|
|
@@ -46,6 +46,9 @@ function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, selec
|
|
|
46
46
|
itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
+
else {
|
|
50
|
+
itemWidth += overflowTargetWidth;
|
|
51
|
+
}
|
|
49
52
|
for (var key in itemWidthCache) {
|
|
50
53
|
if (key !== selectedKey) {
|
|
51
54
|
itemWidth += itemWidthCache[key];
|
|
@@ -97,6 +100,8 @@ exports.useOverflowModel = function (config) {
|
|
|
97
100
|
var id = _a.id, width = _a.width;
|
|
98
101
|
itemWidthCacheRef.current = __assign(__assign({}, itemWidthCacheRef.current), (_b = {}, _b[id] = width, _b));
|
|
99
102
|
setItemWidthCache(itemWidthCacheRef.current);
|
|
103
|
+
var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds);
|
|
104
|
+
setHiddenIds(ids);
|
|
100
105
|
},
|
|
101
106
|
removeItemWidth: function (_a) {
|
|
102
107
|
var id = _a.id;
|
|
@@ -104,6 +109,10 @@ exports.useOverflowModel = function (config) {
|
|
|
104
109
|
delete newCache[id];
|
|
105
110
|
itemWidthCacheRef.current = newCache;
|
|
106
111
|
setItemWidthCache(itemWidthCacheRef.current);
|
|
112
|
+
var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds !== 'all'
|
|
113
|
+
? state.selectedIds.filter(function (sId) { return id !== sId; })
|
|
114
|
+
: state.selectedIds);
|
|
115
|
+
setHiddenIds(ids);
|
|
107
116
|
},
|
|
108
117
|
addHiddenKey: function (_a) {
|
|
109
118
|
var id = _a.id;
|
|
@@ -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"}
|
|
@@ -86,6 +86,7 @@ function useTooltip(_a) {
|
|
|
86
86
|
};
|
|
87
87
|
popup_1.useCloseOnEscape(popupModel);
|
|
88
88
|
popup_1.useAlwaysCloseOnOutsideClick(popupModel);
|
|
89
|
+
popup_1.useCloseOnFullscreenExit(popupModel);
|
|
89
90
|
var visible = popupModel.state.visibility !== 'hidden';
|
|
90
91
|
return {
|
|
91
92
|
/** Mix these properties into the target element. **Must be an Element** */
|
|
@@ -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 './useResizeObserver';
|
|
15
16
|
export * from './StaticStates';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}
|
|
@@ -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 './useResizeObserver';
|
|
15
16
|
export * from './StaticStates';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsFullscreen.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useIsFullscreen.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,eAgB3B,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import screenfull from 'screenfull';
|
|
3
|
+
export var useIsFullscreen = function () {
|
|
4
|
+
var _a = React.useState(false), isFullscreen = _a[0], setIsFullscreen = _a[1];
|
|
5
|
+
var handler = React.useCallback(function () {
|
|
6
|
+
setIsFullscreen(screenfull.isFullscreen);
|
|
7
|
+
}, []);
|
|
8
|
+
React.useEffect(function () {
|
|
9
|
+
screenfull.on('change', handler);
|
|
10
|
+
return function () {
|
|
11
|
+
screenfull.off('change', handler);
|
|
12
|
+
};
|
|
13
|
+
}, [handler]);
|
|
14
|
+
return isFullscreen;
|
|
15
|
+
};
|
|
@@ -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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC"}
|
|
@@ -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,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 @@
|
|
|
1
|
+
{"version":3,"file":"useCloseOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnFullscreenExit.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,sIA0BpC,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import screenfull from 'screenfull';
|
|
3
|
+
/**
|
|
4
|
+
* Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
|
|
5
|
+
* the entire screen. This should be added to popup types that are very context sensitive like
|
|
6
|
+
* Tooltips.
|
|
7
|
+
*/
|
|
8
|
+
export var useCloseOnFullscreenExit = function (model, elemProps) {
|
|
9
|
+
if (elemProps === void 0) { elemProps = {}; }
|
|
10
|
+
var handler = React.useCallback(function (event) {
|
|
11
|
+
if (!screenfull.isFullscreen) {
|
|
12
|
+
model.events.hide({ event: event });
|
|
13
|
+
}
|
|
14
|
+
}, [model.events]);
|
|
15
|
+
var visible = model.state.visibility !== 'hidden';
|
|
16
|
+
React.useEffect(function () {
|
|
17
|
+
if (!visible) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
if (screenfull.isEnabled) {
|
|
21
|
+
screenfull.on('change', handler);
|
|
22
|
+
return function () {
|
|
23
|
+
screenfull.off('change', handler);
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
return;
|
|
27
|
+
}, [handler, visible]);
|
|
28
|
+
return elemProps;
|
|
29
|
+
};
|
|
@@ -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":"useOverflowModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/overflow/useOverflowModel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EACL,cAAc,EACd,eAAe,EACf,wBAAwB,EAGxB,iBAAiB,EACjB,cAAc,EACf,MAAM,cAAc,CAAC;AAEtB,oBAAY,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,oBAAY,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG;IAC7D,iBAAiB,CAAC,IAAI,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAChD,sBAAsB,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACpD,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACtD,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAC1C,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACvC,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAEH,oBAAY,uBAAuB,CAAC,CAAC,IAAI,wBAAwB,CAAC,CAAC,CAAC,GAAG;IACrE,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,oBAAY,mBAAmB,CAAC,CAAC,IAAI,uBAAuB,CAAC,CAAC,CAAC,GAC7D,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAExF,wBAAgB,YAAY,CAC1B,cAAc,EAAE,MAAM,EACtB,mBAAmB,EAAE,MAAM,EAC3B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtC,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,GAC5B,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"useOverflowModel.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/overflow/useOverflowModel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EACL,cAAc,EACd,eAAe,EACf,wBAAwB,EAGxB,iBAAiB,EACjB,cAAc,EACf,MAAM,cAAc,CAAC;AAEtB,oBAAY,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,oBAAY,cAAc,CAAC,CAAC,GAAG,OAAO,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG;IAC7D,iBAAiB,CAAC,IAAI,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAChD,sBAAsB,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACpD,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACtD,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IAC1C,YAAY,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;IACvC,eAAe,CAAC,IAAI,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAEH,oBAAY,uBAAuB,CAAC,CAAC,IAAI,wBAAwB,CAAC,CAAC,CAAC,GAAG;IACrE,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,oBAAY,mBAAmB,CAAC,CAAC,IAAI,uBAAuB,CAAC,CAAC,CAAC,GAC7D,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAExF,wBAAgB,YAAY,CAC1B,cAAc,EAAE,MAAM,EACtB,mBAAmB,EAAE,MAAM,EAC3B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtC,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,GAC5B,MAAM,EAAE,CAwCV;AAED,eAAO,MAAM,gBAAgB,0EAgG5B,CAAC"}
|
|
@@ -41,6 +41,9 @@ export function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache
|
|
|
41
41
|
itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
+
else {
|
|
45
|
+
itemWidth += overflowTargetWidth;
|
|
46
|
+
}
|
|
44
47
|
for (var key in itemWidthCache) {
|
|
45
48
|
if (key !== selectedKey) {
|
|
46
49
|
itemWidth += itemWidthCache[key];
|
|
@@ -91,6 +94,8 @@ export var useOverflowModel = function (config) {
|
|
|
91
94
|
var id = _a.id, width = _a.width;
|
|
92
95
|
itemWidthCacheRef.current = __assign(__assign({}, itemWidthCacheRef.current), (_b = {}, _b[id] = width, _b));
|
|
93
96
|
setItemWidthCache(itemWidthCacheRef.current);
|
|
97
|
+
var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds);
|
|
98
|
+
setHiddenIds(ids);
|
|
94
99
|
},
|
|
95
100
|
removeItemWidth: function (_a) {
|
|
96
101
|
var id = _a.id;
|
|
@@ -98,6 +103,10 @@ export var useOverflowModel = function (config) {
|
|
|
98
103
|
delete newCache[id];
|
|
99
104
|
itemWidthCacheRef.current = newCache;
|
|
100
105
|
setItemWidthCache(itemWidthCacheRef.current);
|
|
106
|
+
var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds !== 'all'
|
|
107
|
+
? state.selectedIds.filter(function (sId) { return id !== sId; })
|
|
108
|
+
: state.selectedIds);
|
|
109
|
+
setHiddenIds(ids);
|
|
101
110
|
},
|
|
102
111
|
addHiddenKey: function (_a) {
|
|
103
112
|
var id = _a.id;
|
|
@@ -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": "6.
|
|
3
|
+
"version": "6.2.0",
|
|
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",
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"@emotion/styled": "^10.0.27",
|
|
58
58
|
"@popperjs/core": "^2.5.4",
|
|
59
59
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
60
|
-
"@workday/canvas-kit-labs-react": "^6.
|
|
61
|
-
"@workday/canvas-kit-popup-stack": "^6.
|
|
62
|
-
"@workday/canvas-kit-preview-react": "^6.
|
|
60
|
+
"@workday/canvas-kit-labs-react": "^6.2.0",
|
|
61
|
+
"@workday/canvas-kit-popup-stack": "^6.2.0",
|
|
62
|
+
"@workday/canvas-kit-preview-react": "^6.2.0",
|
|
63
63
|
"@workday/canvas-system-icons-web": "1.0.41",
|
|
64
64
|
"@workday/design-assets-types": "^0.2.4",
|
|
65
65
|
"chroma-js": "^2.1.0",
|
|
@@ -70,6 +70,7 @@
|
|
|
70
70
|
"react-innertext": "^1.1.5",
|
|
71
71
|
"resize-observer-polyfill": "^1.5.1",
|
|
72
72
|
"rtl-css-js": "^1.14.1",
|
|
73
|
+
"screenfull": "^5.2.0",
|
|
73
74
|
"use-resize-observer": "~7.0.1",
|
|
74
75
|
"uuid": "^3.3.3"
|
|
75
76
|
},
|
|
@@ -77,5 +78,5 @@
|
|
|
77
78
|
"@workday/canvas-accent-icons-web": "^1.0.0",
|
|
78
79
|
"@workday/canvas-applet-icons-web": "^0.17.50"
|
|
79
80
|
},
|
|
80
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "5eaacab495cdfeacb8dbbaa12782a36382ecc813"
|
|
81
82
|
}
|
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
|
+
};
|
|
@@ -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
|
+
};
|
|
@@ -92,6 +92,8 @@ export function getHiddenIds(
|
|
|
92
92
|
// at least the selected item and overflow target fit. Update our itemWidth with the sum
|
|
93
93
|
itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
|
|
94
94
|
}
|
|
95
|
+
} else {
|
|
96
|
+
itemWidth += overflowTargetWidth;
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
for (const key in itemWidthCache) {
|
|
@@ -166,12 +168,32 @@ export const useOverflowModel = <T extends unknown>(
|
|
|
166
168
|
itemWidthCacheRef.current = {...itemWidthCacheRef.current, [id]: width};
|
|
167
169
|
|
|
168
170
|
setItemWidthCache(itemWidthCacheRef.current);
|
|
171
|
+
|
|
172
|
+
const ids = getHiddenIds(
|
|
173
|
+
containerWidthRef.current,
|
|
174
|
+
overflowTargetWidthRef.current,
|
|
175
|
+
itemWidthCacheRef.current,
|
|
176
|
+
state.selectedIds
|
|
177
|
+
);
|
|
178
|
+
|
|
179
|
+
setHiddenIds(ids);
|
|
169
180
|
},
|
|
170
181
|
removeItemWidth({id}) {
|
|
171
182
|
const newCache = {...itemWidthCacheRef.current};
|
|
172
183
|
delete newCache[id];
|
|
173
184
|
itemWidthCacheRef.current = newCache;
|
|
174
185
|
setItemWidthCache(itemWidthCacheRef.current);
|
|
186
|
+
|
|
187
|
+
const ids = getHiddenIds(
|
|
188
|
+
containerWidthRef.current,
|
|
189
|
+
overflowTargetWidthRef.current,
|
|
190
|
+
itemWidthCacheRef.current,
|
|
191
|
+
state.selectedIds !== 'all'
|
|
192
|
+
? state.selectedIds.filter(sId => id !== sId)
|
|
193
|
+
: state.selectedIds
|
|
194
|
+
);
|
|
195
|
+
|
|
196
|
+
setHiddenIds(ids);
|
|
175
197
|
},
|
|
176
198
|
addHiddenKey({id}) {
|
|
177
199
|
setHiddenIds(ids => ids.concat(id));
|
|
@@ -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 './useResizeObserver';
|
|
15
16
|
export * from './StaticStates';
|
|
@@ -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 './useResizeObserver';
|
|
15
16
|
export * from './StaticStates';
|
|
@@ -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
|