@workday/canvas-kit-react 8.0.0-alpha.230-next.1 → 8.0.0-alpha.232-next.3

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

@@ -4,6 +4,7 @@ export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
 export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
+export * from './useCloseOnTargetHidden';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
 export * from './useFocusTrap';

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,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,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,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,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,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC"}

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

@@ -16,6 +16,7 @@ __exportStar(require("./useBringToTopOnClick"), exports);
 __exportStar(require("./useCloseOnEscape"), exports);
 __exportStar(require("./useCloseOnFullscreenExit"), exports);
 __exportStar(require("./useCloseOnOutsideClick"), exports);
+__exportStar(require("./useCloseOnTargetHidden"), exports);
 __exportStar(require("./useDisableBodyScroll"), exports);
 __exportStar(require("./useFocusRedirect"), exports);
 __exportStar(require("./useFocusTrap"), exports);

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

@@ -0,0 +1,31 @@
+import React from 'react';
+/**
+ * Sets up an
+ * [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * for the target element. When the target is detected as being less than 50% visible, the popup
+ * will close. Most likely, this will happen if the user scrolls an overflowed content area of the
+ * page and the target is no longer visible.
+ *
+ * This should be used with popup elements that are transitory like Tooltips and dropdown menus.
+ */
+export declare const useCloseOnTargetHidden: <P extends {}, R>(model: {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+//# sourceMappingURL=useCloseOnTargetHidden.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseOnTargetHidden.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnTargetHidden.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;OAiCjC,CAAC"}

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

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCloseOnTargetHidden = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var popup_1 = require("@workday/canvas-kit-react/popup");
+function getScrollParent(element) {
+    if (element === document.body || !element.parentElement) {
+        return element;
+    }
+    var styles = getComputedStyle(element);
+    if (styles.overflowY === 'scroll' ||
+        styles.overflowY === 'auto' ||
+        styles.overflowX === 'scroll' ||
+        styles.overflowX === 'auto') {
+        return element;
+    }
+    return getScrollParent(element.parentElement);
+}
+/**
+ * Sets up an
+ * [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * for the target element. When the target is detected as being less than 50% visible, the popup
+ * will close. Most likely, this will happen if the user scrolls an overflowed content area of the
+ * page and the target is no longer visible.
+ *
+ * This should be used with popup elements that are transitory like Tooltips and dropdown menus.
+ */
+exports.useCloseOnTargetHidden = common_1.createElemPropsHook(popup_1.usePopupModel)(function (model) {
+    var visible = model.state.visibility !== 'hidden';
+    var callback = react_1.default.useCallback(function (entries) {
+        if (entries[0].intersectionRatio < 0.5) {
+            model.events.hide();
+        }
+    }, [model.events]);
+    react_1.default.useLayoutEffect(function () {
+        if (!visible || !model.state.targetRef.current) {
+            return;
+        }
+        var target = model.state.targetRef.current;
+        var scrollParent = getScrollParent(target);
+        // eslint-disable-next-line compat/compat
+        var observer = new IntersectionObserver(callback, {
+            root: scrollParent,
+            threshold: 0.5,
+        });
+        observer.observe(model.state.targetRef.current);
+        return function () {
+            observer.disconnect();
+        };
+    }, [callback, model.state.targetRef, visible]);
+    return {};
+});

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB;;;6GA4D5B,CAAC"}
+{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB;;;6GAkE5B,CAAC"}

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

@@ -55,6 +55,11 @@ exports.TooltipContainer = styled_1.default('div')(__assign(__assign({}, tokens_
             margin: tokens_1.spaceNumbers.xxxs + 2,
         },
     }, 
+    // Hide tooltip when the reference element is either clipped or fully hidden
+    '[data-popper-reference-hidden] &': {
+        visibility: 'hidden',
+        pointerEvents: 'none',
+    }, 
     // Fix offsets based on placement
     '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
         left: -tokens_1.spaceNumbers.xxxs,

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;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;;;;8BA3B5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IAkCtC,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;AAmD/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;IA8CF,2EAA2E;;;;8BA5B5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IAmCtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}

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

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

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

@@ -4,6 +4,7 @@ export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
 export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
+export * from './useCloseOnTargetHidden';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
 export * from './useFocusTrap';

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,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,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,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,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,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC"}

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

@@ -4,6 +4,7 @@ export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
 export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
+export * from './useCloseOnTargetHidden';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
 export * from './useFocusTrap';

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

@@ -0,0 +1,31 @@
+import React from 'react';
+/**
+ * Sets up an
+ * [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * for the target element. When the target is detected as being less than 50% visible, the popup
+ * will close. Most likely, this will happen if the user scrolls an overflowed content area of the
+ * page and the target is no longer visible.
+ *
+ * This should be used with popup elements that are transitory like Tooltips and dropdown menus.
+ */
+export declare const useCloseOnTargetHidden: <P extends {}, R>(model: {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+//# sourceMappingURL=useCloseOnTargetHidden.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseOnTargetHidden.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnTargetHidden.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;OAiCjC,CAAC"}

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { usePopupModel } from '@workday/canvas-kit-react/popup';
+function getScrollParent(element) {
+    if (element === document.body || !element.parentElement) {
+        return element;
+    }
+    var styles = getComputedStyle(element);
+    if (styles.overflowY === 'scroll' ||
+        styles.overflowY === 'auto' ||
+        styles.overflowX === 'scroll' ||
+        styles.overflowX === 'auto') {
+        return element;
+    }
+    return getScrollParent(element.parentElement);
+}
+/**
+ * Sets up an
+ * [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * for the target element. When the target is detected as being less than 50% visible, the popup
+ * will close. Most likely, this will happen if the user scrolls an overflowed content area of the
+ * page and the target is no longer visible.
+ *
+ * This should be used with popup elements that are transitory like Tooltips and dropdown menus.
+ */
+export var useCloseOnTargetHidden = createElemPropsHook(usePopupModel)(function (model) {
+    var visible = model.state.visibility !== 'hidden';
+    var callback = React.useCallback(function (entries) {
+        if (entries[0].intersectionRatio < 0.5) {
+            model.events.hide();
+        }
+    }, [model.events]);
+    React.useLayoutEffect(function () {
+        if (!visible || !model.state.targetRef.current) {
+            return;
+        }
+        var target = model.state.targetRef.current;
+        var scrollParent = getScrollParent(target);
+        // eslint-disable-next-line compat/compat
+        var observer = new IntersectionObserver(callback, {
+            root: scrollParent,
+            threshold: 0.5,
+        });
+        observer.observe(model.state.targetRef.current);
+        return function () {
+            observer.disconnect();
+        };
+    }, [callback, model.state.targetRef, visible]);
+    return {};
+});

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB;;;6GA4D5B,CAAC"}
+{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB;;;6GAkE5B,CAAC"}

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

@@ -49,6 +49,11 @@ export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.su
             margin: spaceNumbers.xxxs + 2,
         },
     }, 
+    // Hide tooltip when the reference element is either clipped or fully hidden
+    '[data-popper-reference-hidden] &': {
+        visibility: 'hidden',
+        pointerEvents: 'none',
+    }, 
     // Fix offsets based on placement
     '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
         left: -spaceNumbers.xxxs,

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;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;;;;8BA3B5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IAkCtC,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;AAmD/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;IA8CF,2EAA2E;;;;8BA5B5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IAmCtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.230-next.1+e0da0524",
+  "version": "8.0.0-alpha.232-next.3+d847ebea",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.230-next.1+e0da0524",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.232-next.3+d847ebea",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "e0da05248437dc3b372d1e4f819676580775237e"
+  "gitHead": "d847ebea604bcd0a3983526c03ce86a74f7adc93"
 }

package/popup/lib/hooks/index.ts

@@ -4,6 +4,7 @@ export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
 export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
+export * from './useCloseOnTargetHidden';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
 export * from './useFocusTrap';

package/popup/lib/hooks/useCloseOnTargetHidden.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {usePopupModel} from '@workday/canvas-kit-react/popup';
+
+function getScrollParent(element: HTMLElement): HTMLElement {
+  if (element === document.body || !element.parentElement) {
+    return element;
+  }
+  const styles = getComputedStyle(element);
+
+  if (
+    styles.overflowY === 'scroll' ||
+    styles.overflowY === 'auto' ||
+    styles.overflowX === 'scroll' ||
+    styles.overflowX === 'auto'
+  ) {
+    return element;
+  }
+
+  return getScrollParent(element.parentElement);
+}
+
+/**
+ * Sets up an
+ * [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * for the target element. When the target is detected as being less than 50% visible, the popup
+ * will close. Most likely, this will happen if the user scrolls an overflowed content area of the
+ * page and the target is no longer visible.
+ *
+ * This should be used with popup elements that are transitory like Tooltips and dropdown menus.
+ */
+export const useCloseOnTargetHidden = createElemPropsHook(usePopupModel)(model => {
+  const visible = model.state.visibility !== 'hidden';
+
+  const callback: IntersectionObserverCallback = React.useCallback(
+    entries => {
+      if (entries[0].intersectionRatio < 0.5) {
+        model.events.hide();
+      }
+    },
+    [model.events]
+  );
+
+  React.useLayoutEffect(() => {
+    if (!visible || !model.state.targetRef.current) {
+      return;
+    }
+
+    const target = model.state.targetRef.current;
+    const scrollParent = getScrollParent(target);
+
+    // eslint-disable-next-line compat/compat
+    const observer = new IntersectionObserver(callback, {
+      root: scrollParent,
+      threshold: 0.5,
+    });
+
+    observer.observe(model.state.targetRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, model.state.targetRef, visible]);
+
+  return {};
+});

package/tooltip/lib/TooltipContainer.tsx

@@ -78,6 +78,12 @@ export const TooltipContainer = styled('div')<TooltipContainerProps>(
       },
     },
 
+    // Hide tooltip when the reference element is either clipped or fully hidden
+    '[data-popper-reference-hidden] &': {
+      visibility: 'hidden',
+      pointerEvents: 'none',
+    },
+
     // Fix offsets based on placement
     '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
       left: -spaceNumbers.xxxs,

package/tooltip/lib/useTooltip.tsx

@@ -4,6 +4,7 @@ import {
   useAlwaysCloseOnOutsideClick,
   usePopupModel,
   useCloseOnFullscreenExit,
+  useCloseOnTargetHidden,
 } from '@workday/canvas-kit-react/popup';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -128,6 +129,7 @@ export function useTooltip<T extends Element = Element>({
   useCloseOnEscape(popupModel);
   useAlwaysCloseOnOutsideClick(popupModel);
   useCloseOnFullscreenExit(popupModel);
+  useCloseOnTargetHidden(popupModel);
 
   const visible = popupModel.state.visibility !== 'hidden';