@workday/canvas-kit-react 8.0.0 → 8.0.2

package/dist/es6/modal/lib/ModalCard.js

@@ -10,13 +10,27 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
-import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
+import { space } from '@workday/canvas-kit-react/tokens';
 import { Popup } from '@workday/canvas-kit-react/popup';
 import { useModalCard, useModalModel } from './hooks';
+var ResponsiveModalCard = styled(Popup.Card)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            margin: space.xl
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            margin: space.s,
+            padding: space.xxs,
+            borderRadius: space.m,
+        },
+        _b);
+});
 export var ModalCard = createSubcomponent('div')({
     displayName: 'Modal.Card',
     modelHook: useModalModel,
     elemPropsHook: useModalCard,
 })(function (elemProps, Element) {
-    return (React.createElement(Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl", depth: 6 }, elemProps)));
+    return React.createElement(ResponsiveModalCard, __assign({ as: Element, width: 440, borderWidth: 0, depth: 6 }, elemProps));
 });

package/dist/es6/modal/lib/ModalHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeading.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;CAAG;AAEvF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAMvB,CAAC"}
+{"version":3,"file":"ModalHeading.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;CAAG;AAQvF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAMvB,CAAC"}

package/dist/es6/modal/lib/ModalHeading.js

@@ -10,13 +10,23 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
-import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
+import { space } from '@workday/canvas-kit-react/tokens';
 import { useModalHeading, useModalModel } from './hooks';
+var ResponsiveModalHeading = styled(Popup.Heading)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {},
+        _b[theme.canvas.breakpoints.down('s')] = {
+            marginBottom: space.zero,
+        },
+        _b);
+});
 export var ModalHeading = createSubcomponent('h2')({
     displayName: 'Modal.Heading',
     modelHook: useModalModel,
     elemPropsHook: useModalHeading,
 })(function (elemProps, Element) {
-    return React.createElement(Popup.Heading, __assign({ as: Element }, elemProps));
+    return React.createElement(ResponsiveModalHeading, __assign({ as: Element }, elemProps));
 });

