@workday/canvas-kit-react 5.3.3 → 5.3.7

package/common/lib/utils/index.ts

@@ -10,5 +10,6 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './StaticStates';

package/common/lib/utils/useIsFullscreen.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import screenfull from 'screenfull';
+
+export const useIsFullscreen = () => {
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+
+  const handler = React.useCallback(() => {
+    setIsFullscreen(screenfull.isFullscreen);
+  }, []);
+
+  React.useEffect(() => {
+    screenfull.on('change', handler);
+
+    return () => {
+      screenfull.off('change', handler);
+    };
+  }, [handler]);
+
+  return isFullscreen;
+};

package/dist/commonjs/common/lib/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './StaticStates';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/common/lib/utils/index.d.ts.map

@@ -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"}
+{"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"}

package/dist/commonjs/common/lib/utils/index.js

@@ -15,5 +15,6 @@ __export(require("./useMount"));
 __export(require("./components"));
 __export(require("./models"));
 __export(require("./elements"));
+__export(require("./useIsFullscreen"));
 __export(require("./useWindowSize"));
 __export(require("./StaticStates"));

package/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts

@@ -0,0 +1,2 @@
+export declare const useIsFullscreen: () => boolean;
+//# sourceMappingURL=useIsFullscreen.d.ts.map

package/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsFullscreen.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useIsFullscreen.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,eAgB3B,CAAC"}

package/dist/commonjs/common/lib/utils/useIsFullscreen.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var screenfull_1 = __importDefault(require("screenfull"));
+exports.useIsFullscreen = function () {
+    var _a = react_1.default.useState(false), isFullscreen = _a[0], setIsFullscreen = _a[1];
+    var handler = react_1.default.useCallback(function () {
+        setIsFullscreen(screenfull_1.default.isFullscreen);
+    }, []);
+    react_1.default.useEffect(function () {
+        screenfull_1.default.on('change', handler);
+        return function () {
+            screenfull_1.default.off('change', handler);
+        };
+    }, [handler]);
+    return isFullscreen;
+};

package/dist/commonjs/loading-animation/lib/LoadingDots.js

@@ -32,14 +32,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     result["default"] = mod;
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var core_1 = require("@emotion/core");
-var styled_1 = __importDefault(require("@emotion/styled"));
 var tokens_1 = __importStar(require("@workday/canvas-kit-react/tokens"));
+var common_1 = require("@workday/canvas-kit-react/common");
 /**
  * Keyframe for the dots loading animation.
  */
