@khanacademy/wonder-blocks-popover 3.0.23 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @khanacademy/wonder-blocks-popover
 
+## 3.1.1
+
+### Patch Changes
+
+-   60aba5b8: Update internal spacing references (from wb-spacing to wb-tokens)
+-   7c51f377: Migrate wb-color imports to use tokens.color
+-   Updated dependencies [60aba5b8]
+-   Updated dependencies [7cd7f6cc]
+-   Updated dependencies [7c51f377]
+-   Updated dependencies [7cd7f6cc]
+-   Updated dependencies [7c51f377]
+    -   @khanacademy/wonder-blocks-tooltip@2.1.26
+    -   @khanacademy/wonder-blocks-modal@4.2.2
+    -   @khanacademy/wonder-blocks-tokens@0.2.0
+    -   @khanacademy/wonder-blocks-icon-button@5.1.9
+
+## 3.1.0
+
+### Minor Changes
+
+-   7944c7d3: Add `closedFocusId` prop to manually return focus to a specific element
+
+### Patch Changes
+
+-   e5dd6215: Don't return focus to trigger element if the focus has to go to a different interactive element
+-   163cfca3: Fix tab navigation order
+
 ## 3.0.23
 
 ### Patch Changes

package/dist/components/focus-manager.d.ts

@@ -49,11 +49,22 @@ export default class FocusManager extends React.Component<Props> {
     /**
      * List of focusable elements within the popover content
      */
-    focusableElementsInPopover: Array<HTMLElement>;
+    elementsThatCanBeFocusableInsidePopover: Array<HTMLElement>;
+    /**
+     * The first focusable element inside the popover (if it exists)
+     */
+    firstFocusableElementInPopover: HTMLElement | null | undefined;
+    /**
+     * The last focusable element inside the popover (if it exists)
+     */
+    lastFocusableElementInPopover: HTMLElement | null | undefined;
     /**
      * Add keydown listeners
      */
     addEventListeners: () => void;
+    removeEventListeners(): void;
+    handleKeydownFirstFocusableElement: (e: KeyboardEvent) => void;
+    handleKeydownLastFocusableElement: (e: KeyboardEvent) => void;
     /**
      * Gets the next focusable element after the anchor element
      */
@@ -67,6 +78,12 @@ export default class FocusManager extends React.Component<Props> {
      * focus will be redirected to the anchor element.
      */
     handleFocusPreviousFocusableElement: () => void;
+    /**
+     * Toggle focusability for all the focusable elements inside the popover.
+     * This is useful to prevent the user from tabbing into the popover when it
+     * reaches to the last focusable element within the document.
+     */
+    changeFocusabilityInsidePopover: (enabled?: boolean) => void;
     /**
      * Triggered when the focus is set to the last sentinel. This way, the focus
      * will be redirected to next element after the anchor element.

package/dist/components/popover-event-listener.d.ts

@@ -5,7 +5,7 @@ type Props = {
     /**
      * Called when `esc` is pressed
      */
-    onClose: () => unknown;
+    onClose: (shouldReturnFocus: boolean) => unknown;
     /**
      * Popover Content ref.
      * Will close the popover when clicking outside this element.

package/dist/components/popover.d.ts

@@ -49,6 +49,12 @@ type Props = AriaProps & Readonly<{
      *
      */
     id?: string;
+    /**
+     * The selector for the element that will be focused after the popover
+     * dialog closes. When not set, the element that triggered the popover
+     * will be used.
+     */
+    closedFocusId?: string;
     /**
      * The selector for the element that will be focused when the popover
      * content shows. When not set, the first focusable element within the
@@ -129,10 +135,14 @@ export default class Popover extends React.Component<Props, State> {
      * Popover content ref
      */
     contentRef: React.RefObject<PopoverContent | PopoverContentCore>;
+    /**
+     * Returns focus to a given element.
+     */
+    maybeReturnFocus: () => void;
     /**
      * Popover dialog closed
      */
-    handleClose: () => void;
+    handleClose: (shouldReturnFocus?: boolean) => void;
     /**
      * Popover dialog opened
      */

package/dist/es/index.js

@@ -4,9 +4,8 @@ import { View, IDProvider, addStyle } from '@khanacademy/wonder-blocks-core';
 import { TooltipTail, TooltipPopper } from '@khanacademy/wonder-blocks-tooltip';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { StyleSheet } from 'aphrodite';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
 import { HeadingSmall, Body } from '@khanacademy/wonder-blocks-typography';
-import Colors from '@khanacademy/wonder-blocks-color';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
@@ -133,6 +132,9 @@ const FOCUSABLE_ELEMENTS = 'button, [href], input, select, textarea, [tabindex]:
 function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
+function isFocusable(element) {
+  return element.matches(FOCUSABLE_ELEMENTS);
+}
 
 class InitialFocus extends React.Component {
   constructor(...args) {
@@ -180,17 +182,49 @@ class FocusManager extends React.Component {
     super(...args);
     this.nextElementAfterPopover = void 0;
     this.rootNode = void 0;
-    this.focusableElementsInPopover = [];
+    this.elementsThatCanBeFocusableInsidePopover = [];
+    this.firstFocusableElementInPopover = null;
+    this.lastFocusableElementInPopover = null;
     this.addEventListeners = () => {
       const {
         anchorElement
       } = this.props;
       if (anchorElement) {
-        anchorElement.addEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
+        anchorElement.addEventListener("keydown", this.handleKeydownPreviousFocusableElement);
+      }
+      if (this.rootNode) {
+        this.elementsThatCanBeFocusableInsidePopover = findFocusableNodes(this.rootNode);
+        this.firstFocusableElementInPopover = this.elementsThatCanBeFocusableInsidePopover[0];
+        this.lastFocusableElementInPopover = this.elementsThatCanBeFocusableInsidePopover[this.elementsThatCanBeFocusableInsidePopover.length - 1];
       }
       this.nextElementAfterPopover = this.getNextFocusableElement();
+      if (!this.nextElementAfterPopover) {
+        window.addEventListener("blur", () => {
+          this.changeFocusabilityInsidePopover(true);
+        });
+      }
+      if (this.firstFocusableElementInPopover) {
+        this.firstFocusableElementInPopover.addEventListener("keydown", this.handleKeydownFirstFocusableElement);
+      }
+      if (this.lastFocusableElementInPopover) {
+        this.lastFocusableElementInPopover.addEventListener("keydown", this.handleKeydownLastFocusableElement);
+      }
       if (this.nextElementAfterPopover) {
-        this.nextElementAfterPopover.addEventListener("keydown", this.handleKeydownNextFocusableElement, true);
+        this.nextElementAfterPopover.addEventListener("keydown", this.handleKeydownNextFocusableElement);
+      }
+    };
+    this.handleKeydownFirstFocusableElement = e => {
+      if (e.key === "Tab" && e.shiftKey) {
+        var _this$props$anchorEle;
+        e.preventDefault();
+        (_this$props$anchorEle = this.props.anchorElement) == null ? void 0 : _this$props$anchorEle.focus();
+      }
+    };
+    this.handleKeydownLastFocusableElement = e => {
+      if (this.nextElementAfterPopover && e.key === "Tab" && !e.shiftKey) {
+        var _this$nextElementAfte;
+        e.preventDefault();
+        (_this$nextElementAfte = this.nextElementAfterPopover) == null ? void 0 : _this$nextElementAfte.focus();
       }
     };
     this.getNextFocusableElement = () => {
@@ -201,10 +235,14 @@ class FocusManager extends React.Component {
         return;
       }
       const focusableElements = findFocusableNodes(document);
-      const anchorIndex = focusableElements.indexOf(anchorElement);
-      if (anchorIndex >= 0) {
-        const nextElementIndex = anchorIndex < focusableElements.length - 1 ? anchorIndex + 1 : 0;
-        return focusableElements[nextElementIndex];
+      const focusableElementsOutside = focusableElements.filter(element => {
+        const index = this.elementsThatCanBeFocusableInsidePopover.indexOf(element);
+        return index < 0;
+      });
+      const anchorIndex = focusableElementsOutside.indexOf(anchorElement);
+      if (anchorIndex >= 0 && anchorIndex !== focusableElementsOutside.length - 1) {
+        const nextElementIndex = anchorIndex < focusableElementsOutside.length - 1 ? anchorIndex + 1 : 0;
+        return focusableElementsOutside[nextElementIndex];
       }
       return;
     };
@@ -217,13 +255,18 @@ class FocusManager extends React.Component {
         throw new Error("Assertion error: root node should exist after mount");
       }
       this.rootNode = rootNode;
-      this.focusableElementsInPopover = findFocusableNodes(this.rootNode);
     };
     this.handleFocusPreviousFocusableElement = () => {
       if (this.props.anchorElement) {
         this.props.anchorElement.focus();
       }
     };
+    this.changeFocusabilityInsidePopover = (enabled = true) => {
+      const tabIndex = enabled ? "0" : "-1";
+      this.elementsThatCanBeFocusableInsidePopover.forEach(element => {
+        element.setAttribute("tabIndex", tabIndex);
+      });
+    };
     this.handleFocusNextFocusableElement = () => {
       if (this.nextElementAfterPopover) {
         this.nextElementAfterPopover.focus();
@@ -231,15 +274,16 @@ class FocusManager extends React.Component {
     };
     this.handleKeydownPreviousFocusableElement = e => {
       if (e.key === "Tab" && !e.shiftKey) {
+        var _this$firstFocusableE;
         e.preventDefault();
-        this.focusableElementsInPopover[0].focus();
+        (_this$firstFocusableE = this.firstFocusableElementInPopover) == null ? void 0 : _this$firstFocusableE.focus();
       }
     };
     this.handleKeydownNextFocusableElement = e => {
       if (e.key === "Tab" && e.shiftKey) {
+        var _this$lastFocusableEl;
         e.preventDefault();
-        const lastElementIndex = this.focusableElementsInPopover.length - 1;
-        this.focusableElementsInPopover[lastElementIndex].focus();
+        (_this$lastFocusableEl = this.lastFocusableElementInPopover) == null ? void 0 : _this$lastFocusableEl.focus();
       }
     };
   }
@@ -247,41 +291,53 @@ class FocusManager extends React.Component {
     this.addEventListeners();
   }
   componentDidUpdate() {
+    this.removeEventListeners();
     this.addEventListeners();
   }
   componentWillUnmount() {
+    this.changeFocusabilityInsidePopover(true);
+    this.removeEventListeners();
+  }
+  removeEventListeners() {
     const {
       anchorElement
     } = this.props;
     if (anchorElement) {
-      setTimeout(() => anchorElement.focus(), 0);
-      anchorElement.removeEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
+      anchorElement.removeEventListener("keydown", this.handleKeydownPreviousFocusableElement);
+    }
+    if (!this.nextElementAfterPopover) {
+      window.removeEventListener("blur", () => {
+        this.changeFocusabilityInsidePopover(true);
+      });
+    }
+    if (this.firstFocusableElementInPopover) {
+      this.firstFocusableElementInPopover.removeEventListener("keydown", this.handleKeydownFirstFocusableElement);
+    }
+    if (this.lastFocusableElementInPopover) {
+      this.lastFocusableElementInPopover.removeEventListener("keydown", this.handleKeydownLastFocusableElement);
     }
     if (this.nextElementAfterPopover) {
-      this.nextElementAfterPopover.removeEventListener("keydown", this.handleKeydownNextFocusableElement, true);
+      this.nextElementAfterPopover.removeEventListener("keydown", this.handleKeydownNextFocusableElement);
     }
   }
   render() {
     const {
       children
     } = this.props;
-    return React.createElement(React.Fragment, null, React.createElement("div", {
-      tabIndex: 0,
-      onFocus: this.handleFocusPreviousFocusableElement,
-      style: {
-        position: "fixed"
+    return React.createElement("div", {
+      ref: this.getComponentRootNode,
+      onClick: () => {
+        this.changeFocusabilityInsidePopover(true);
+      },
+      onFocus: () => {
+        this.changeFocusabilityInsidePopover(true);
+      },
+      onBlur: () => {
+        this.changeFocusabilityInsidePopover(false);
       }
-    }), React.createElement("div", {
-      ref: this.getComponentRootNode
     }, React.createElement(InitialFocus, {
       initialFocusId: this.props.initialFocusId
-    }, children)), React.createElement("div", {
-      tabIndex: 0,
-      onFocus: this.handleFocusNextFocusableElement,
-      style: {
-        position: "fixed"
-      }
-    }));
+    }, children));
   }
 }
 
@@ -295,7 +351,7 @@ class PopoverEventListener extends React.Component {
       if (e.key === "Escape") {
         e.preventDefault();
         e.stopPropagation();
-        this.props.onClose();
+        this.props.onClose(true);
       }
     };
     this._handleClick = e => {
@@ -310,7 +366,8 @@ class PopoverEventListener extends React.Component {
       if (node && !node.contains(e.target)) {
         e.preventDefault();
         e.stopPropagation();
-        this.props.onClose();
+        const shouldReturnFocus = !isFocusable(e.target);
+        this.props.onClose(shouldReturnFocus);
       }
     };
   }
@@ -335,19 +392,36 @@ class Popover extends React.Component {
       placement: this.props.placement
     };
     this.contentRef = React.createRef();
-    this.handleClose = () => {
+    this.maybeReturnFocus = () => {
+      const {
+        anchorElement
+      } = this.state;
+      const {
+        closedFocusId
+      } = this.props;
+      if (closedFocusId) {
+        const focusElement = ReactDOM.findDOMNode(document.getElementById(closedFocusId));
+        focusElement == null ? void 0 : focusElement.focus();
+        return;
+      }
+      if (anchorElement) {
+        anchorElement.focus();
+      }
+    };
+    this.handleClose = (shouldReturnFocus = true) => {
       this.setState({
         opened: false
       }, () => {
         var _this$props$onClose, _this$props;
         (_this$props$onClose = (_this$props = this.props).onClose) == null ? void 0 : _this$props$onClose.call(_this$props);
+        if (shouldReturnFocus) {
+          this.maybeReturnFocus();
+        }
       });
     };
     this.handleOpen = () => {
       if (this.props.dismissEnabled && this.state.opened) {
-        this.setState({
-          opened: false
-        });
+        this.handleClose(true);
       } else {
         this.setState({
           opened: true
@@ -500,29 +574,29 @@ PopoverContentCore.defaultProps = {
 };
 const styles$1 = StyleSheet.create({
   content: {
-    borderRadius: Spacing.xxxSmall_4,
-    border: `solid 1px ${Colors.offBlack16}`,
-    backgroundColor: Colors.white,
-    boxShadow: `0 ${Spacing.xSmall_8}px ${Spacing.xSmall_8}px 0 ${Colors.offBlack8}`,
+    borderRadius: spacing.xxxSmall_4,
+    border: `solid 1px ${color.offBlack16}`,
+    backgroundColor: color.white,
+    boxShadow: `0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,
     margin: 0,
-    maxWidth: Spacing.medium_16 * 18,
-    padding: Spacing.large_24,
+    maxWidth: spacing.medium_16 * 18,
+    padding: spacing.large_24,
     overflow: "hidden",
     justifyContent: "center"
   },
   blue: {
-    backgroundColor: Colors.blue,
-    color: Colors.white
+    backgroundColor: color.blue,
+    color: color.white
   },
   darkBlue: {
-    backgroundColor: Colors.darkBlue,
-    color: Colors.white
+    backgroundColor: color.darkBlue,
+    color: color.white
   },
   closeButton: {
     margin: 0,
     position: "absolute",
-    right: Spacing.xxxSmall_4,
-    top: Spacing.xxxSmall_4,
+    right: spacing.xxxSmall_4,
+    top: spacing.xxxSmall_4,
     zIndex: 1
   }
 });
@@ -636,7 +710,7 @@ PopoverContent.defaultProps = {
 };
 const styles = StyleSheet.create({
   actions: {
-    marginTop: Spacing.large_24,
+    marginTop: spacing.large_24,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "flex-end"
@@ -645,15 +719,15 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   title: {
-    marginBottom: Spacing.xSmall_8
+    marginBottom: spacing.xSmall_8
   },
   iconContainer: {
     alignItems: "center",
     justifyContent: "center",
-    height: Spacing.xxxLarge_64,
-    width: Spacing.xxxLarge_64,
-    minWidth: Spacing.xxxLarge_64,
-    marginRight: Spacing.medium_16,
+    height: spacing.xxxLarge_64,
+    width: spacing.xxxLarge_64,
+    minWidth: spacing.xxxLarge_64,
+    marginRight: spacing.medium_16,
     overflow: "hidden"
   },
   icon: {
@@ -663,15 +737,15 @@ const styles = StyleSheet.create({
     flexDirection: "row"
   },
   image: {
-    marginBottom: Spacing.large_24,
-    marginLeft: -Spacing.large_24,
-    marginRight: -Spacing.large_24,
-    marginTop: -Spacing.large_24,
-    width: `calc(100% + ${Spacing.large_24 * 2}px)`
+    marginBottom: spacing.large_24,
+    marginLeft: -spacing.large_24,
+    marginRight: -spacing.large_24,
+    marginTop: -spacing.large_24,
+    width: `calc(100% + ${spacing.large_24 * 2}px)`
   },
   imageToBottom: {
-    marginBottom: -Spacing.large_24,
-    marginTop: Spacing.large_24,
+    marginBottom: -spacing.large_24,
+    marginTop: spacing.large_24,
     order: 1
   }
 });