@workday/canvas-kit-react 8.0.0-alpha.203-next.3 → 8.0.0-alpha.208-next.1

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,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"}
+{"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;AAYjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}

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

@@ -45,7 +45,8 @@ var ResponsiveModalCard = common_1.styled(popup_1.Popup.Card)(function (_a) {
         },
         _b[theme.canvas.breakpoints.down('s')] = {
             margin: "0 0 " + tokens_1.space.xl,
-            padding: tokens_1.space.m,
+            padding: tokens_1.space.s,
+            borderRadius: tokens_1.space.m,
         },
         _b);
 });

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,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/commonjs/modal/lib/ModalHeading.js

@@ -34,11 +34,21 @@ 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 tokens_1 = require("@workday/canvas-kit-react/tokens");
 var hooks_1 = require("./hooks");
+var ResponsiveModalHeading = common_1.styled(popup_1.Popup.Heading)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {},
+        _b[theme.canvas.breakpoints.down('s')] = {
+            marginBottom: tokens_1.space.zero,
+        },
+        _b);
+});
 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));
+    return React.createElement(ResponsiveModalHeading, __assign({ as: Element }, elemProps));
 });

package/dist/commonjs/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;AAM1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAiDzB,CAAC"}

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

@@ -16,15 +16,44 @@ var usePopupModel_1 = require("./usePopupModel");
  */
 exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var visible = model.state.visibility !== 'hidden';
+    // This boolean tracks keyboard-driven focus changes. This is required for `useFocusRedirect` as
+    // focus redirection needs synchronous focus management and everything else needs asynchronous
+    // focus management.
+    var requiresFocusChangeRef = react_1.default.useRef(false);
+    var onKeyDown = react_1.default.useCallback(function (event) {
+        // The tab key changes focus
+        if (event.key === 'Tab') {
+            requiresFocusChangeRef.current = true;
+        }
+    }, []);
+    var onKeyUp = react_1.default.useCallback(function (event) {
+        requiresFocusChangeRef.current = false;
+    }, []);
     react_1.default.useLayoutEffect(function () {
         if (!visible) {
             return;
         }
         // capture the element here. The refs will be null by the time the cleanup function is called
         var element = (model.state.returnFocusRef || model.state.targetRef).current;
+        document.addEventListener('keydown', onKeyDown, true);
+        document.addEventListener('keyup', onKeyUp, true);
         return function () {
-            common_1.changeFocus(element);
+            document.removeEventListener('keydown', onKeyDown, true);
+            document.removeEventListener('keyup', onKeyUp, true);
+            if (requiresFocusChangeRef.current) {
+                // We need to change focus _before_ the browser process the default action of picking a new
+                // focus target. Doing this immediately prevents the `focus` event from firing on `element`,
+                // but that's okay because the browser will change focus anyways.
+                common_1.changeFocus(element);
+            }
+            else {
+                // We wait a frame for the current event to process, allowing the browser to fire default
+                // actions. This delay allows the focus change to trigger a `focus` event on `element`.
+                requestAnimationFrame(function () {
+                    common_1.changeFocus(element);
+                });
+            }
         };
-    }, [model.state.returnFocusRef, model.state.targetRef, visible]);
+    }, [model.state.returnFocusRef, model.state.targetRef, visible, onKeyDown, onKeyUp]);
     return {};
 });

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,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"}
+{"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;AAYjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}

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

@@ -23,7 +23,8 @@ var ResponsiveModalCard = styled(Popup.Card)(function (_a) {
         },
         _b[theme.canvas.breakpoints.down('s')] = {
             margin: "0 0 " + space.xl,
-            padding: space.m,
+            padding: space.s,
+            borderRadius: space.m,
         },
         _b);
 });

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/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;AAM1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAiDzB,CAAC"}

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

