@khanacademy/perseus 0.4.0 → 0.4.2

package/dist/strings.js

@@ -50,8 +50,6 @@ module.exports = [
     i18n._("Click on the tiles to change the lights.", {}),
     i18n._("Click to add points", {}),
     i18n._("Click to add vertices", {}),
-    i18n._("Close", {}),
-    i18n._("Closes the tooltip: ", {}),
     i18n._("Correct", {}),
     i18n._("Correct (but you crossed it out)", {}),
     i18n._("Correct (selected)", {}),

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "0.4.0",
+    "version": "0.4.2",
     "publishConfig": {
         "access": "public"
     },
@@ -23,19 +23,20 @@
     "dependencies": {
         "@khanacademy/kas": "^0.2.5",
         "@khanacademy/kmath": "^0.0.6",
-        "@khanacademy/math-input": "^0.5.6",
+        "@khanacademy/math-input": "^0.6.1",
         "@khanacademy/perseus-linter": "^0.2.1",
         "@khanacademy/pure-markdown": "^0.1.1",
         "@khanacademy/simple-markdown": "^0.8.4",
-        "@khanacademy/wonder-blocks-form": "^2.4.5",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^2.11.5",
+        "@khanacademy/wonder-blocks-clickable": "^2.2.6",
         "@khanacademy/wonder-blocks-color": "^1.1.20",
         "@khanacademy/wonder-blocks-core": "^4.3.0",
         "@khanacademy/wonder-blocks-data": "^7.0.0",
         "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
+        "@khanacademy/wonder-blocks-form": "^2.4.5",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
         "@khanacademy/wonder-blocks-layout": "^1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
@@ -62,10 +63,12 @@
     },
     "peerDependencies": {
         "@khanacademy/wonder-blocks-button": "^2.11.5",
+        "@khanacademy/wonder-blocks-clickable": "^2.2.6",
         "@khanacademy/wonder-blocks-color": "^1.1.20",
         "@khanacademy/wonder-blocks-core": "^4.3.0",
         "@khanacademy/wonder-blocks-data": "^7.0.0",
         "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
+        "@khanacademy/wonder-blocks-form": "^2.4.5",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
         "@khanacademy/wonder-blocks-layout": "^1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",

package/src/components/highlighting/ui/highlight-tooltip.jsx

@@ -38,22 +38,6 @@ type HighlightTooltipProps = {|
 class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
     _tooltip: ?React.ElementRef<typeof NewTooltip>;
 
-    componentDidUpdate(oldProps: HighlightTooltipProps) {
-        // If the highlight focus might've changed, then tell the tooltip to
-        // remeasure itself. For "Add highlight", this happens when an existing
-        // selection is updated, e.g., by using the Shift+RightArrow shortcut.
-        // For "Remove highlight", this can happen when we quickly switch from
-        // targeting one highlight to another: we reuse the same
-        // HighlightTooltip instance, for improved performance.
-        if (
-            this.props.focusNode !== oldProps.focusNode ||
-            this.props.focusOffset !== oldProps.focusOffset ||
-            this.props.offsetParent !== oldProps.offsetParent
-        ) {
-            this._tooltip?.remeasure();
-        }
-    }
-
     _getFocusRect(): ?Rect {
         const {focusNode, focusOffset, offsetParent} = this.props;
 

package/src/components/new-tooltip/README.md

@@ -1,110 +1,3 @@
 # `NewTooltip`: KA tooltip component
 
-Across the Khan Academy webapp, we use a shared "tooltip" UI element, to visually annotate page elements with additional information. This React component, `NewTooltip`, is designed to satisfy all of our tooltip needs! 😄
-
-**Warning: This component is WIP!** We're in the process of rolling out this tooltip to eventually replace the old `Tooltip` component. `NewTooltip` is currently is only used at a select few call sites. [Scroll down for details.](#warning-this-component-is-wip)
-
-## Usage
-
-To point a tooltip at an element, wrap it in a `NewTooltip` component:
-
-```jsx
-<NewTooltip content={i18n._("You should click on this!")}>
-    <button><$_>Assign to students</$_></button>
-</NewTooltip>
-```
-
-This will produce a tooltip that says "You should click on this!" when you hover over the wrapped button.
-
-You can also provide more advanced content:
-
-```jsx
-const content = <div className={css(styles.tooltipContent)}>
-    <p><$_>You should click on this!</$_></p>
-    <p><$_>It will help you!</$_></p>
-</div>;
-
-<NewTooltip content={content}>
-    <button>Assign to students</button>
-</NewTooltip>
-```
-
-There are also many styling, positioning, and behavioral options for the tooltip! See `types.js` for the list of options, and the [React Sandbox][fixtures] to see them in action.
-
-## Accessibility
-
-Unlike some other tooltip components on the web, this tooltip is a _visual_ element rather than a semantic element. Its use cases are relatively diverse:
-
-* Explaining a UI control
-* Illustrating a relationship between two permanent UI elements
-* Showing a transient UI element without disrupting the flow of the document
-* Prompting the user to take a secondary or blocking action (tooltip) before taking the main action (target)
-
-The key commonality is that the tooltip and its target are somehow _related_… but that's about it.
-
-**So, be sure to add your own ARIA attributes to tooltip targets and content!** Only you know the semantic relationship between your tooltip and target, so it's up to you to express it.
-
-## Package structure
-
-The two most important files in this package are:
-
-* `new-tooltip.jsx`: The entry point to our tooltip code. Manages high-level visibility state. Renders the tooltip's target element inline, and renders a `TooltipPortal` to get the tooltip content outside of any `overflow: hidden` containers.
-* `types.js`: Defines the props for `NewTooltip`.
-
-We also have a number of supporting files, as well:
-
-* React components
-    * `tooltip-portal.jsx`: Simulates a [React 16 portal][react-portal]. Creates a node near the root of the document, and renders a `TooltipPositioner` there, instead of inline with the target element.
-    * `tooltip-positioner.jsx`: Manages the position of the tooltip UI. Computes the position of the target element, and watches for changes. Renders a `TooltipBubble` and `TooltipArrow`, positioned to point at the target element.
-    * `tooltip-bubble.jsx`: The main tooltip "bubble" element. Renders the tooltip content.
-    * `tooltip-arrow.jsx`: The little triangle that points from the tooltip bubble to the target element.
-* Library files:
-    * `util.js`: Miscellaneous utility functions.
-
-Note that these components are relatively tightly coupled—for example, rather than specifying their individual data requirements, each tooltip component just forwards the entire set of `tooltipProps` to its child tooltip components. This enables faster iteration, but means that the child components aren't especially reusable.
-
-## Warning: This component is WIP!
-
-This is `NewTooltip`, a fork of the old `Tooltip`, in which we've built a brand new layout algorithm to address some key UX issues. Someday, `NewTooltip` will replace `Tooltip`, hooray! [See ADR #33 for details.][adr-33]
-
-`NewTooltip` is probably _feature-ready_ for most use cases on Khan Academy, but **general usage is not yet advised**. We're still developing our plan for the "Wonder Blocks" shared component rollout, and we want to keep call sites well-constrained until we know more. But, if you _need_ the features of `NewTooltip` today, maybe we can figure something out! Hit up the [#reusable-components][reusable-components] Slack channel.
-
-But, if you need a feature that hasn't been ported yet, maybe you'll want to continue to use `Tooltip`. (Or port the feature into `NewTooltip`? 😍)
-
-Here's the overall behavioral comparison right now. Especially valuable features are marked with a star (⭐️).
-
-| Feature                                      | `NewTooltip` | `Tooltip` |
-|----------------------------------------------|--------------|-----------|
-| ⭐️ **Basic tooltip functionality**           | ✅            | ✅        |
-| ⭐️ **Escape `overflow: hidden` containers**  | ✅            | ✅        |
-| ⭐️ **Attach to any side of the target**      | ✅            | ✅        |
-| ⭐️ **Configurable colors**                   | ✅            | ✅        |
-| ⭐️ **Dismiss on click**                      | ✅            | ✅        |
-| ⭐️ **Only show once per user lifetime**      | ✅            | ✅        |
-| Tweak position via the `offset` prop         | ✅            | ✅        |
-| Arrow center-aligned with bubble             | ✅            | ✅        |
-| ⭐️ **Auto-shift position to avoid wrapping** | ✅            | ❌        |
-| ⭐️ **Auto-reposition during scrolling**      | ✅            | ❌        |
-| ⭐️ **Update content without remounting**     | ✅            | ❌        |
-| ⭐️ **Media queries to show/hide tooltip**    | ✅            | ❌        |
-| Can specify offset from the _arrow_          | ✅            | ❌        |
-| Can specify margin around tooltip            | ✅            | ❌        |
-| ⭐️ **Can be used inside a modal**            | ✅            | ✅        |
-| Can target `position: fixed` elements        | ❌            | ✅        |
-| Auto-choose top or bottom anchoring          | ❌            | ✅        |
-| Try to left/right align tooltip with target  | ❌            | ✅        |
-| Manual positioning (left/top)                | ❌            | ✅        |
-| Dismiss on scroll/interaction/timer          | ❌            | ✅        |
-| Show tooltip when target gains focus         | ❌            | ✅        |
-
-> NOTE(mdr): It's possible that some of the old `Tooltip` features are also "especially valuable", and I just don't know about it yet! So far we've only used `NewTooltip` at GTP call sites, and they haven't needed many of these features, so it's not clear to me how broadly they're actually used. (We'll probably have to support most of the missing options eventually, but maybe not all, in case some of their use cases were addressed by the general positioning improvements?)
-
-Eventually, we'll roll out `NewTooltip` to all KA call sites, and upgrade it to support everything that the old `Tooltip` call sites need. So, no worries if you end up adding new `Tooltip` call sites; we'll help upgrade them soon! [For more details, see ADR #33.][adr-33]
-
-  [adr-33]: https://docs.google.com/document/d/1B4pMGWp344e96RmIbnsmUBiTbrizdbOvipe-9I_1iZQ/edit
-  [fixtures]: http://localhost:8081/react-sandbox/components/new-tooltip-package/new-tooltip.jsx.fixture.js
-  [react-portal]: https://reactjs.org/docs/portals.html
-  [reusable-components]: https://khanacademy.slack.com/messages/C4PE1QM5Y/
-
-Code-Owner: Frontend Infrastructure
-Crowdin-Category: _other_
+This is a wrapper around [Wonderblock's popover component](https://github.com/Khan/wonder-blocks). It is API compatiable with Perseus and remains for compatiability and legacy reasons. If you are anyone but the Perseus group at Khan Academy please use the wonderblocks component directly.

package/src/components/new-tooltip/new-tooltip.jsx

@@ -1,35 +1,15 @@
 /* eslint-disable react/no-unsafe */
 // @flow
 /**
- * This component has been obsoleted by the Wonder Blocks tooltip (https://wonder-blocks.netlify.app/#tooltip-1).
- * It is no longer a WIP.  The Wonder Blocks tooltip should be used in future development.
- *
- * This top-level component primarily manages high-level visibility state. It
- * renders the tooltip's target element inline, and renders a TooltipPortal
- * to get the tooltip content outside of any `overflow: hidden` containers.
- *
- * For usage information and help navigating this package, see `README.md`.
- * For prop type information, see `types.js`.
- *
- * Public methods:
- *   - `remeasure()`: Re-measure the target element's position, and update the
- *     tooltip's position. This is helpful to call when the parent is aware of
- *     a change in the target element's position, which might not be clear from
- *     the events that the tooltip is watching (e.g., scrolls).
+ * This component is a wrapper around Wonderblock's tooltip with the API
+ * that perseus expects
  */
-import {StyleSheet, css} from "aphrodite";
-import PropTypes from "prop-types";
+
+import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import * as React from "react";
 
-import {getDependencies} from "../../dependencies.js";
-import {Errors, Log} from "../../logging/log.js";
-import {PerseusError} from "../../perseus-error.js";
 import {colors} from "../../styles/global-styles.js";
-import {createVisibilityObserver} from "../visibility-observer/visibility-observer.js";
-
-import TooltipPortal from "./tooltip-portal.jsx";
 
-import type {VisibilityObserver} from "../visibility-observer/visibility-observer.js";
 import type {NewTooltipProps} from "./types.js";
 
 type NewTooltipState = {|
@@ -37,28 +17,11 @@ type NewTooltipState = {|
     dismissed: boolean,
     // Whether the target element is currently being hovered.
     hovered: boolean,
-    // Whether the target element is currently visible, relative to the "root
-    // element" where we're mounting the tooltip.
-    //
-    // NOTE(mdr): This can be true (element is visible), false (element is not
-    //     visible), or null (unknown).
-    targetElementIsVisible: ?boolean,
 |};
 
 type Props = {|
     ...NewTooltipProps,
 
-    // The wrapped content that serves as the target of the tooltip.
-    //
-    // This must be a single React element, with block-like styles. (e.g.,
-    // `display: block`, `display: inline-block`, `display: flex`, etc.)
-    //
-    // Unfortunately, we can't reliably track the position of inline elements,
-    // and we can't wrap your children in a block-like element without
-    // potentially disrupting your call site's layout.
-    //
-    // So, your element will need to be block-like. Sorry for the extra
-    // constraint! (For details, see the `render` method of `NewTooltip`).
     children: React$Element<any>,
 |};
 
@@ -88,218 +51,27 @@ export const DefaultPropValues: DefaultProps = Object.freeze({
     showOnMount: false,
 });
 
-class NewTooltip extends React.PureComponent<Props, NewTooltipState> {
-    // The root element, where we'll mount tooltips.
-    _rootElement: HTMLElement;
-
-    // The wrapper element that we created, to listen to mouse events.
-    _wrapper: ?HTMLElement;
-
-    // The target element itself: the child of the wrapper, provided by the
-    // caller.
-    _targetElement: ?HTMLElement;
-
-    // Our child TooltipPortal instance. Used to pass down `remeasure` calls.
-    _tooltipPortal: ?TooltipPortal;
-
-    // The VisibilityObserver, notifying us when the element enters or exits
-    // total invisibility. Will be null iff the browser doesn't support the
-    // necessary APIs.
-    _visibilityObserver: VisibilityObserver;
-
-    // Whether this component is mounted.
-    _isMounted: boolean;
-
-    // A timeout used in `componentDidMount`.
-    _targetElementMountTimeout: ?TimeoutID;
-
+class NewTooltip extends React.Component<Props, NewTooltipState> {
     static defaultProps: DefaultProps = DefaultPropValues;
 
     constructor(props: Props) {
         super(props);
 
-        this._isMounted = false;
-
         this.state = {
             dismissed: props.dismissed != null ? props.dismissed : false,
             hovered: false,
-            targetElementIsVisible: false,
         };
     }
 
-    componentDidMount() {
-        this._isMounted = true;
-
-        this._registerVisibilityObserver();
-    }
-
     UNSAFE_componentWillReceiveProps(nextProps: Props) {
-        if (nextProps.dismissed != null) {
-            // We're serving as a "controlled component": our dismissed state
-            // always matches the incoming props.
+        if (Object.keys(nextProps).includes("dismissed")) {
             this.setState({dismissed: nextProps.dismissed});
         }
     }
 
-    UNSAFE_componentWillUpdate() {
-        // The component may receive a new root element via the context.
-        // For example, we may get a modal root element that has become
-        // available.
-
-        this._registerVisibilityObserver();
-    }
-
-    componentWillUnmount() {
-        this._isMounted = false;
-        if (this._targetElementMountTimeout) {
-            // TODO(jeff, WEB-1378): Use Wonder Blocks Timing API.
-            // eslint-disable-next-line no-restricted-syntax
-            clearTimeout(this._targetElementMountTimeout);
-        }
-        this._visibilityObserver.disconnect();
-    }
-
-    _findRootElement(): any {
-        // In the Khan Academy webapp, the best place to mount is the
-        // #outer-wrapper element, because it's our outermost scroll container.
-        // But, if we're for some reason in a page without an #outer-wrapper,
-        // then mounting at the body element is probably a good guess.
-        // Also, if there is a modal anywhere in the context, it should be the
-        // root because it obscures the visibility of the higher containers.
-        //
-        // HACK(davidflanagan):
-        // Missions use a modal-like ../../tasks-package/task-container.jsx
-        // component that does not work like our standard modal, so we handle
-        // that with a special hardcoded case element id. When this component
-        // is converted to a wonder block, we should upgrade Modal to use
-        // the new context mechanism instead of the legacy mechanism and
-        // replace this mission-task-container id with context.
-        return (
-            this.context.modalContainerElement ||
-            document.getElementById("mission-task-container") ||
-            document.getElementById("outer-wrapper") ||
-            document.body
-        );
-    }
-
-    // When this component mounts inside a modal, we don't have the modal
-    // container in the context yet. That comes during the next cycle. If the
-    // tooltip is in the modal, it will be observing with respect to the app
-    // root for a moment (and won't display because it is obscured) and then
-    // it will get called again on the next update because the context changes.
-    // When it sees that the root is different, it will unregister the first
-    // and register the new one.
-    _registerVisibilityObserver() {
-        const rootElement = this._findRootElement();
-
-        if (!rootElement) {
-            throw new PerseusError(
-                "Failed to mount NewTooltip: " +
-                    "we need a #outer-wrapper or document.body element.",
-                Errors.Internal,
-            );
-        }
-
-        if (rootElement === this._rootElement) {
-            return;
-        }
-
-        this._rootElement = rootElement;
-
-        if (this._visibilityObserver) {
-            this._visibilityObserver.disconnect();
-        }
-
-        // Create a VisibilityObserver, and start by assuming the target
-        // element is invisible. On mount, we'll start observing the
-        // target, and check whether it's visible.
-        this._visibilityObserver = createVisibilityObserver(
-            rootElement,
-            this._handleVisibilityChange,
-        );
-
-        // Find our target element. We do this by walking down the DOM tree,
-        // until we find a node that doesn't have `data-tooltip-wrapper` on it.
-        //
-        // (This also enables us to compose tooltips: if you wrap an element
-        // in multiple tooltips, we'll skip *all* the wrapper elements, and
-        // find the correct element.)
-        //
-        // HACK(mdr): I'm not entirely satisfied with this :/ The whole tooltip
-        //     composition "API" is a bit of a hack to support different
-        //     tooltip props based on media query, and a *robust* way of
-        //     specifying that would probably be preferable... but, in the
-        //     meantime, I'd rather not invent new styling patterns (there's
-        //     already enough fragmentation!), and instead write some
-        //     well-encapsulated hacks that keep the public-facing API simple
-        //     and low on new concepts.
-        const wrapper = this._wrapper;
-        if (!wrapper) {
-            throw new PerseusError(
-                "NewTooltip expected a wrapper element after mount",
-                Errors.Internal,
-            );
-        }
-        let targetElement: HTMLElement = wrapper;
-        while (targetElement.hasAttribute("data-tooltip-wrapper")) {
-            targetElement = (targetElement.childNodes[0]: any);
-            if (!targetElement) {
-                throw new PerseusError(
-                    "NewTooltip expected wrapper element to have a child",
-                    Errors.Internal,
-                );
-            }
-        }
-        this._targetElement = targetElement;
-
-        // Now that we've mounted, update our TooltipPortal (by re-rendering)
-        // and our VisibilityObserver, so they can be aware of our new target
-        // element.
-        // TODO(jeff, WEB-1378): Use Wonder Blocks Timing API.
-        // eslint-disable-next-line no-restricted-syntax
-        this._targetElementMountTimeout = setTimeout(() => {
-            const targetElement = this._targetElement;
-            if (!targetElement) {
-                throw new PerseusError(
-                    "NewTooltip should have a target element after mounting.",
-                    Errors.Internal,
-                );
-            }
-
-            // While we're here, let's also check whether the element is
-            // block-like, as is required for position tracking to work. If
-            // not, warn the developer - but in prod, skip this, because
-            // it's slow.
-            if (getDependencies().isDevServer) {
-                if (getComputedStyle(targetElement).display === "inline") {
-                    Log.error(
-                        "Warning: The children of a NewTooltip element " +
-                            "must be block-like, but this element seems " +
-                            "to have `display: inline`. This could break " +
-                            "position tracking.",
-                        Errors.Internal,
-                    );
-                    Log.log("NewTooltip Target Element:", {
-                        targetElement: targetElement.outerHTML,
-                    });
-                }
-            }
-
-            this._visibilityObserver.setTargetElement(targetElement);
-
-            this.forceUpdate();
-        }, 0);
-    }
-
     _shouldShowTooltip(): boolean {
         const {toggleOnHover, showOnMount} = this.props;
-        const {dismissed, targetElementIsVisible} = this.state;
-
-        // If the target element isn't visible, then we shouldn't show the
-        // tooltip, regardless of configuration.
-        if (targetElementIsVisible === false) {
-            return false;
-        }
+        const {dismissed} = this.state;
 
         // If the tooltip was dismissed, or we're not sure yet, don't show it.
         if (dismissed) {
@@ -322,78 +94,62 @@ class NewTooltip extends React.PureComponent<Props, NewTooltipState> {
         return false;
     }
 
-    _handleVisibilityChange: (targetElementIsVisible: boolean) => void = (
-        targetElementIsVisible: boolean,
-    ) => {
-        this.setState({targetElementIsVisible});
-    };
-
-    _handleMouseEnter: () => void = () => {
-        this.setState({hovered: true});
-    };
-
-    _handleMouseLeave: () => void = () => {
-        this.setState({hovered: false});
-    };
-
     _handleDismiss: () => void = () => {
         if (this.props.dismissed == null) {
             // We're serving as an "uncontrolled component": our dismissed
             // state is managed by us, not by incoming props.
             this.setState({dismissed: true});
         }
+
         this.props.onDismiss && this.props.onDismiss();
     };
 
-    remeasure() {
-        this._tooltipPortal && this._tooltipPortal.remeasure();
-    }
+    _popoverContentColor: () => "white" | "blue" | "darkBlue" = () => {
+        const {inverted, color} = this.props;
+        if (inverted) {
+            return "darkBlue";
+        } else if (color === "blue") {
+            return "blue";
+        }
 
-    render(): React.Element<"div"> {
-        const {children, toggleOnHover} = this.props;
-        const {children: _, ...portalProps} = this.props;
+        return "white";
+    };
 
+    render(): React.Element<any> {
+        const {side, children, content, dismissOnClickClose} = this.props;
+        const {onMouseEnter, onMouseLeave} = this.props;
         return (
-            <div
-                className={css(styles.targetElement)}
-                onMouseEnter={
-                    toggleOnHover ? this._handleMouseEnter : undefined
-                }
-                onMouseLeave={
-                    toggleOnHover ? this._handleMouseLeave : undefined
+            <Popover
+                content={
+                    <PopoverContentCore
+                        color={this._popoverContentColor()}
+                        closeButtonVisible={dismissOnClickClose}
+                        style={{}}
+                    >
+                        {content}
+                    </PopoverContentCore>
                 }
-                ref={(node) => (this._wrapper = node)}
-                data-tooltip-wrapper
-                data-test-id="question-id"
+                placement={side}
+                opened={this._shouldShowTooltip()}
+                onClose={this._handleDismiss}
+                dismissEnabled={false}
+                testId="question-id"
             >
-                {children}
-                {this._targetElement && this._shouldShowTooltip() && (
-                    <TooltipPortal
-                        tooltipProps={portalProps}
-                        dismiss={this._handleDismiss}
-                        rootElement={this._rootElement}
-                        targetElement={this._targetElement}
-                        isAboveModal={!!this.context.modalContainerElement}
-                        ref={(node) => (this._tooltipPortal = node)}
-                    />
-                )}
-            </div>
+                <div
+                    onMouseEnter={() => {
+                        onMouseEnter && onMouseEnter();
+                        this.setState({hovered: true});
+                    }}
+                    onMouseLeave={() => {
+                        onMouseLeave && onMouseLeave();
+                        this.setState({hovered: false});
+                    }}
+                >
+                    {children}
+                </div>
+            </Popover>
         );
     }
 }
 
-NewTooltip.contextTypes = {
-    modalContainerElement: PropTypes.instanceOf(HTMLElement),
-};
-
-const styles = StyleSheet.create({
-    targetElement: {
-        // NOTE(mdr): By setting this container to `display: inline`, we avoid
-        //     disrupting the call site's layout! Yay! Unfortunately, this
-        //     requires other hacks in order to do position tracking; see the
-        //     `cloneElement` call in `render`.
-        display: "inline",
-    },
-});
-
 export default NewTooltip;