@workday/canvas-kit-react 7.3.11 → 7.3.12

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.3.11",
+  "version": "7.3.12",
   "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": "^7.3.11",
+    "@workday/canvas-kit-popup-stack": "^7.3.12",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "b99e08738c58f915c8fa9da42d8fddc79a924a3f"
+  "gitHead": "b9c928b833e0e0e56493c9329dca77191645ab3d"
 }

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 {};
 });