@@ -10,15 +10,44 @@ import { usePopupModel } from './usePopupModel';
  */
 export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model) {
     var visible = model.state.visibility !== 'hidden';
+    // This boolean tracks keyboard-driven focus changes. This is required for `useFocusRedirect` as
+    // focus redirection needs synchronous focus management and everything else needs asynchronous
+    // focus management.
+    var requiresFocusChangeRef = React.useRef(false);
+    var onKeyDown = React.useCallback(function (event) {
+        // The tab key changes focus
+        if (event.key === 'Tab') {
+            requiresFocusChangeRef.current = true;
+        }
+    }, []);
+    var onKeyUp = React.useCallback(function (event) {
+        requiresFocusChangeRef.current = false;
+    }, []);
     React.useLayoutEffect(function () {
         if (!visible) {
             return;
         }
         // capture the element here. The refs will be null by the time the cleanup function is called
         var element = (model.state.returnFocusRef || model.state.targetRef).current;
+        document.addEventListener('keydown', onKeyDown, true);
+        document.addEventListener('keyup', onKeyUp, true);
         return function () {
-            changeFocus(element);
+            document.removeEventListener('keydown', onKeyDown, true);
+            document.removeEventListener('keyup', onKeyUp, true);
+            if (requiresFocusChangeRef.current) {
+                // We need to change focus _before_ the browser process the default action of picking a new
+                // focus target. Doing this immediately prevents the `focus` event from firing on `element`,
+                // but that's okay because the browser will change focus anyways.
+                changeFocus(element);
+            }
+            else {
+                // We wait a frame for the current event to process, allowing the browser to fire default
+                // actions. This delay allows the focus change to trigger a `focus` event on `element`.
+                requestAnimationFrame(function () {
+                    changeFocus(element);
+                });
+            }
         };
-    }, [model.state.returnFocusRef, model.state.targetRef, visible]);
+    }, [model.state.returnFocusRef, model.state.targetRef, visible, onKeyDown, onKeyUp]);
     return {};
 });

package/modal/lib/ModalCard.tsx

@@ -18,7 +18,8 @@ const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({th
   padding: space.l,
   [theme.canvas.breakpoints.down('s')]: {
     margin: `0 0 ${space.xl}`,
-    padding: space.m,
+    padding: space.s,
+    borderRadius: space.m, // matches mobile specs
   },
 }));
 

package/modal/lib/ModalHeading.tsx

@@ -1,16 +1,28 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  styled,
+  StyledType,
+} 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';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
+const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => ({
+  [theme.canvas.breakpoints.down('s')]: {
+    marginBottom: space.zero,
+  },
+}));
+
 export const ModalHeading = createSubcomponent('h2')({
   displayName: 'Modal.Heading',
   modelHook: useModalModel,
   elemPropsHook: useModalHeading,
 })<ModalHeadingProps>((elemProps, Element) => {
-  return <Popup.Heading as={Element} {...elemProps} />;
+  return <ResponsiveModalHeading as={Element} {...elemProps} />;
 });

package/package.json

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

package/popup/lib/hooks/useReturnFocus.tsx

@@ -14,16 +14,50 @@ import {usePopupModel} from './usePopupModel';
 export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
   const visible = model.state.visibility !== 'hidden';
 
+  // This boolean tracks keyboard-driven focus changes. This is required for `useFocusRedirect` as
+  // focus redirection needs synchronous focus management and everything else needs asynchronous
+  // focus management.
+  const requiresFocusChangeRef = React.useRef(false);
+
+  const onKeyDown = React.useCallback((event: KeyboardEvent) => {
+    // The tab key changes focus
+    if (event.key === 'Tab') {
+      requiresFocusChangeRef.current = true;
+    }
+  }, []);
+
+  const onKeyUp = React.useCallback((event: KeyboardEvent) => {
+    requiresFocusChangeRef.current = false;
+  }, []);
+
   React.useLayoutEffect(() => {
     if (!visible) {
       return;
     }
     // capture the element here. The refs will be null by the time the cleanup function is called
-    const element = (model.state.returnFocusRef || model.state.targetRef).current;
+    const element = (model.state.returnFocusRef || model.state.targetRef).current as HTMLElement;
+
+    document.addEventListener('keydown', onKeyDown, true);
+    document.addEventListener('keyup', onKeyUp, true);
+
     return () => {
-      changeFocus(element);
+      document.removeEventListener('keydown', onKeyDown, true);
+      document.removeEventListener('keyup', onKeyUp, true);
+
+      if (requiresFocusChangeRef.current) {
+        // We need to change focus _before_ the browser process the default action of picking a new
+        // focus target. Doing this immediately prevents the `focus` event from firing on `element`,
+        // but that's okay because the browser will change focus anyways.
+        changeFocus(element);
+      } else {
+        // We wait a frame for the current event to process, allowing the browser to fire default
+        // actions. This delay allows the focus change to trigger a `focus` event on `element`.
+        requestAnimationFrame(() => {
+          changeFocus(element);
+        });
+      }
     };
-  }, [model.state.returnFocusRef, model.state.targetRef, visible]);
+  }, [model.state.returnFocusRef, model.state.targetRef, visible, onKeyDown, onKeyUp]);
 
   return {};
 });