@workday/canvas-kit-react 8.0.0-alpha.151-next.3 → 8.0.0-alpha.153-next.5

package/common/lib/utils/useModalityType.ts

@@ -11,24 +11,24 @@ type Modality = 'mouse' | 'touch' | 'pen';
 //   a. if localStorage isn't primed, use clientWidth of the browsers
 //   b. if < 768, default to 'touch'
 //   c. else default to 'mouse'
-const localStorageValue = 'mouse' as Modality; //((typeof localStorage !== 'undefined'
-//   ? localStorage.getItem('modality')
-//   : '') ||
-//   (typeof document !== 'undefined'
-//     ? document.documentElement.clientWidth < 768
-//       ? 'touch'
-//       : ''
-//     : '') ||
-//   'mouse') as Modality;
+let localStorageValue = ((typeof localStorage !== 'undefined'
+  ? localStorage.getItem('modality')
+  : '') ||
+  (typeof document !== 'undefined'
+    ? document.documentElement.clientWidth < 768
+      ? 'touch'
+      : ''
+    : '') ||
+  'mouse') as Modality;
 
 // Update the `localStorageValue`, but conditionally update localStorage only if the value has
 // changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
 // drives
 const updateLocalStorage = (value: Modality) => {
-  // if (localStorageValue !== value) {
-  //   localStorage.setItem('modality', value);
-  // }
-  // localStorageValue = value;
+  if (localStorageValue !== value) {
+    localStorage.setItem('modality', value);
+  }
+  localStorageValue = value;
 };
 
 /**

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

@@ -14,23 +14,23 @@ var react_1 = __importDefault(require("react"));
 //   a. if localStorage isn't primed, use clientWidth of the browsers
 //   b. if < 768, default to 'touch'
 //   c. else default to 'mouse'
-var localStorageValue = 'mouse'; //((typeof localStorage !== 'undefined'
-//   ? localStorage.getItem('modality')
-//   : '') ||
-//   (typeof document !== 'undefined'
-//     ? document.documentElement.clientWidth < 768
-//       ? 'touch'
-//       : ''
-//     : '') ||
-//   'mouse') as Modality;
+var localStorageValue = ((typeof localStorage !== 'undefined'
+    ? localStorage.getItem('modality')
+    : '') ||
+    (typeof document !== 'undefined'
+        ? document.documentElement.clientWidth < 768
+            ? 'touch'
+            : ''
+        : '') ||
+    'mouse');
 // Update the `localStorageValue`, but conditionally update localStorage only if the value has
 // changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
 // drives
 var updateLocalStorage = function (value) {
-    // if (localStorageValue !== value) {
-    //   localStorage.setItem('modality', value);
-    // }
-    // localStorageValue = value;
+    if (localStorageValue !== value) {
+        localStorage.setItem('modality', value);
+    }
+    localStorageValue = value;
 };
 /**
  * Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook

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,EAGb,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;AAWjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}

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

@@ -33,12 +33,26 @@ 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 tokens_1 = require("@workday/canvas-kit-react/tokens");
 var popup_1 = require("@workday/canvas-kit-react/popup");
 var hooks_1 = require("./hooks");
+var ResponsiveModalCard = common_1.styled(popup_1.Popup.Card)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            margin: tokens_1.space.xl,
+            padding: tokens_1.space.l
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            margin: "0 0 " + tokens_1.space.xl,
+            padding: tokens_1.space.m,
+        },
+        _b);
+});
 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)));
+    return React.createElement(ResponsiveModalCard, __assign({ as: Element, width: 440, borderWidth: 0, depth: 6 }, elemProps));
 });

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;CAAG;AA+CtD,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;AAiDtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}

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

@@ -46,20 +46,28 @@ 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: "''",
-        height: '100vh',
-    },
+var ResponsiveContainer = styled_1.default('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',
+            // IE11 fix for setting min-height in a flex container
+            ':before': {
+                display: 'block',
+                content: "''",
+                height: '100vh',
+            }
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            alignItems: 'end',
+        },
+        _b);
 });
 exports.ModalOverlay = common_1.createSubcomponent('div')({
     displayName: 'Modal.Overlay',
@@ -83,13 +91,15 @@ var OpenModalOverlay = common_1.createSubcomponent('div')({
 })(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
+        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);

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;;;;;;;;;;;;;;;;;;;OAgDjC,CAAC"}

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

@@ -14,6 +14,7 @@ var popup_1 = require("@workday/canvas-kit-react/popup");
  * 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 modality = common_1.useModalityType();
     var onClick = react_1.default.useCallback(function (event) {
         if (!model.state.stackRef.current) {
             return;
@@ -30,12 +31,13 @@ exports.useCloseOnOverlayClick = common_1.createElemPropsHook(popup_1.usePopupMo
             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_1.default.useLayoutEffect(function () {
         var _a;

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

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,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;;;;;;;;;;;;;;;;;EAiCpB,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,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;AA0CD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAiCpB,CAAC"}

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

@@ -59,20 +59,28 @@ var popupAnimation = function (transformOrigin) {
     return react_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "], ["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "])), translate.x, translate.y);
 };
 var StyledPopupCard = common_1.styled(card_1.Card)(function (_a) {
-    var transformOrigin = _a.transformOrigin;
+    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;
 });
 exports.PopupCard = common_1.createSubcomponent('div')({
     displayName: 'Popup.Card',

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

@@ -8,23 +8,23 @@ import React from 'react';
 //   a. if localStorage isn't primed, use clientWidth of the browsers
 //   b. if < 768, default to 'touch'
 //   c. else default to 'mouse'
-var localStorageValue = 'mouse'; //((typeof localStorage !== 'undefined'
-//   ? localStorage.getItem('modality')
-//   : '') ||
-//   (typeof document !== 'undefined'
-//     ? document.documentElement.clientWidth < 768
-//       ? 'touch'
-//       : ''
-//     : '') ||
-//   'mouse') as Modality;
+var localStorageValue = ((typeof localStorage !== 'undefined'
+    ? localStorage.getItem('modality')
+    : '') ||
+    (typeof document !== 'undefined'
+        ? document.documentElement.clientWidth < 768
+            ? 'touch'
+            : ''
+        : '') ||
+    'mouse');
 // Update the `localStorageValue`, but conditionally update localStorage only if the value has
 // changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
 // drives
 var updateLocalStorage = function (value) {
-    // if (localStorageValue !== value) {
-    //   localStorage.setItem('modality', value);
-    // }
-    // localStorageValue = value;
+    if (localStorageValue !== value) {
+        localStorage.setItem('modality', value);
+    }
+    localStorageValue = value;
 };
 /**
  * Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook

package/dist/es6/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,EAGb,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;AAWjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}

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,
+            padding: space.l
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            margin: "0 0 " + space.xl,
+            padding: 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/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;CAAG;AA+CtD,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;AAiDtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}

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

@@ -40,20 +40,28 @@ 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',
+            // IE11 fix for setting min-height in a flex container
+            ':before': {
+                display: 'block',
+                content: "''",
+                height: '100vh',
+            }
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            alignItems: 'end',
+        },
+        _b);
 });
 export var ModalOverlay = createSubcomponent('div')({
     displayName: 'Modal.Overlay',
@@ -77,13 +85,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/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;;;;;;;;;;;;;;;;;EAiCpB,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,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;AA0CD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAiCpB,CAAC"}

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

@@ -37,20 +37,28 @@ var popupAnimation = function (transformOrigin) {
     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)(function (_a) {
-    var transformOrigin = _a.transformOrigin;
+    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',

package/modal/lib/ModalCard.tsx

@@ -1,18 +1,31 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  StyledType,
+  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';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
+const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => ({
+  margin: space.xl,
+  padding: space.l,
+  [theme.canvas.breakpoints.down('s')]: {
+    margin: `0 0 ${space.xl}`,
+    padding: space.m,
+  },
+}));
+
 export const ModalCard = createSubcomponent('div')({
   displayName: 'Modal.Card',
   modelHook: useModalModel,
   elemPropsHook: useModalCard,
 })<ModalCardProps>((elemProps, Element) => {
-  return (
-    <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" depth={6} {...elemProps} />
-  );
+  return <ResponsiveModalCard as={Element} width={440} borderWidth={0} depth={6} {...elemProps} />;
 });

package/modal/lib/ModalOverlay.tsx

@@ -44,22 +44,24 @@ const Container = styled(Box)<StyledType>({
 // 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
-const CenteringContainer = styled('div')({
+const ResponsiveContainer = styled('div')(({theme}) => ({
   maxHeight: '100vh',
   display: 'flex',
   position: 'absolute',
   left: 0,
   top: 0,
-  alignItems: 'center',
   justifyContent: 'center',
-
+  alignItems: 'center',
   // IE11 fix for setting min-height in a flex container
   ':before': {
     display: 'block',
     content: "''",
     height: '100vh',
   },
-});
+  [theme.canvas.breakpoints.down('s')]: {
+    alignItems: 'end',
+  },
+}));
 
 export const ModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.Overlay',
@@ -86,16 +88,17 @@ const OpenModalOverlay = createSubcomponent('div')({
   elemPropsHook: useModalOverlay,
 })<ModalOverlayProps>((elemProps, Element, model) => {
   const windowSize = useWindowSize();
-
   const content = (
     <Container as={Element} {...elemProps}>
-      <CenteringContainer
+      <ResponsiveContainer
         // 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'}}
+        style={{
+          width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw',
+        }}
       >
         {elemProps.children}
-      </CenteringContainer>
+      </ResponsiveContainer>
     </Container>
   );
 

package/modal/lib/hooks/useCloseOnOverlayClick.ts

@@ -1,7 +1,7 @@
 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';
 
 /**
@@ -10,6 +10,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 const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model => {
+  const modality = useModalityType();
   const onClick = React.useCallback(
     (event: MouseEvent) => {
       if (!model.state.stackRef.current) {
@@ -30,6 +31,7 @@ export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model =
 
       if (
         dialog &&
+        modality !== 'touch' &&
         elements.length &&
         elements[elements.length - 1] === model.state.stackRef.current &&
         elementsBetweenDialogAnBody.some(element => element === event.target)
@@ -37,7 +39,7 @@ export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model =
         model.events.hide(event);
       }
     },
-    [model.state.stackRef, model.events]
+    [model.state.stackRef, model.events, modality]
   );
 
   const visible = model.state.visibility !== 'hidden';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.151-next.3+548c0a40",
+  "version": "8.0.0-alpha.153-next.5+e2311293",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,9 +49,9 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.151-next.3+548c0a40",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.151-next.3+548c0a40",
-    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.151-next.3+548c0a40",
+    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.153-next.5+e2311293",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.153-next.5+e2311293",
+    "@workday/canvas-kit-preview-react": "^8.0.0-alpha.153-next.5+e2311293",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -70,5 +70,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "548c0a4090f25b1feeabaf1c1288fec4539e7d0a"
+  "gitHead": "e23112938a59c4ba7993592f072ef524077ad111"
 }

package/popup/lib/PopupCard.tsx

@@ -38,15 +38,22 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
 
 const StyledPopupCard = styled(Card)<
   StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(({transformOrigin}) => {
+>(({transformOrigin, theme}) => {
   if (transformOrigin == null) {
     return {};
   }
+
   return {
     animation: popupAnimation(transformOrigin),
     animationDuration: '150ms',
     animationTimingFunction: 'ease-out',
     transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
+    [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 &': {
       animation: 'none',