package/dist/es6/modal/lib/ModalOverlay.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface ModalOverlayProps extends BoxProps {
-    children: React.ReactNode;
 }
 export declare const ModalOverlay: import("../../common").ElementComponentM<"div", ModalOverlayProps, {
     state: {

package/dist/es6/modal/lib/ModalOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA+CD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}
+{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;CAAG;AA4CtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}

package/dist/es6/modal/lib/ModalOverlay.js

@@ -40,20 +40,23 @@ var Container = styled(Box)({
 // positioning, but seems to when using flexbox centering. This messes up Popper calculations inside
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
-var CenteringContainer = styled('div')({
-    maxHeight: '100vh',
-    display: 'flex',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    // IE11 fix for setting min-height in a flex container
-    ':before': {
-        display: 'block',
-        content: "''",
-        height: '100vh',
-    },
+var ResponsiveContainer = styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            maxHeight: '100vh',
+            display: 'flex',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh'
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            alignItems: 'end',
+        },
+        _b);
 });
 export var ModalOverlay = createSubcomponent('div')({
     displayName: 'Modal.Overlay',
@@ -77,13 +80,15 @@ var OpenModalOverlay = createSubcomponent('div')({
 })(function (elemProps, Element, model) {
     var windowSize = useWindowSize();
     var content = (React.createElement(Container, __assign({ as: Element }, elemProps),
-        React.createElement(CenteringContainer
+        React.createElement(ResponsiveContainer
         // make sure the centering container is an even number of pixels to avoid sub-pixel
         // inaccuracies due to centering
         , { 
             // make sure the centering container is an even number of pixels to avoid sub-pixel
             // inaccuracies due to centering
-            style: { width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw' } }, elemProps.children)));
+            style: {
+                width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw',
+            } }, elemProps.children)));
     // only render something on the client
     if (typeof window !== 'undefined') {
         return ReactDOM.createPortal(content, model.state.stackRef.current);

package/dist/es6/modal/lib/hooks/useCloseOnOverlayClick.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCloseOnOverlayClick.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useCloseOnOverlayClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;OA8CjC,CAAC"}
+{"version":3,"file":"useCloseOnOverlayClick.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useCloseOnOverlayClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;OAgDjC,CAAC"}

package/dist/es6/modal/lib/hooks/useCloseOnOverlayClick.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PopupStack } from '@workday/canvas-kit-popup-stack';
-import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { createElemPropsHook, useModalityType } from '@workday/canvas-kit-react/common';
 import { usePopupModel } from '@workday/canvas-kit-react/popup';
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
@@ -8,6 +8,7 @@ import { usePopupModel } from '@workday/canvas-kit-react/popup';
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
 export var useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(function (model) {
+    var modality = useModalityType();
     var onClick = React.useCallback(function (event) {
         if (!model.state.stackRef.current) {
             return;
@@ -24,12 +25,13 @@ export var useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(function
             element = (element === null || element === void 0 ? void 0 : element.parentElement) || null;
         }
         if (dialog &&
+            modality !== 'touch' &&
             elements.length &&
             elements[elements.length - 1] === model.state.stackRef.current &&
             elementsBetweenDialogAnBody.some(function (element) { return element === event.target; })) {
             model.events.hide(event);
         }
-    }, [model.state.stackRef, model.events]);
+    }, [model.state.stackRef, model.events, modality]);
     var visible = model.state.visibility !== 'hidden';
     React.useLayoutEffect(function () {
         var _a;

package/dist/es6/modal/lib/hooks/useModalModel.js

@@ -1,5 +1,5 @@
 import { usePopupModel, useInitialFocus, useReturnFocus, useCloseOnEscape, useFocusTrap, useAssistiveHideSiblings, useDisableBodyScroll, } from '@workday/canvas-kit-react/popup';
-import { createModelHook } from '../../../common';
+import { createModelHook } from '@workday/canvas-kit-react/common';
 import { useCloseOnOverlayClick } from './useCloseOnOverlayClick';
 export var useModalModel = createModelHook({
     defaultConfig: usePopupModel.defaultConfig,

package/dist/es6/pagination/lib/Pagination/AdditionalDetails.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PaginationModel } from './types';
 import { FlexProps } from '@workday/canvas-kit-react/layout';
-export interface AdditionalDetailsProps extends FlexProps {
+export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
     children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
     model: PaginationModel;
     shouldAnnounceToScreenReader?: boolean;

package/dist/es6/pagination/lib/Pagination/AdditionalDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdditionalDetails.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/AdditionalDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE,KAAK,EAAE,eAAe,CAAC;IACvB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAuBD,eAAO,MAAM,iBAAiB,oEAK3B,sBAAsB,gBAQxB,CAAC"}
+{"version":3,"file":"AdditionalDetails.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/AdditionalDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE,KAAK,EAAE,eAAe,CAAC;IACvB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAiBD,eAAO,MAAM,iBAAiB,oEAK3B,sBAAsB,gBAaxB,CAAC"}

package/dist/es6/pagination/lib/Pagination/AdditionalDetails.js

@@ -21,22 +21,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { type, typeColors, space } from '@workday/canvas-kit-react/tokens';
+import { type, space, typeColors } from '@workday/canvas-kit-react/tokens';
 import { accessibleHide, styled } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { useLiveRegion } from './common/useLiveRegion';
 var StyledAdditionalDetails = styled(Flex)(function (_a) {
     var shouldHideDetails = _a.shouldHideDetails;
-    var styles = __assign(__assign({}, type.levels.subtext.medium), { color: typeColors.hint });
     if (shouldHideDetails) {
-        return __assign(__assign(__assign({}, styles), accessibleHide), { marginTop: space.zero });
+        return __assign(__assign({}, accessibleHide), { marginTop: space.zero });
     }
     else {
-        return __assign(__assign({}, styles), { marginTop: space.xs });
+        return {
+            marginTop: space.xs,
+        };
     }
 });
 export var AdditionalDetails = function (_a) {
     var model = _a.model, children = _a.children, shouldAnnounceToScreenReader = _a.shouldAnnounceToScreenReader, elemProps = __rest(_a, ["model", "children", "shouldAnnounceToScreenReader"]);
     var liveRegionProps = useLiveRegion({ shouldAnnounceToScreenReader: shouldAnnounceToScreenReader });
-    return (React.createElement(StyledAdditionalDetails, __assign({}, liveRegionProps, elemProps), typeof children === 'function' ? children(model) : children));
+    return (React.createElement(StyledAdditionalDetails, __assign({}, type.levels.subtext.medium, { color: typeColors.hint }, liveRegionProps, elemProps), typeof children === 'function' ? children(model) : children));
 };

package/dist/es6/pagination/lib/Pagination/GoTo/Label.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PaginationModel } from '../types';
-export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+export interface GoToLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> {
     model: PaginationModel;
     /**
      * Accepts child elements or a render prop.

package/dist/es6/pagination/lib/Pagination/GoTo/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACjF,KAAK,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;CAC1E;AAQD,eAAO,MAAM,SAAS,sCAAqC,cAAc,gBAMxE,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACrE,KAAK,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;CAC1E;AAED,eAAO,MAAM,SAAS,sCAAqC,cAAc,gBAMxE,CAAC"}

package/dist/es6/pagination/lib/Pagination/GoTo/Label.js

@@ -21,10 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { type, typeColors } from '@workday/canvas-kit-react/tokens';
-import { styled } from '@workday/canvas-kit-react/common';
-var StyledLabel = styled('label')(__assign(__assign({}, type.levels.subtext.medium), { color: typeColors.hint, whiteSpace: 'nowrap' }));
+import { LabelText } from '@workday/canvas-kit-react/text';
 export var GoToLabel = function (_a) {
     var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-    return (React.createElement(StyledLabel, __assign({}, elemProps), typeof children === 'function' ? children(model) : children));
+    return (React.createElement(LabelText, __assign({ typeLevel: "subtext.medium", variant: "hint", whiteSpace: "nowrap" }, elemProps), typeof children === 'function' ? children(model) : children));
 };

package/dist/es6/pagination/lib/Pagination/PageList.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PaginationModel } from './types';
 import { ListItemProps } from './common/List';
 import { HStackProps } from '@workday/canvas-kit-react/layout';
-export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing'> {
+export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing' | 'children'> {
     model: PaginationModel;
     children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
 }

package/dist/es6/pagination/lib/Pagination/PageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageList.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAW,aAAa,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAErE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,SAAS,CAAC;IACxE,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED,eAAO,MAAM,QAAQ,sCAAqC,aAAa,gBActE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,aAAa,CAAC;AAE9C,eAAO,MAAM,YAAY,+BAA8B,iBAAiB,gBAEvE,CAAC"}
+{"version":3,"file":"PageList.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAW,aAAa,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAErE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC;IACrF,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED,eAAO,MAAM,QAAQ,sCAAqC,aAAa,gBActE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,aAAa,CAAC;AAE9C,eAAO,MAAM,YAAY,+BAA8B,iBAAiB,gBAEvE,CAAC"}

package/dist/es6/pagination/lib/Pagination/usePaginationModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePaginationModel.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/usePaginationModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,oBAAY,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,0EAM5B,wBAAwB,KAAG,eAgE7B,CAAC"}
+{"version":3,"file":"usePaginationModel.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/usePaginationModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,oBAAY,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,0EAM5B,wBAAwB,KAAG,eAmE7B,CAAC"}

package/dist/es6/pagination/lib/Pagination/usePaginationModel.js

@@ -5,7 +5,11 @@ export var usePaginationModel = function (_a) {
     var _b = _a.firstPage, firstPage = _b === void 0 ? 1 : _b, _c = _a.initialCurrentPage, initialCurrentPage = _c === void 0 ? 1 : _c, lastPage = _a.lastPage, _d = _a.rangeSize, rangeSize = _d === void 0 ? 5 : _d, onPageChange = _a.onPageChange;
     var _e = React.useState(initialCurrentPage), currentPage = _e[0], setCurrentPage = _e[1];
     var changePage = function (page) {
-        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page);
+        // Don't fire an `onPageChange` event if the page number is the same as the current page.
+        // `setCurrentPage` doesn't need this check, because React won't update the state if the values are the same.
+        if (currentPage !== page) {
+            onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page);
+        }
         setCurrentPage(page);
     };
     var first = function () {

package/dist/es6/popup/lib/Popup.d.ts

@@ -106,7 +106,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+    Body: import("../../common").ElementComponentM<"div", import("../..").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").GridItemStyleProps & import("../..").LayoutStyleProps & import("../..").OtherStyleProps & import("../..").PositionStyleProps & import("../..").SpaceStyleProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;

package/dist/es6/popup/lib/PopupBody.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare const PopupBody: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+export declare const PopupBody: import("../../common").ElementComponentM<"div", import("../..").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").GridItemStyleProps & import("../..").LayoutStyleProps & import("../..").OtherStyleProps & import("../..").PositionStyleProps & import("../..").SpaceStyleProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;

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

@@ -17,5 +17,5 @@ export var PopupBody = createSubcomponent('div')({
     displayName: 'Popup.Body',
     modelHook: usePopupModel,
 })(function (elemProps) {
-    return React.createElement(Card.Body, __assign({ overflowY: "auto" }, elemProps));
+    return React.createElement(Card.Body, __assign({ overflowY: "auto", padding: "xxs" }, elemProps));
 });

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Card } from '@workday/canvas-kit-react/card';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { StackStyleProps } from '@workday/canvas-kit-react/layout';
-export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
+import { FlexStyleProps } from '@workday/canvas-kit-react/layout';
+export declare type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
+export interface PopupCardProps extends FlexAndBoxProps {
     children?: React.ReactNode;
 }
 export declare const PopupCard: import("../../common").ElementComponentM<"div", PopupCardProps, {

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,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAQ,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAKxE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAgCpB,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,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0CD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAgCpB,CAAC"}

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

@@ -29,28 +29,36 @@ import { keyframes } from '@emotion/react';
 import { Card } from '@workday/canvas-kit-react/card';
 import { space, type } from '@workday/canvas-kit-react/tokens';
 import { styled, getTranslateFromOrigin, useConstant, createSubcomponent, } from '@workday/canvas-kit-react/common';
-import { Stack } from '@workday/canvas-kit-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { getTransformFromPlacement } from './getTransformFromPlacement';
 import { usePopupCard, usePopupModel } from './hooks';
 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)(type.levels.subtext.large, function (_a) {
-    var transformOrigin = _a.transformOrigin;
+var StyledPopupCard = styled(Card)(function (_a) {
+    var _b;
+    var transformOrigin = _a.transformOrigin, theme = _a.theme;
     if (transformOrigin == null) {
         return {};
     }
-    return {
-        animation: popupAnimation(transformOrigin),
-        animationDuration: '150ms',
-        animationTimingFunction: 'ease-out',
-        transformOrigin: transformOrigin.vertical + " " + transformOrigin.horizontal,
+    return _b = {
+            animation: popupAnimation(transformOrigin),
+            animationDuration: '150ms',
+            animationTimingFunction: 'ease-out',
+            transformOrigin: transformOrigin.vertical + " " + transformOrigin.horizontal
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            animation: popupAnimation({ vertical: 'bottom', horizontal: 'center' }),
+            animationDuration: '150ms',
+            animationTimingFunction: 'ease-out',
+            transformOrigin: 'bottom center',
+        },
         // Allow overriding of animation in special cases
-        '.wd-no-animation &': {
+        _b['.wd-no-animation &'] = {
             animation: 'none',
         },
-    };
+        _b;
 });
 export var PopupCard = createSubcomponent('div')({
     displayName: 'Popup.Card',
@@ -61,9 +69,8 @@ export var PopupCard = createSubcomponent('div')({
     var transformOrigin = React.useMemo(function () {
         return getTransformFromPlacement(model.state.placement || 'bottom');
     }, [model.state.placement]);
-    // As is a Stack that will render an element of `Element`
-    var As = useConstant(function () { return Stack.as(Element); });
-    return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin ? space[elemProps.margin] || elemProps.margin : space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
-     }, elemProps), children));
+    // As is a Flex that will render an element of `Element`
+    var As = useConstant(function () { return Flex.as(Element); });
+    return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", flexDirection: "column", minHeight: 0, padding: "m", maxHeight: "calc(100vh - " + (elemProps.margin ? space[elemProps.margin] || elemProps.margin : space.xl) + " * 2)", overflowY: "auto" }, type.levels.subtext.large, elemProps), children));
 });
 var templateObject_1;

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

@@ -1 +1 @@
-{"version":3,"file":"PopupCloseButton.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;EAM3B,CAAC"}
+{"version":3,"file":"PopupCloseButton.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;EAU3B,CAAC"}

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

@@ -30,5 +30,5 @@ export var PopupCloseButton = createSubcomponent(SecondaryButton)({
     elemPropsHook: usePopupCloseButton,
 })(function (_a, Element) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return React.createElement(Element, __assign({}, elemProps), children);
+    return (React.createElement(Element, __assign({ type: "button" }, elemProps), children));
 });

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

@@ -37,5 +37,5 @@ export var PopupCloseIcon = createSubcomponent('button')({
     elemPropsHook: usePopupCloseButton,
 })(function (_a, Element) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return React.createElement(StyledCloseIcon, __assign({ as: Element, size: "medium", icon: xIcon }, elemProps));
+    return React.createElement(StyledCloseIcon, __assign({ as: Element, size: "medium", icon: xIcon, type: "button" }, elemProps));
 });

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

@@ -30,5 +30,5 @@ export var PopupHeading = createSubcomponent('h2')({
     elemPropsHook: usePopupHeading,
 })(function (_a, Element) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(Card.Heading, __assign({ as: Element, marginBottom: "s" }, elemProps), children));
+    return (React.createElement(Card.Heading, __assign({ as: Element, marginBottom: "xxs", padding: "xxs" }, elemProps), children));
 });

package/dist/es6/popup/lib/PopupPopper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Placement, PopperOptions } from './Popper';
-export interface PopupPopperProps {
+import { Placement, PopperOptions, PopperProps } from './Popper';
+export interface PopupPopperProps extends PopperProps {
     /**
      * The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,
      * `right`, `bottom`, or `left`. Each placement can also be modified using any of the following
@@ -12,7 +12,6 @@ export interface PopupPopperProps {
      * The additional options passed to the Popper's `popper.js` instance.
      */
     popperOptions?: Partial<PopperOptions>;
-    children?: React.ReactNode;
 }
 export declare const PopupPopper: import("../../common").ElementComponentM<"div", PopupPopperProps, {
     state: {

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

@@ -1 +1 @@
-{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAS,MAAM,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}
+{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}

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/popup/lib/hooks/useReturnFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAezB,CAAC"}
+{"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAgGzB,CAAC"}