@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

package/dist/commonjs/modal/lib/ModalBody.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
+export interface ModalBodyProps extends ExtractProps<typeof Popup.Body, never> {
+}
+export declare const ModalBody: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ModalBodyProps, {
+    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: "hidden" | "visible";
+    };
+    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;
+    };
+}>;
+//# sourceMappingURL=ModalBody.d.ts.map

package/dist/commonjs/modal/lib/ModalBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAKtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAYjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAKpB,CAAC"}

package/dist/commonjs/modal/lib/ModalBody.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalBody = void 0;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const hooks_1 = require("./hooks");
+const ResponsiveModalBody = common_1.styled(popup_1.Popup.Body)(({ theme }) => {
+    const { canvas: canvasTheme } = common_1.getTheme(theme);
+    return {
+        [canvasTheme.breakpoints.down('s')]: {
+            marginBottom: tokens_1.space.zero,
+            padding: `${tokens_1.space.xxxs} ${tokens_1.space.xxs} ${tokens_1.space.xxs} ${tokens_1.space.xxs}`,
+        },
+    };
+});
+exports.ModalBody = common_1.createSubcomponent('div')({
+    displayName: 'Modal.Body',
+    modelHook: hooks_1.useModalModel,
+})((elemProps, Element) => {
+    return React.createElement(ResponsiveModalBody, Object.assign({ as: Element }, elemProps));
+});

package/dist/commonjs/modal/lib/ModalCard.d.ts

@@ -3,7 +3,7 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {
 }
