@khanacademy/wonder-blocks-popover 3.2.7 → 3.2.9

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-popover
 
+## 3.2.9
+
+### Patch Changes
+
+-   47d680f4: Removed usage of focus management in Popover component, in favor of a similar implementation that won't override custom keyboard navigation.
+
+## 3.2.8
+
+### Patch Changes
+
+-   559e82d5: Update to build tooling, generating smaller output
+-   Updated dependencies [559e82d5]
+    -   @khanacademy/wonder-blocks-core@6.4.3
+    -   @khanacademy/wonder-blocks-icon-button@5.3.3
+    -   @khanacademy/wonder-blocks-modal@5.1.8
+    -   @khanacademy/wonder-blocks-tokens@1.3.1
+    -   @khanacademy/wonder-blocks-tooltip@2.3.7
+    -   @khanacademy/wonder-blocks-typography@2.1.14
+
 ## 3.2.7
 
 ### Patch Changes

package/dist/components/popover.d.ts

@@ -81,6 +81,20 @@ type Props = AriaProps & Readonly<{
      * Whether to show the popover tail or not. Defaults to true.
      */
     showTail: boolean;
+    /**
+     * Optional property to enable the portal functionality of popover.
+     * This is very handy in cases where the Popover can't be easily
+     * injected into the DOM structure and requires portaling to
+     * the trigger location.
+     *
+     * Set to "true" by default.
+     *
+     * CAUTION: Turning off portal could cause some clipping issues
+     * especially around legacy code with usage of z-indexing,
+     * Use caution when turning this functionality off and ensure
+     * your content does not get clipped or hidden.
+     */
+    portal?: boolean;
 }>;
 type State = Readonly<{
     /**
@@ -99,6 +113,7 @@ type State = Readonly<{
 type DefaultProps = Readonly<{
     placement: Props["placement"];
     showTail: Props["showTail"];
+    portal: Props["portal"];
 }>;
 /**
  * Popovers provide additional information that is related to a particular
@@ -151,6 +166,7 @@ export default class Popover extends React.Component<Props, State> {
     renderContent(uniqueId: string): PopoverContents;
     renderPopper(uniqueId: string): React.ReactNode;
     getHost(): Element | null | undefined;
+    renderPortal(uniqueId: string, opened: boolean): React.ReactNode;
     render(): React.ReactNode;
 }
 export {};

package/dist/es/index.js

@@ -1,3 +1,4 @@
+import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { View, IDProvider, addStyle } from '@khanacademy/wonder-blocks-core';
@@ -9,21 +10,6 @@ import { HeadingSmall, Body } from '@khanacademy/wonder-blocks-typography';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 const defaultContext = {
   close: undefined,
   placement: "top"
@@ -136,6 +122,49 @@ function isFocusable(element) {
   return element.matches(FOCUSABLE_ELEMENTS);
 }
 
+class PopoverEventListener extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      isFirstClick: true
+    };
+    this._handleKeyup = e => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.onClose(true);
+      }
+    };
+    this._handleClick = e => {
+      var _this$props$contentRe;
+      if (this.state.isFirstClick) {
+        this.setState({
+          isFirstClick: false
+        });
+        return;
+      }
+      const node = ReactDOM.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
+      if (node && !node.contains(e.target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        const shouldReturnFocus = !isFocusable(e.target);
+        this.props.onClose(shouldReturnFocus);
+      }
+    };
+  }
+  componentDidMount() {
+    window.addEventListener("keyup", this._handleKeyup);
+    window.addEventListener("click", this._handleClick);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("keyup", this._handleKeyup);
+    window.removeEventListener("click", this._handleClick);
+  }
+  render() {
+    return null;
+  }
+}
+
 class InitialFocus extends React.Component {
   constructor(...args) {
     super(...args);
@@ -341,49 +370,6 @@ class FocusManager extends React.Component {
   }
 }
 
-class PopoverEventListener extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      isFirstClick: true
-    };
-    this._handleKeyup = e => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        e.stopPropagation();
-        this.props.onClose(true);
-      }
-    };
-    this._handleClick = e => {
-      var _this$props$contentRe;
-      if (this.state.isFirstClick) {
-        this.setState({
-          isFirstClick: false
-        });
-        return;
-      }
-      const node = ReactDOM.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
-      if (node && !node.contains(e.target)) {
-        e.preventDefault();
-        e.stopPropagation();
-        const shouldReturnFocus = !isFocusable(e.target);
-        this.props.onClose(shouldReturnFocus);
-      }
-    };
-  }
-  componentDidMount() {
-    window.addEventListener("keyup", this._handleKeyup);
-    window.addEventListener("click", this._handleClick);
-  }
-  componentWillUnmount() {
-    window.removeEventListener("keyup", this._handleKeyup);
-    window.removeEventListener("click", this._handleClick);
-  }
-  render() {
-    return null;
-  }
-}
-
 class Popover extends React.Component {
   constructor(...args) {
     super(...args);
@@ -457,15 +443,13 @@ class Popover extends React.Component {
     const {
       initialFocusId,
       placement,
-      showTail
+      showTail,
+      portal
     } = this.props;
     const {
       anchorElement
     } = this.state;
-    return React.createElement(FocusManager, {
-      anchorElement: anchorElement,
-      initialFocusId: initialFocusId
-    }, React.createElement(TooltipPopper, {
+    const popperContent = React.createElement(TooltipPopper, {
       anchorElement: anchorElement,
       placement: placement
     }, props => React.createElement(PopoverDialog, _extends({}, props, {
@@ -476,11 +460,34 @@ class Popover extends React.Component {
         placement
       }),
       showTail: showTail
-    }), this.renderContent(uniqueId))));
+    }), this.renderContent(uniqueId)));
+    if (portal) {
+      return React.createElement(FocusManager, {
+        anchorElement: anchorElement,
+        initialFocusId: initialFocusId
+      }, popperContent);
+    } else {
+      return React.createElement(InitialFocus, {
+        initialFocusId: initialFocusId
+      }, popperContent);
+    }
   }
   getHost() {
     return maybeGetPortalMountedModalHostElement(this.state.anchorElement) || document.body;
   }
+  renderPortal(uniqueId, opened) {
+    if (!opened) {
+      return null;
+    }
+    const {
+      portal
+    } = this.props;
+    const popperHost = this.getHost();
+    if (portal && popperHost) {
+      return ReactDOM.createPortal(this.renderPopper(uniqueId), popperHost);
+    }
+    return this.renderPopper(uniqueId);
+  }
   render() {
     const {
       children,
@@ -491,7 +498,6 @@ class Popover extends React.Component {
       opened,
       placement
     } = this.state;
-    const popperHost = this.getHost();
     return React.createElement(PopoverContext.Provider, {
       value: {
         close: this.handleClose,
@@ -506,7 +512,7 @@ class Popover extends React.Component {
       "aria-controls": uniqueId,
       "aria-expanded": opened ? "true" : "false",
       onClick: this.handleOpen
-    }, children), popperHost && opened && ReactDOM.createPortal(this.renderPopper(uniqueId), popperHost))), dismissEnabled && opened && React.createElement(PopoverEventListener, {
+    }, children), this.renderPortal(uniqueId, opened))), dismissEnabled && opened && React.createElement(PopoverEventListener, {
       onClose: this.handleClose,
       contentRef: this.contentRef
     }));
@@ -514,7 +520,8 @@ class Popover extends React.Component {
 }
 Popover.defaultProps = {
   placement: "top",
-  showTail: true
+  showTail: true,
+  portal: true
 };
 
 class CloseButton extends React.Component {

package/dist/index.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
@@ -16,43 +17,29 @@ var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+    }
+    n["default"] = e;
+    return Object.freeze(n);
 }
 
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 const defaultContext = {
   close: undefined,
   placement: "top"
@@ -86,7 +73,7 @@ class PopoverAnchor extends React__namespace.Component {
       });
       return React__namespace.cloneElement(renderedChildren, sharedProps);
     } else {
-      return React__namespace.cloneElement(children, _extends({}, children.props, sharedProps, {
+      return React__namespace.cloneElement(children, _extends__default["default"]({}, children.props, sharedProps, {
         onClick: children.props.onClick ? e => {
           e.stopPropagation();
           children.props.onClick();
@@ -165,6 +152,49 @@ function isFocusable(element) {
   return element.matches(FOCUSABLE_ELEMENTS);
 }
 
+class PopoverEventListener extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      isFirstClick: true
+    };
+    this._handleKeyup = e => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.onClose(true);
+      }
+    };
+    this._handleClick = e => {
+      var _this$props$contentRe;
+      if (this.state.isFirstClick) {
+        this.setState({
+          isFirstClick: false
+        });
+        return;
+      }
+      const node = ReactDOM__namespace.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
+      if (node && !node.contains(e.target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        const shouldReturnFocus = !isFocusable(e.target);
+        this.props.onClose(shouldReturnFocus);
+      }
+    };
+  }
+  componentDidMount() {
+    window.addEventListener("keyup", this._handleKeyup);
+    window.addEventListener("click", this._handleClick);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("keyup", this._handleKeyup);
+    window.removeEventListener("click", this._handleClick);
+  }
+  render() {
+    return null;
+  }
+}
+
 class InitialFocus extends React__namespace.Component {
   constructor(...args) {
     super(...args);
@@ -370,49 +400,6 @@ class FocusManager extends React__namespace.Component {
   }
 }
 
-class PopoverEventListener extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      isFirstClick: true
-    };
-    this._handleKeyup = e => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        e.stopPropagation();
-        this.props.onClose(true);
-      }
-    };
-    this._handleClick = e => {
-      var _this$props$contentRe;
-      if (this.state.isFirstClick) {
-        this.setState({
-          isFirstClick: false
-        });
-        return;
-      }
-      const node = ReactDOM__namespace.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
-      if (node && !node.contains(e.target)) {
-        e.preventDefault();
-        e.stopPropagation();
-        const shouldReturnFocus = !isFocusable(e.target);
-        this.props.onClose(shouldReturnFocus);
-      }
-    };
-  }
-  componentDidMount() {
-    window.addEventListener("keyup", this._handleKeyup);
-    window.addEventListener("click", this._handleClick);
-  }
-  componentWillUnmount() {
-    window.removeEventListener("keyup", this._handleKeyup);
-    window.removeEventListener("click", this._handleClick);
-  }
-  render() {
-    return null;
-  }
-}
-
 class Popover extends React__namespace.Component {
   constructor(...args) {
     super(...args);
@@ -486,18 +473,16 @@ class Popover extends React__namespace.Component {
     const {
       initialFocusId,
       placement,
-      showTail
+      showTail,
+      portal
     } = this.props;
     const {
       anchorElement
     } = this.state;
-    return React__namespace.createElement(FocusManager, {
-      anchorElement: anchorElement,
-      initialFocusId: initialFocusId
-    }, React__namespace.createElement(wonderBlocksTooltip.TooltipPopper, {
+    const popperContent = React__namespace.createElement(wonderBlocksTooltip.TooltipPopper, {
       anchorElement: anchorElement,
       placement: placement
-    }, props => React__namespace.createElement(PopoverDialog, _extends({}, props, {
+    }, props => React__namespace.createElement(PopoverDialog, _extends__default["default"]({}, props, {
       "aria-describedby": `${uniqueId}-content`,
       "aria-labelledby": `${uniqueId}-title`,
       id: uniqueId,
@@ -505,11 +490,34 @@ class Popover extends React__namespace.Component {
         placement
       }),
       showTail: showTail
-    }), this.renderContent(uniqueId))));
+    }), this.renderContent(uniqueId)));
+    if (portal) {
+      return React__namespace.createElement(FocusManager, {
+        anchorElement: anchorElement,
+        initialFocusId: initialFocusId
+      }, popperContent);
+    } else {
+      return React__namespace.createElement(InitialFocus, {
+        initialFocusId: initialFocusId
+      }, popperContent);
+    }
   }
   getHost() {
     return wonderBlocksModal.maybeGetPortalMountedModalHostElement(this.state.anchorElement) || document.body;
   }
+  renderPortal(uniqueId, opened) {
+    if (!opened) {
+      return null;
+    }
+    const {
+      portal
+    } = this.props;
+    const popperHost = this.getHost();
+    if (portal && popperHost) {
+      return ReactDOM__namespace.createPortal(this.renderPopper(uniqueId), popperHost);
+    }
+    return this.renderPopper(uniqueId);
+  }
   render() {
     const {
       children,
@@ -520,7 +528,6 @@ class Popover extends React__namespace.Component {
       opened,
       placement
     } = this.state;
-    const popperHost = this.getHost();
     return React__namespace.createElement(PopoverContext.Provider, {
       value: {
         close: this.handleClose,
@@ -535,7 +542,7 @@ class Popover extends React__namespace.Component {
       "aria-controls": uniqueId,
       "aria-expanded": opened ? "true" : "false",
       onClick: this.handleOpen
-    }, children), popperHost && opened && ReactDOM__namespace.createPortal(this.renderPopper(uniqueId), popperHost))), dismissEnabled && opened && React__namespace.createElement(PopoverEventListener, {
+    }, children), this.renderPortal(uniqueId, opened))), dismissEnabled && opened && React__namespace.createElement(PopoverEventListener, {
       onClose: this.handleClose,
       contentRef: this.contentRef
     }));
@@ -543,7 +550,8 @@ class Popover extends React__namespace.Component {
 }
 Popover.defaultProps = {
   placement: "top",
-  showTail: true
+  showTail: true,
+  portal: true
 };
 
 class CloseButton extends React__namespace.Component {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "3.2.7",
+  "version": "3.2.9",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,12 +16,12 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^6.4.2",
-    "@khanacademy/wonder-blocks-icon-button": "^5.3.2",
-    "@khanacademy/wonder-blocks-modal": "^5.1.7",
-    "@khanacademy/wonder-blocks-tokens": "^1.3.0",
-    "@khanacademy/wonder-blocks-tooltip": "^2.3.6",
-    "@khanacademy/wonder-blocks-typography": "^2.1.13"
+    "@khanacademy/wonder-blocks-core": "^6.4.3",
+    "@khanacademy/wonder-blocks-icon-button": "^5.3.3",
+    "@khanacademy/wonder-blocks-modal": "^5.1.8",
+    "@khanacademy/wonder-blocks-tokens": "^1.3.1",
+    "@khanacademy/wonder-blocks-tooltip": "^2.3.7",
+    "@khanacademy/wonder-blocks-typography": "^2.1.14"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -32,6 +32,6 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "^1.0.0"
+    "@khanacademy/wb-dev-build-settings": "^1.0.1"
   }
 }

package/src/components/__tests__/popover.test.tsx

@@ -621,14 +621,15 @@ describe("Popover", () => {
         });
     });
 
-    describe("keyboard navigation", () => {
-        it("should move focus to the first focusable element after popover is open", async () => {
+    describe.each([true, false])("keyboard navigation", (portal) => {
+        it(`when portal=${portal}, should move focus to the first focusable element after popover is open`, async () => {
             // Arrange
             render(
                 <>
                     <Button>Prev focusable element outside</Button>
                     <Popover
                         onClose={jest.fn()}
+                        portal={portal}
                         content={
                             <PopoverContent
                                 title="Popover title"
@@ -667,13 +668,14 @@ describe("Popover", () => {
             ).toHaveFocus();
         });
 
-        it("should allow flowing focus correctly even if the popover remains open", async () => {
+        it(`when portal=${portal}, should allow flowing focus correctly even if the popover remains open`, async () => {
             // Arrange
             render(
                 <>
                     <Button>Prev focusable element outside</Button>
                     <Popover
                         onClose={jest.fn()}
+                        portal={portal}
                         content={
                             <PopoverContent
                                 title="Popover title"
@@ -709,13 +711,14 @@ describe("Popover", () => {
             ).toHaveFocus();
         });
 
-        it("should allow circular navigation when the popover is open", async () => {
+        it(`when portal=${portal}, should allow circular navigation when the popover is open`, async () => {
             // Arrange
             render(
                 <>
                     <Button>Prev focusable element outside</Button>
                     <Popover
                         onClose={jest.fn()}
+                        portal={portal}
                         content={
                             <PopoverContent
                                 title="Popover title"
@@ -757,13 +760,14 @@ describe("Popover", () => {
             ).toHaveFocus();
         });
 
-        it("should allow navigating backwards when the popover is open", async () => {
+        it(`when portal=${portal}, should allow navigating backwards when the popover is open`, async () => {
             // Arrange
             render(
                 <>
                     <Button>Prev focusable element outside</Button>
                     <Popover
                         onClose={jest.fn()}
+                        portal={portal}
                         content={
                             <PopoverContent
                                 title="Popover title"