@@ -47,7 +44,7 @@ var keyframesLoading = core_1.keyframes(templateObject_1 || (templateObject_1 =
 /**
  * The actual loading dot div.
  */
-var LoadingAnimationDot = styled_1.default('div')({
+var LoadingAnimationDot = common_1.styled('div')({
     backgroundColor: tokens_1.default.colors.soap400,
     width: tokens_1.default.space.s,
     height: tokens_1.default.space.s,
@@ -73,7 +70,7 @@ var LoadingAnimationDot = styled_1.default('div')({
 /**
  * A simple container for the loading dots.
  */
-var Container = styled_1.default('div')({
+var Container = common_1.styled('div')({
     display: 'inline-block',
 });
 /**

package/dist/commonjs/popup/lib/PopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0CD,eAAO,MAAM,SAAS,gEA0BpB,CAAC"}
+{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS,gEAuBpB,CAAC"}

package/dist/commonjs/popup/lib/PopupCard.js

@@ -44,13 +44,7 @@ var popupAnimation = function (transformOrigin) {
     var translate = common_1.getTranslateFromOrigin(transformOrigin, tokens_1.space.xxs);
     return core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "], ["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "])), translate.x, translate.y);
 };
-var StyledPopupCard = common_1.styled(card_1.Card)({
-    position: 'relative',
-    maxWidth: "calc(100vw - " + tokens_1.space.l + ")",
-}, function (_a) {
-    var width = _a.width;
-    return width && { width: width };
-}, function (_a) {
+var StyledPopupCard = common_1.styled(card_1.Card)(function (_a) {
     var transformOrigin = _a.transformOrigin;
     if (transformOrigin == null) {
         return {};
@@ -69,13 +63,13 @@ var StyledPopupCard = common_1.styled(card_1.Card)({
 exports.PopupCard = common_1.createComponent('div')({
     displayName: 'Popup.Card',
     Component: function (_a, ref, Element) {
-        var children = _a.children, model = _a.model, _b = _a.padding, padding = _b === void 0 ? 'l' : _b, _c = _a.depth, depth = _c === void 0 ? 2 : _c, width = _a.width, elemProps = __rest(_a, ["children", "model", "padding", "depth", "width"]);
+        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
         var localModel = common_1.useModelContext(hooks_1.PopupModelContext, model);
         var props = hooks_1.usePopupCard(localModel, elemProps, ref);
         var transformOrigin = React.useMemo(function () {
             return getTransformFromPlacement_1.getTransformFromPlacement(localModel.state.placement || 'bottom');
         }, [localModel.state.placement]);
-        return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, depth: depth, width: width, padding: padding }, props),
+        return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 2, maxWidth: "calc(100vw - " + tokens_1.space.l + ")" }, props),
             React.createElement(card_1.Card.Body, null, children)));
     },
 });

package/dist/commonjs/popup/lib/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
 export * from './useAssistiveHideSiblings';
 export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
+export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
@@ -15,4 +16,6 @@ export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
 export * from './useReturnFocus';
+export * from './useTransferOnFullscreenEnter';
+export * from './useTransferOnFullscreenExit';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/popup/lib/hooks/index.d.ts.map

@@ -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"}
+{"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"}

package/dist/commonjs/popup/lib/hooks/index.js

@@ -7,6 +7,7 @@ __export(require("./useAlwaysCloseOnOutsideClick"));
 __export(require("./useAssistiveHideSiblings"));
 __export(require("./useBringToTopOnClick"));
 __export(require("./useCloseOnEscape"));
+__export(require("./useCloseOnFullscreenExit"));
 __export(require("./useCloseOnOutsideClick"));
 __export(require("./useDisableBodyScroll"));
 __export(require("./useFocusRedirect"));
@@ -20,3 +21,5 @@ __export(require("./usePopupPopper"));
 __export(require("./usePopupStack"));
 __export(require("./usePopupTarget"));
 __export(require("./useReturnFocus"));
+__export(require("./useTransferOnFullscreenEnter"));
+__export(require("./useTransferOnFullscreenExit"));

package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
+ * the entire screen. This should be added to popup types that are very context sensitive like
+ * Tooltips.
+ */
+export declare const useCloseOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useCloseOnFullscreenExit.d.ts.map

package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnFullscreenExit.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,sIA0BpC,CAAC"}

package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var screenfull_1 = __importDefault(require("screenfull"));
+/**
+ * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
+ * the entire screen. This should be added to popup types that are very context sensitive like
+ * Tooltips.
+ */
+exports.useCloseOnFullscreenExit = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = react_1.default.useCallback(function (event) {
+        if (!screenfull_1.default.isFullscreen) {
+            model.events.hide({ event: event });
+        }
+    }, [model.events]);
+    var visible = model.state.visibility !== 'hidden';
+    react_1.default.useEffect(function () {
+        if (!visible) {
+            return;
+        }
+        if (screenfull_1.default.isEnabled) {
+            screenfull_1.default.on('change', handler);
+            return function () {
+                screenfull_1.default.off('change', handler);
+            };
+        }
+        return;
+    }, [handler, visible]);
+    return elemProps;
+};

package/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts.map

@@ -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"}
+{"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"}

package/dist/commonjs/popup/lib/hooks/usePopupStack.js

@@ -61,8 +61,8 @@ exports.usePopupStack = function (ref, target) {
                 ? target.current || undefined
                 : target
             : undefined;
-        canvas_kit_popup_stack_1.PopupStack.add({ element: localRef.current, owner: targetEl });
         var element = localRef.current;
+        canvas_kit_popup_stack_1.PopupStack.add({ element: element, owner: targetEl });
         return function () {
             canvas_kit_popup_stack_1.PopupStack.remove(element);
         };

package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map

package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransferOnFullscreenEnter.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenEnter.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,sIA6BxC,CAAC"}

package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var screenfull_1 = __importDefault(require("screenfull"));
+var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+exports.useTransferOnFullscreenEnter = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = react_1.default.useCallback(function (event) {
+        if (screenfull_1.default.isFullscreen && model.state.stackRef.current) {
+            canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({
+                element: model.state.stackRef.current,
+                owner: model.state.targetRef.current,
+            });
+        }
+    }, [model.state.stackRef, model.state.targetRef]);
+    var visible = model.state.visibility !== 'hidden';
+    react_1.default.useEffect(function () {
+        if (!visible) {
+            return;
+        }
+        if (screenfull_1.default.isEnabled) {
+            screenfull_1.default.on('change', handler);
+            return function () {
+                screenfull_1.default.off('change', handler);
+            };
+        }
+        return;
+    }, [handler, visible]);
+    return elemProps;
+};

package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map

package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransferOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenExit.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,sIA6BvC,CAAC"}

package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var screenfull_1 = __importDefault(require("screenfull"));
+var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+exports.useTransferOnFullscreenExit = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = react_1.default.useCallback(function (event) {
+        if (!screenfull_1.default.isFullscreen && model.state.stackRef.current) {
+            canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({
+                element: model.state.stackRef.current,
+                owner: model.state.targetRef.current,
+            });
+        }
+    }, [model.state.stackRef, model.state.targetRef]);
+    var visible = model.state.visibility !== 'hidden';
+    react_1.default.useEffect(function () {
+        if (!visible) {
+            return;
+        }
+        if (screenfull_1.default.isEnabled) {
+            screenfull_1.default.on('change', handler);
+            return function () {
+                screenfull_1.default.off('change', handler);
+            };
+        }
+        return;
+    }, [handler, visible]);
+    return elemProps;
+};

package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map

@@ -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"}
+{"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"}

package/dist/commonjs/tooltip/lib/useTooltip.js

@@ -86,6 +86,7 @@ function useTooltip(_a) {
     };
     popup_1.useCloseOnEscape(popupModel);
     popup_1.useAlwaysCloseOnOutsideClick(popupModel);
+    popup_1.useCloseOnFullscreenExit(popupModel);
     var visible = popupModel.state.visibility !== 'hidden';
     return {
         /** Mix these properties into the target element. **Must be an Element** */

package/dist/es6/common/lib/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './StaticStates';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/common/lib/utils/index.d.ts.map

@@ -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"}
+{"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"}

package/dist/es6/common/lib/utils/index.js

@@ -10,5 +10,6 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './StaticStates';

package/dist/es6/common/lib/utils/useIsFullscreen.d.ts

@@ -0,0 +1,2 @@
+export declare const useIsFullscreen: () => boolean;
+//# sourceMappingURL=useIsFullscreen.d.ts.map

package/dist/es6/common/lib/utils/useIsFullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsFullscreen.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useIsFullscreen.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,eAgB3B,CAAC"}

package/dist/es6/common/lib/utils/useIsFullscreen.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import screenfull from 'screenfull';
+export var useIsFullscreen = function () {
+    var _a = React.useState(false), isFullscreen = _a[0], setIsFullscreen = _a[1];
+    var handler = React.useCallback(function () {
+        setIsFullscreen(screenfull.isFullscreen);
+    }, []);
+    React.useEffect(function () {
+        screenfull.on('change', handler);
+        return function () {
+            screenfull.off('change', handler);
+        };
+    }, [handler]);
+    return isFullscreen;
+};

package/dist/es6/loading-animation/lib/LoadingDots.js

@@ -26,8 +26,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { keyframes } from '@emotion/core';
-import styled from '@emotion/styled';
 import canvas, { borderRadius } from '@workday/canvas-kit-react/tokens';
+import { styled } from '@workday/canvas-kit-react/common';
 /**
  * Keyframe for the dots loading animation.
  */

package/dist/es6/popup/lib/PopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0CD,eAAO,MAAM,SAAS,gEA0BpB,CAAC"}
+{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS,gEAuBpB,CAAC"}

package/dist/es6/popup/lib/PopupCard.js

@@ -35,13 +35,7 @@ var popupAnimation = function (transformOrigin) {
     var translate = getTranslateFromOrigin(transformOrigin, space.xxs);
     return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "], ["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "])), translate.x, translate.y);
 };
-var StyledPopupCard = styled(Card)({
-    position: 'relative',
-    maxWidth: "calc(100vw - " + space.l + ")",
-}, function (_a) {
-    var width = _a.width;
-    return width && { width: width };
-}, function (_a) {
+var StyledPopupCard = styled(Card)(function (_a) {
     var transformOrigin = _a.transformOrigin;
     if (transformOrigin == null) {
         return {};
@@ -60,13 +54,13 @@ var StyledPopupCard = styled(Card)({
 export var PopupCard = createComponent('div')({
     displayName: 'Popup.Card',
     Component: function (_a, ref, Element) {
-        var children = _a.children, model = _a.model, _b = _a.padding, padding = _b === void 0 ? 'l' : _b, _c = _a.depth, depth = _c === void 0 ? 2 : _c, width = _a.width, elemProps = __rest(_a, ["children", "model", "padding", "depth", "width"]);
+        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
         var localModel = useModelContext(PopupModelContext, model);
         var props = usePopupCard(localModel, elemProps, ref);
         var transformOrigin = React.useMemo(function () {
             return getTransformFromPlacement(localModel.state.placement || 'bottom');
         }, [localModel.state.placement]);
-        return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, depth: depth, width: width, padding: padding }, props),
+        return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 2, maxWidth: "calc(100vw - " + space.l + ")" }, props),
             React.createElement(Card.Body, null, children)));
     },
 });

package/dist/es6/popup/lib/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
 export * from './useAssistiveHideSiblings';
 export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
+export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
@@ -15,4 +16,6 @@ export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
 export * from './useReturnFocus';
+export * from './useTransferOnFullscreenEnter';
+export * from './useTransferOnFullscreenExit';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/popup/lib/hooks/index.d.ts.map

@@ -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"}
+{"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"}

package/dist/es6/popup/lib/hooks/index.js

@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
 export * from './useAssistiveHideSiblings';
 export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
+export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
@@ -15,3 +16,5 @@ export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
 export * from './useReturnFocus';
+export * from './useTransferOnFullscreenEnter';
+export * from './useTransferOnFullscreenExit';

package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
+ * the entire screen. This should be added to popup types that are very context sensitive like
+ * Tooltips.
+ */
+export declare const useCloseOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useCloseOnFullscreenExit.d.ts.map

package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnFullscreenExit.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,sIA0BpC,CAAC"}

package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import screenfull from 'screenfull';
+/**
+ * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
+ * the entire screen. This should be added to popup types that are very context sensitive like
+ * Tooltips.
+ */
+export var useCloseOnFullscreenExit = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = React.useCallback(function (event) {
+        if (!screenfull.isFullscreen) {
+            model.events.hide({ event: event });
+        }
+    }, [model.events]);
+    var visible = model.state.visibility !== 'hidden';
+    React.useEffect(function () {
+        if (!visible) {
+            return;
+        }
+        if (screenfull.isEnabled) {
+            screenfull.on('change', handler);
+            return function () {
+                screenfull.off('change', handler);
+            };
+        }
+        return;
+    }, [handler, visible]);
+    return elemProps;
+};

package/dist/es6/popup/lib/hooks/usePopupStack.d.ts.map

@@ -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"}
+{"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"}

package/dist/es6/popup/lib/hooks/usePopupStack.js

@@ -56,8 +56,8 @@ export var usePopupStack = function (ref, target) {
                 ? target.current || undefined
                 : target
             : undefined;
-        PopupStack.add({ element: localRef.current, owner: targetEl });
         var element = localRef.current;
+        PopupStack.add({ element: element, owner: targetEl });
         return function () {
             PopupStack.remove(element);
         };

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransferOnFullscreenEnter.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenEnter.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,sIA6BxC,CAAC"}

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import screenfull from 'screenfull';
+import { PopupStack } from '@workday/canvas-kit-popup-stack';
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export var useTransferOnFullscreenEnter = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = React.useCallback(function (event) {
+        if (screenfull.isFullscreen && model.state.stackRef.current) {
+            PopupStack.transferToCurrentContext({
+                element: model.state.stackRef.current,
+                owner: model.state.targetRef.current,
+            });
+        }
+    }, [model.state.stackRef, model.state.targetRef]);
+    var visible = model.state.visibility !== 'hidden';
+    React.useEffect(function () {
+        if (!visible) {
+            return;
+        }
+        if (screenfull.isEnabled) {
+            screenfull.on('change', handler);
+            return function () {
+                screenfull.off('change', handler);
+            };
+        }
+        return;
+    }, [handler, visible]);
+    return elemProps;
+};

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransferOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenExit.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,sIA6BvC,CAAC"}

package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import screenfull from 'screenfull';
+import { PopupStack } from '@workday/canvas-kit-popup-stack';
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export var useTransferOnFullscreenExit = function (model, elemProps) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var handler = React.useCallback(function (event) {
+        if (!screenfull.isFullscreen && model.state.stackRef.current) {
+            PopupStack.transferToCurrentContext({
+                element: model.state.stackRef.current,
+                owner: model.state.targetRef.current,
+            });
+        }
+    }, [model.state.stackRef, model.state.targetRef]);
+    var visible = model.state.visibility !== 'hidden';
+    React.useEffect(function () {
+        if (!visible) {
+            return;
+        }
+        if (screenfull.isEnabled) {
+            screenfull.on('change', handler);
+            return function () {
+                screenfull.off('change', handler);
+            };
+        }
+        return;
+    }, [handler, visible]);
+    return elemProps;
+};

package/dist/es6/tooltip/lib/useTooltip.d.ts.map

@@ -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"}
+{"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"}

package/dist/es6/tooltip/lib/useTooltip.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import uuid from 'uuid/v4';
-import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, } from '@workday/canvas-kit-react/popup';
+import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, useCloseOnFullscreenExit, } from '@workday/canvas-kit-react/popup';
 var useIntentTimer = function (fn, waitMs) {
     if (waitMs === void 0) { waitMs = 0; }
     var timer = React.useRef();
@@ -74,6 +74,7 @@ export function useTooltip(_a) {
     };
     useCloseOnEscape(popupModel);
     useAlwaysCloseOnOutsideClick(popupModel);
+    useCloseOnFullscreenExit(popupModel);
     var visible = popupModel.state.visibility !== 'hidden';
     return {
         /** Mix these properties into the target element. **Must be an Element** */

package/loading-animation/lib/LoadingDots.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {keyframes} from '@emotion/core';
-import styled from '@emotion/styled';
 import canvas, {borderRadius} from '@workday/canvas-kit-react/tokens';
+import {styled} from '@workday/canvas-kit-react/common';
 
 /**
  * Keyframe for the dots loading animation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "5.3.3",
+  "version": "5.3.7",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -38,7 +38,8 @@
     "build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
     "prepack": "node ../../utils/publish.js pre react",
     "postpack": "node ../../utils/publish.js post react",
-    "depcheck": "node ../../utils/check-dependencies-exist.js"
+    "depcheck": "node ../../utils/check-dependencies-exist.js",
+    "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
   "keywords": [
     "canvas",
@@ -57,9 +58,9 @@
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
     "@workday/canvas-depth-web": "^0.16.4",
-    "@workday/canvas-kit-labs-react": "^5.3.3",
-    "@workday/canvas-kit-popup-stack": "^5.3.3",
-    "@workday/canvas-kit-preview-react": "^5.3.3",
+    "@workday/canvas-kit-labs-react": "^5.3.7",
+    "@workday/canvas-kit-popup-stack": "^5.3.7",
+    "@workday/canvas-kit-preview-react": "^5.3.7",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -69,11 +70,12 @@
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
     "rtl-css-js": "^1.14.1",
+    "screenfull": "^5.2.0",
     "uuid": "^3.3.3"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "a7a2e0b0ba0e84487df0113fba21b4f22dcd38e9"
+  "gitHead": "d7096891da046c15c1c57f03c9486c700c837c8a"
 }

package/popup/lib/PopupCard.tsx

@@ -42,36 +42,25 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
 
 const StyledPopupCard = styled(Card)<
   StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(
-  {
-    position: 'relative',
-    maxWidth: `calc(100vw - ${space.l})`,
-  },
-  ({width}) => width && {width},
-  ({transformOrigin}) => {
-    if (transformOrigin == null) {
-      return {};
-    }
-    return {
-      animation: popupAnimation(transformOrigin),
-      animationDuration: '150ms',
-      animationTimingFunction: 'ease-out',
-      transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-      // Allow overriding of animation in special cases
-      '.wd-no-animation &': {
-        animation: 'none',
-      },
-    };
+>(({transformOrigin}) => {
+  if (transformOrigin == null) {
+    return {};
   }
-);
+  return {
+    animation: popupAnimation(transformOrigin),
+    animationDuration: '150ms',
+    animationTimingFunction: 'ease-out',
+    transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
+    // Allow overriding of animation in special cases
+    '.wd-no-animation &': {
+      animation: 'none',
+    },
+  };
+});
 
 export const PopupCard = createComponent('div')({
   displayName: 'Popup.Card',
-  Component: (
-    {children, model, padding = 'l', depth = 2, width, ...elemProps}: PopupCardProps,
-    ref,
-    Element
-  ) => {
+  Component: ({children, model, ...elemProps}: PopupCardProps, ref, Element) => {
     const localModel = useModelContext(PopupModelContext, model);
     const props = usePopupCard(localModel, elemProps, ref);
     const transformOrigin = React.useMemo(() => {
@@ -82,9 +71,10 @@ export const PopupCard = createComponent('div')({
       <StyledPopupCard
         as={Element}
         transformOrigin={transformOrigin}
-        depth={depth}
-        width={width}
-        padding={padding}
+        position="relative"
+        padding="l"
+        depth={2}
+        maxWidth={`calc(100vw - ${space.l})`}
         {...props}
       >
         <Card.Body>{children}</Card.Body>

package/popup/lib/hooks/index.ts

@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
 export * from './useAssistiveHideSiblings';
 export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
+export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
@@ -15,3 +16,5 @@ export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
 export * from './useReturnFocus';
+export * from './useTransferOnFullscreenEnter';
+export * from './useTransferOnFullscreenExit';

package/popup/lib/hooks/useCloseOnFullscreenExit.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import screenfull from 'screenfull';
+
+import {PopupModel} from './usePopupModel';
+
+/**
+ * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
+ * the entire screen. This should be added to popup types that are very context sensitive like
+ * Tooltips.
+ */
+export const useCloseOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
+  const handler = React.useCallback(
+    event => {
+      if (!screenfull.isFullscreen) {
+        model.events.hide({event});
+      }
+    },
+    [model.events]
+  );
+
+  const visible = model.state.visibility !== 'hidden';
+
+  React.useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    if (screenfull.isEnabled) {
+      screenfull.on('change', handler);
+      return () => {
+        screenfull.off('change', handler);
+      };
+    }
+    return;
+  }, [handler, visible]);
+
+  return elemProps;
+};

package/popup/lib/hooks/usePopupStack.ts

@@ -64,8 +64,9 @@ export const usePopupStack = <E extends HTMLElement>(
         ? target.current || undefined
         : target
       : undefined;
-    PopupStack.add({element: localRef.current!, owner: targetEl});
     const element = localRef.current!;
+
+    PopupStack.add({element: element, owner: targetEl});
     return () => {
       PopupStack.remove(element);
     };

package/popup/lib/hooks/useTransferOnFullscreenEnter.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import screenfull from 'screenfull';
+
+import {PopupModel} from './usePopupModel';
+import {PopupStack} from '@workday/canvas-kit-popup-stack';
+
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export const useTransferOnFullscreenEnter = (model: PopupModel, elemProps = {}) => {
+  const handler = React.useCallback(
+    event => {
+      if (screenfull.isFullscreen && model.state.stackRef.current) {
+        PopupStack.transferToCurrentContext({
+          element: model.state.stackRef.current,
+          owner: model.state.targetRef.current!,
+        });
+      }
+    },
+    [model.state.stackRef, model.state.targetRef]
+  );
+
+  const visible = model.state.visibility !== 'hidden';
+
+  React.useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    if (screenfull.isEnabled) {
+      screenfull.on('change', handler);
+      return () => {
+        screenfull.off('change', handler);
+      };
+    }
+    return;
+  }, [handler, visible]);
+
+  return elemProps;
+};

package/popup/lib/hooks/useTransferOnFullscreenExit.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import screenfull from 'screenfull';
+
+import {PopupModel} from './usePopupModel';
+import {PopupStack} from '@workday/canvas-kit-popup-stack';
+
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export const useTransferOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
+  const handler = React.useCallback(
+    event => {
+      if (!screenfull.isFullscreen && model.state.stackRef.current) {
+        PopupStack.transferToCurrentContext({
+          element: model.state.stackRef.current,
+          owner: model.state.targetRef.current!,
+        });
+      }
+    },
+    [model.state.stackRef, model.state.targetRef]
+  );
+
+  const visible = model.state.visibility !== 'hidden';
+
+  React.useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    if (screenfull.isEnabled) {
+      screenfull.on('change', handler);
+      return () => {
+        screenfull.off('change', handler);
+      };
+    }
+    return;
+  }, [handler, visible]);
+
+  return elemProps;
+};

package/tooltip/lib/useTooltip.tsx

@@ -4,6 +4,7 @@ import {
   useCloseOnEscape,
   useAlwaysCloseOnOutsideClick,
   usePopupModel,
+  useCloseOnFullscreenExit,
 } from '@workday/canvas-kit-react/popup';
 
 const useIntentTimer = (fn: Function, waitMs: number = 0): {start(): void; clear(): void} => {
@@ -126,6 +127,7 @@ export function useTooltip<T extends Element = Element>({
 
   useCloseOnEscape(popupModel);
   useAlwaysCloseOnOutsideClick(popupModel);
+  useCloseOnFullscreenExit(popupModel);
 
   const visible = popupModel.state.visibility !== 'hidden';
 

package/ts3.5/dist/commonjs/common/lib/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './StaticStates';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts

@@ -0,0 +1,2 @@
+export declare const useIsFullscreen: () => boolean;
+//# sourceMappingURL=useIsFullscreen.d.ts.map

package/ts3.5/dist/commonjs/popup/lib/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
 export * from './useAssistiveHideSiblings';
 export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
+export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
@@ -15,4 +16,6 @@ export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
 export * from './useReturnFocus';
+export * from './useTransferOnFullscreenEnter';
+export * from './useTransferOnFullscreenExit';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
+ * the entire screen. This should be added to popup types that are very context sensitive like
+ * Tooltips.
+ */
+export declare const useCloseOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useCloseOnFullscreenExit.d.ts.map

package/ts3.5/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map

package/ts3.5/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map

package/ts3.5/dist/es6/common/lib/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './StaticStates';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/common/lib/utils/useIsFullscreen.d.ts

@@ -0,0 +1,2 @@
+export declare const useIsFullscreen: () => boolean;
+//# sourceMappingURL=useIsFullscreen.d.ts.map

package/ts3.5/dist/es6/popup/lib/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
 export * from './useAssistiveHideSiblings';
 export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
+export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
@@ -15,4 +16,6 @@ export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
 export * from './useReturnFocus';
+export * from './useTransferOnFullscreenEnter';
+export * from './useTransferOnFullscreenExit';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
+ * the entire screen. This should be added to popup types that are very context sensitive like
+ * Tooltips.
+ */
+export declare const useCloseOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useCloseOnFullscreenExit.d.ts.map

package/ts3.5/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map

package/ts3.5/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map