@workday/canvas-kit-react 5.3.6 → 5.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/common/lib/utils/index.ts +1 -0
  2. package/common/lib/utils/useIsFullscreen.ts +20 -0
  3. package/dist/commonjs/common/lib/utils/index.d.ts +1 -0
  4. package/dist/commonjs/common/lib/utils/index.d.ts.map +1 -1
  5. package/dist/commonjs/common/lib/utils/index.js +1 -0
  6. package/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts +2 -0
  7. package/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts.map +1 -0
  8. package/dist/commonjs/common/lib/utils/useIsFullscreen.js +20 -0
  9. package/dist/commonjs/popup/lib/hooks/index.d.ts +3 -0
  10. package/dist/commonjs/popup/lib/hooks/index.d.ts.map +1 -1
  11. package/dist/commonjs/popup/lib/hooks/index.js +3 -0
  12. package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
  13. package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts.map +1 -0
  14. package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.js +34 -0
  15. package/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
  16. package/dist/commonjs/popup/lib/hooks/usePopupStack.js +1 -1
  17. package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
  18. package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts.map +1 -0
  19. package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.js +41 -0
  20. package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts +9 -0
  21. package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts.map +1 -0
  22. package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.js +40 -0
  23. package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map +1 -1
  24. package/dist/commonjs/tooltip/lib/useTooltip.js +1 -0
  25. package/dist/es6/common/lib/utils/index.d.ts +1 -0
  26. package/dist/es6/common/lib/utils/index.d.ts.map +1 -1
  27. package/dist/es6/common/lib/utils/index.js +1 -0
  28. package/dist/es6/common/lib/utils/useIsFullscreen.d.ts +2 -0
  29. package/dist/es6/common/lib/utils/useIsFullscreen.d.ts.map +1 -0
  30. package/dist/es6/common/lib/utils/useIsFullscreen.js +15 -0
  31. package/dist/es6/popup/lib/hooks/index.d.ts +3 -0
  32. package/dist/es6/popup/lib/hooks/index.d.ts.map +1 -1
  33. package/dist/es6/popup/lib/hooks/index.js +3 -0
  34. package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
  35. package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts.map +1 -0
  36. package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.js +29 -0
  37. package/dist/es6/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
  38. package/dist/es6/popup/lib/hooks/usePopupStack.js +1 -1
  39. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
  40. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts.map +1 -0
  41. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.js +36 -0
  42. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts +9 -0
  43. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts.map +1 -0
  44. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.js +35 -0
  45. package/dist/es6/tooltip/lib/useTooltip.d.ts.map +1 -1
  46. package/dist/es6/tooltip/lib/useTooltip.js +2 -1
  47. package/package.json +6 -5
  48. package/popup/lib/hooks/index.ts +3 -0
  49. package/popup/lib/hooks/useCloseOnFullscreenExit.ts +37 -0
  50. package/popup/lib/hooks/usePopupStack.ts +2 -1
  51. package/popup/lib/hooks/useTransferOnFullscreenEnter.ts +44 -0
  52. package/popup/lib/hooks/useTransferOnFullscreenExit.ts +43 -0
  53. package/tooltip/lib/useTooltip.tsx +2 -0
  54. package/ts3.5/dist/commonjs/common/lib/utils/index.d.ts +1 -0
  55. package/ts3.5/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts +2 -0
  56. package/ts3.5/dist/commonjs/popup/lib/hooks/index.d.ts +3 -0
  57. package/ts3.5/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
  58. package/ts3.5/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
  59. package/ts3.5/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts +9 -0
  60. package/ts3.5/dist/es6/common/lib/utils/index.d.ts +1 -0
  61. package/ts3.5/dist/es6/common/lib/utils/useIsFullscreen.d.ts +2 -0
  62. package/ts3.5/dist/es6/popup/lib/hooks/index.d.ts +3 -0
  63. package/ts3.5/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
  64. package/ts3.5/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
  65. package/ts3.5/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts +9 -0
@@ -10,5 +10,6 @@ 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';
@@ -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 './StaticStates';
15
16
  //# sourceMappingURL=index.d.ts.map
@@ -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,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,gBAAgB,CAAC"}
@@ -15,5 +15,6 @@ __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("./StaticStates"));
@@ -0,0 +1,2 @@
1
+ export declare const useIsFullscreen: () => boolean;
2
+ //# sourceMappingURL=useIsFullscreen.d.ts.map
@@ -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,wMA6CzB,CAAC"}
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":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/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;IA4CF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
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 './StaticStates';
15
16
  //# sourceMappingURL=index.d.ts.map
@@ -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,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,gBAAgB,CAAC"}
@@ -10,5 +10,6 @@ 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';
@@ -0,0 +1,2 @@
1
+ export declare const useIsFullscreen: () => boolean;
2
+ //# sourceMappingURL=useIsFullscreen.d.ts.map
@@ -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,wMA6CzB,CAAC"}
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;AAiD/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;IA4CF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
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.6",
3
+ "version": "5.3.7",
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",
@@ -58,9 +58,9 @@
58
58
  "@popperjs/core": "^2.5.4",
59
59
  "@workday/canvas-colors-web": "^2.0.0",
60
60
  "@workday/canvas-depth-web": "^0.16.4",
61
- "@workday/canvas-kit-labs-react": "^5.3.6",
62
- "@workday/canvas-kit-popup-stack": "^5.3.6",
63
- "@workday/canvas-kit-preview-react": "^5.3.6",
61
+ "@workday/canvas-kit-labs-react": "^5.3.7",
62
+ "@workday/canvas-kit-popup-stack": "^5.3.7",
63
+ "@workday/canvas-kit-preview-react": "^5.3.7",
64
64
  "@workday/canvas-system-icons-web": "1.0.41",
65
65
  "@workday/design-assets-types": "^0.2.4",
66
66
  "chroma-js": "^2.1.0",
@@ -70,11 +70,12 @@
70
70
  "polished": "^4.1.3",
71
71
  "react-innertext": "^1.1.5",
72
72
  "rtl-css-js": "^1.14.1",
73
+ "screenfull": "^5.2.0",
73
74
  "uuid": "^3.3.3"
74
75
  },
75
76
  "devDependencies": {
76
77
  "@workday/canvas-accent-icons-web": "^1.0.0",
77
78
  "@workday/canvas-applet-icons-web": "^0.17.50"
78
79
  },
79
- "gitHead": "067d8895ad8f2e70f7e8f658dc728addc74ddf87"
80
+ "gitHead": "d7096891da046c15c1c57f03c9486c700c837c8a"
80
81
  }
@@ -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
+ };
@@ -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
@@ -0,0 +1,2 @@
1
+ export declare const useIsFullscreen: () => boolean;
2
+ //# sourceMappingURL=useIsFullscreen.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
@@ -0,0 +1,2 @@
1
+ export declare const useIsFullscreen: () => boolean;
2
+ //# sourceMappingURL=useIsFullscreen.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