@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.
Files changed (70) 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/tabs/lib/overflow/useOverflowModel.d.ts.map +1 -1
  24. package/dist/commonjs/tabs/lib/overflow/useOverflowModel.js +9 -0
  25. package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map +1 -1
  26. package/dist/commonjs/tooltip/lib/useTooltip.js +1 -0
  27. package/dist/es6/common/lib/utils/index.d.ts +1 -0
  28. package/dist/es6/common/lib/utils/index.d.ts.map +1 -1
  29. package/dist/es6/common/lib/utils/index.js +1 -0
  30. package/dist/es6/common/lib/utils/useIsFullscreen.d.ts +2 -0
  31. package/dist/es6/common/lib/utils/useIsFullscreen.d.ts.map +1 -0
  32. package/dist/es6/common/lib/utils/useIsFullscreen.js +15 -0
  33. package/dist/es6/popup/lib/hooks/index.d.ts +3 -0
  34. package/dist/es6/popup/lib/hooks/index.d.ts.map +1 -1
  35. package/dist/es6/popup/lib/hooks/index.js +3 -0
  36. package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
  37. package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts.map +1 -0
  38. package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.js +29 -0
  39. package/dist/es6/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
  40. package/dist/es6/popup/lib/hooks/usePopupStack.js +1 -1
  41. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
  42. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts.map +1 -0
  43. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.js +36 -0
  44. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts +9 -0
  45. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts.map +1 -0
  46. package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.js +35 -0
  47. package/dist/es6/tabs/lib/overflow/useOverflowModel.d.ts.map +1 -1
  48. package/dist/es6/tabs/lib/overflow/useOverflowModel.js +9 -0
  49. package/dist/es6/tooltip/lib/useTooltip.d.ts.map +1 -1
  50. package/dist/es6/tooltip/lib/useTooltip.js +2 -1
  51. package/package.json +6 -5
  52. package/popup/lib/hooks/index.ts +3 -0
  53. package/popup/lib/hooks/useCloseOnFullscreenExit.ts +37 -0
  54. package/popup/lib/hooks/usePopupStack.ts +2 -1
  55. package/popup/lib/hooks/useTransferOnFullscreenEnter.ts +44 -0
  56. package/popup/lib/hooks/useTransferOnFullscreenExit.ts +43 -0
  57. package/tabs/lib/overflow/useOverflowModel.tsx +22 -0
  58. package/tooltip/lib/useTooltip.tsx +2 -0
  59. package/ts3.5/dist/commonjs/common/lib/utils/index.d.ts +1 -0
  60. package/ts3.5/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts +2 -0
  61. package/ts3.5/dist/commonjs/popup/lib/hooks/index.d.ts +3 -0
  62. package/ts3.5/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
  63. package/ts3.5/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
  64. package/ts3.5/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts +9 -0
  65. package/ts3.5/dist/es6/common/lib/utils/index.d.ts +1 -0
  66. package/ts3.5/dist/es6/common/lib/utils/useIsFullscreen.d.ts +2 -0
  67. package/ts3.5/dist/es6/popup/lib/hooks/index.d.ts +3 -0
  68. package/ts3.5/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts +7 -0
  69. package/ts3.5/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts +10 -0
  70. 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,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":"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,CAsCV;AAED,eAAO,MAAM,gBAAgB,0EA4E5B,CAAC"}
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;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 './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,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":"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,CAsCV;AAED,eAAO,MAAM,gBAAgB,0EA4E5B,CAAC"}
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;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": "6.1.2",
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.1.2",
61
- "@workday/canvas-kit-popup-stack": "^6.1.2",
62
- "@workday/canvas-kit-preview-react": "^6.1.2",
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": "e579cc30de5e1eaa4c908083c335ca3cf74d7a05"
81
+ "gitHead": "5eaacab495cdfeacb8dbbaa12782a36382ecc813"
81
82
  }
@@ -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';
@@ -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 './useResizeObserver';
15
16
  export * from './StaticStates';
@@ -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