-export declare const ModalCard: import("../../common").ElementComponentM<"div", ModalCardProps, {
+export declare const ModalCard: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ModalCardProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -11,7 +11,7 @@ export declare const ModalCard: import("../../common").ElementComponentM<"div",
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {

package/dist/commonjs/modal/lib/ModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.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,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAEjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAQpB,CAAC"}
+{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAcjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -31,14 +20,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalCard = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var hooks_1 = require("./hooks");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const hooks_1 = require("./hooks");
+const ResponsiveModalCard = common_1.styled(popup_1.Popup.Card)(({ theme }) => {
+    const { canvas: canvasTheme } = common_1.getTheme(theme);
+    return {
+        margin: tokens_1.space.xl,
+        [canvasTheme.breakpoints.down('s')]: {
+            margin: tokens_1.space.s,
+            padding: tokens_1.space.s,
+            borderRadius: tokens_1.space.m, // 24px border radius on smaller devices.
+        },
+    };
+});
 exports.ModalCard = common_1.createSubcomponent('div')({
     displayName: 'Modal.Card',
     modelHook: hooks_1.useModalModel,
     elemPropsHook: hooks_1.useModalCard,
-})(function (elemProps, Element) {
-    return (React.createElement(popup_1.Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl", depth: 6 }, elemProps)));
+})((elemProps, Element) => {
+    return React.createElement(ResponsiveModalCard, Object.assign({ as: Element, width: 440, borderWidth: 0, depth: 6 }, elemProps));
 });

package/dist/commonjs/modal/lib/ModalHeading.d.ts

@@ -3,7 +3,7 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {
 }
-export declare const ModalHeading: import("../../common").ElementComponentM<"h2", ModalHeadingProps, {
+export declare const ModalHeading: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", ModalHeadingProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -11,7 +11,7 @@ export declare const ModalHeading: import("../../common").ElementComponentM<"h2"
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {

package/dist/commonjs/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,EAIb,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;AAYvF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAMvB,CAAC"}

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -31,14 +20,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalHeading = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var hooks_1 = require("./hooks");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const hooks_1 = require("./hooks");
+const ResponsiveModalHeading = common_1.styled(popup_1.Popup.Heading)(({ theme }) => {
+    const { canvas: canvasTheme } = common_1.getTheme(theme);
+    return {
+        [canvasTheme.breakpoints.down('s')]: {
+            marginBottom: tokens_1.space.zero,
+            padding: `${tokens_1.space.xxs} ${tokens_1.space.xxs} ${tokens_1.space.xxxs} ${tokens_1.space.xxs}`,
+        },
+    };
+});
 exports.ModalHeading = common_1.createSubcomponent('h2')({
     displayName: 'Modal.Heading',
     modelHook: hooks_1.useModalModel,
     elemPropsHook: hooks_1.useModalHeading,
-})(function (elemProps, Element) {
-    return React.createElement(popup_1.Popup.Heading, __assign({ as: Element }, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(ResponsiveModalHeading, Object.assign({ as: Element }, elemProps));
 });

package/dist/commonjs/modal/lib/ModalOverflowOverlay.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare const ModalOverflowOverlay: import("../../common").ElementComponentM<"div", import("./ModalOverlay").ModalOverlayProps & import("../../common").PropsWithModel<{
+export declare const ModalOverflowOverlay: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ModalOverlay").ModalOverlayProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -7,7 +7,7 @@ export declare const ModalOverflowOverlay: import("../../common").ElementCompone
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -16,7 +16,7 @@ export declare const ModalOverflowOverlay: import("../../common").ElementCompone
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-}>, {
+}, {}>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -24,7 +24,7 @@ export declare const ModalOverflowOverlay: import("../../common").ElementCompone
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {

package/dist/commonjs/modal/lib/ModalOverflowOverlay.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -34,17 +23,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalOverflowOverlay = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var ModalOverlay_1 = require("./ModalOverlay");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var hooks_1 = require("./hooks");
-var StyledOverlay = styled_1.default(ModalOverlay_1.ModalOverlay)({
-    '& > div': { maxHeight: 'inherit' },
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const ModalOverlay_1 = require("./ModalOverlay");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const hooks_1 = require("./hooks");
+const StyledOverlay = styled_1.default(ModalOverlay_1.ModalOverlay)({
+    '& > div': { maxHeight: 'inherit' }, // reset maxHeight of centering div
 });
 exports.ModalOverflowOverlay = common_1.createSubcomponent('div')({
     displayName: 'Modal.OverflowOverlay',
     modelHook: hooks_1.useModalModel,
-})(function (elemProps, Element) {
-    return React.createElement(StyledOverlay, __assign({ as: Element, overflowX: "hidden", overflowY: "auto" }, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(StyledOverlay, Object.assign({ as: Element, overflowX: "hidden", overflowY: "auto" }, elemProps));
 });

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

@@ -1,9 +1,8 @@
 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, {
+export declare const ModalOverlay: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ModalOverlayProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -11,7 +10,7 @@ export declare const ModalOverlay: import("../../common").ElementComponentM<"div
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -21,7 +20,7 @@ export declare const ModalOverlay: import("../../common").ElementComponentM<"div
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }>;
-export declare const useModalOverlay: <P extends {}, R>(model: {
+export declare const useModalOverlay: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -29,7 +28,7 @@ export declare const useModalOverlay: <P extends {}, R>(model: {
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -38,9 +37,7 @@ export declare const useModalOverlay: <P extends {}, R>(model: {
         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) => {
+}, {
     ref: undefined;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=ModalOverlay.d.ts.map

package/dist/commonjs/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;AAc1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;CAAG;AA+CtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;EAQ1B,CAAC"}

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

@@ -1,41 +1,33 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useModalOverlay = exports.ModalOverlay = void 0;
-var react_1 = __importDefault(require("react"));
-var react_dom_1 = __importDefault(require("react-dom"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var react_2 = require("@emotion/react");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var hooks_1 = require("./hooks");
-var fadeIn = react_2.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    background: none;\n  }\n  to {\n    background: rgba(0,0,0,0.65);\n  }\n"], ["\n  from {\n    background: none;\n  }\n  to {\n    background: rgba(0,0,0,0.65);\n  }\n"])));
-var Container = styled_1.default(layout_1.Box)({
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const react_2 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const hooks_1 = require("./hooks");
+const fadeIn = react_2.keyframes `
+  from {
+    background: none;
+  }
+  to {
+    background: rgba(0,0,0,0.65);
+  }
+`;
+const Container = styled_1.default(layout_1.Box)({
     position: 'fixed',
     top: 0,
     left: 0,
     width: '100vw',
     height: '100vh',
     background: 'rgba(0,0,0,0.65)',
-    animationName: "" + fadeIn,
+    animationName: `${fadeIn}`,
     animationDuration: '0.3s',
     // Allow overriding of animation in special cases
     '.wd-no-animation &': {
@@ -46,50 +38,52 @@ var Container = styled_1.default(layout_1.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_1.default('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: "''",
+const ResponsiveContainer = styled_1.default('div')(({ theme }) => {
+    const { canvas: canvasTheme } = common_1.getTheme(theme);
+    return {
+        maxHeight: '100vh',
+        display: 'flex',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
         height: '100vh',
-    },
+        [canvasTheme.breakpoints.down('s')]: {
+            alignItems: 'end',
+        },
+    };
 });
 exports.ModalOverlay = common_1.createSubcomponent('div')({
     displayName: 'Modal.Overlay',
     modelHook: hooks_1.useModalModel,
-})(function (elemProps, Element, model) {
-    return model.state.visibility !== 'hidden' ? (react_1.default.createElement(OpenModalOverlay, __assign({ as: Element, model: model }, elemProps))) : null;
+})((elemProps, Element, model) => {
+    return model.state.visibility !== 'hidden' ? (react_1.default.createElement(OpenModalOverlay, Object.assign({ as: Element, model: model }, elemProps))) : null;
 });
-exports.useModalOverlay = common_1.createElemPropsHook(popup_1.usePopupModel)(function (_a, ref) {
-    var state = _a.state;
-    var elementRef = common_1.useForkRef(ref, state.stackRef);
+exports.useModalOverlay = common_1.createElemPropsHook(popup_1.usePopupModel)(({ state }, ref) => {
+    const elementRef = common_1.useForkRef(ref, state.stackRef);
     popup_1.usePopupStack(elementRef);
     return {
         // The ref should not be applied to an element. The passed ref will apply to the stackRef instead
         ref: undefined,
     };
 });
-var OpenModalOverlay = common_1.createSubcomponent('div')({
+const OpenModalOverlay = common_1.createSubcomponent('div')({
     displayName: 'Modal.OpenOverlay',
     modelHook: hooks_1.useModalModel,
     elemPropsHook: exports.useModalOverlay,
-})(function (elemProps, Element, model) {
-    var windowSize = common_1.useWindowSize();
-    var content = (react_1.default.createElement(Container, __assign({ as: Element }, elemProps),
-        react_1.default.createElement(CenteringContainer
+})((elemProps, Element, model) => {
+    const windowSize = common_1.useWindowSize();
+    const content = (react_1.default.createElement(Container, Object.assign({ as: Element }, elemProps),
+        react_1.default.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 react_dom_1.default.createPortal(content, model.state.stackRef.current);
@@ -98,4 +92,3 @@ var OpenModalOverlay = common_1.createSubcomponent('div')({
         return null;
     }
 });
-var templateObject_1;

package/dist/commonjs/modal/lib/hooks/useCloseOnOverlayClick.d.ts

@@ -4,7 +4,7 @@ import React from 'react';
  * click happened outside the `[role=dialog]` of an overlay component. The difference between `useCloseOnOutsideClick`
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
-export declare const useCloseOnOverlayClick: <P extends {}, R>(model: {
+export declare const useCloseOnOverlayClick: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -12,7 +12,7 @@ export declare const useCloseOnOverlayClick: <P extends {}, R>(model: {
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -21,7 +21,5 @@ export declare const useCloseOnOverlayClick: <P extends {}, R>(model: {
         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=useCloseOnOverlayClick.d.ts.map

package/dist/commonjs/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;;;;;;;;;;;;;;;;;MAgDjC,CAAC"}

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

@@ -4,47 +4,49 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseOnOverlayClick = void 0;
-var react_1 = __importDefault(require("react"));
-var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
+const react_1 = __importDefault(require("react"));
+const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
  * click happened outside the `[role=dialog]` of an overlay component. The difference between `useCloseOnOutsideClick`
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
-exports.useCloseOnOverlayClick = common_1.createElemPropsHook(popup_1.usePopupModel)(function (model) {
-    var onClick = react_1.default.useCallback(function (event) {
+exports.useCloseOnOverlayClick = common_1.createElemPropsHook(popup_1.usePopupModel)(model => {
+    const modality = common_1.useModalityType();
+    const onClick = react_1.default.useCallback((event) => {
         if (!model.state.stackRef.current) {
             return;
         }
-        var elements = canvas_kit_popup_stack_1.PopupStack.getElements()
-            .filter(function (e) { return e.getAttribute('data-behavior-click-outside-close') === 'topmost'; })
-            .sort(function (a, b) { return Number(a.style.zIndex) - Number(b.style.zIndex); });
-        var dialog = model.state.stackRef.current.querySelector('[role=dialog]');
+        const elements = canvas_kit_popup_stack_1.PopupStack.getElements()
+            .filter(e => e.getAttribute('data-behavior-click-outside-close') === 'topmost')
+            .sort((a, b) => Number(a.style.zIndex) - Number(b.style.zIndex));
+        const dialog = model.state.stackRef.current.querySelector('[role=dialog]');
         // Create a list of parent elements of the dialog to detect overlay clicks
-        var elementsBetweenDialogAnBody = [];
-        var element = dialog;
+        const elementsBetweenDialogAnBody = [];
+        let element = dialog;
         while (element === null || element === void 0 ? void 0 : element.parentElement) {
             elementsBetweenDialogAnBody.push(element.parentElement);
             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; })) {
+            elementsBetweenDialogAnBody.some(element => element === event.target)) {
             model.events.hide(event);
         }
-    }, [model.state.stackRef, model.events]);
-    var visible = model.state.visibility !== 'hidden';
-    react_1.default.useLayoutEffect(function () {
+    }, [model.state.stackRef, model.events, modality]);
+    const visible = model.state.visibility !== 'hidden';
+    react_1.default.useLayoutEffect(() => {
         var _a;
         if (!visible) {
             return;
         }
         document.addEventListener('mousedown', onClick);
         (_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('data-behavior-click-outside-close', 'topmost');
-        return function () {
+        return () => {
             document.removeEventListener('mousedown', onClick);
         };
     }, [model.state.stackRef, visible, onClick]);

package/dist/commonjs/modal/lib/hooks/useModalCard.d.ts

@@ -1,4 +1,4 @@
-export declare const useModalCard: <P extends {}, R>(model: {
+export declare const useModalCard: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: import("react").RefObject<HTMLDivElement>;
         targetRef: import("react").RefObject<HTMLButtonElement>;
@@ -6,7 +6,7 @@ export declare const useModalCard: <P extends {}, R>(model: {
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -15,7 +15,10 @@ export declare const useModalCard: <P extends {}, R>(model: {
         show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
     };
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}, {
+    role: string;
+    'aria-labelledby': string;
+} & {
+    'aria-modal': boolean;
+}>;
 //# sourceMappingURL=useModalCard.d.ts.map

package/dist/commonjs/modal/lib/hooks/useModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalCard.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalCard.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;OAOxB,CAAC"}
+{"version":3,"file":"useModalCard.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalCard.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;EAOxB,CAAC"}