house popper dependencies, add tippy back as a dep, fix a Tooltip bug (#4565)

* house popper dependencies, add tippy back as a dep, fix a Tooltip bug

* cleanup

* some snapshots and add license

Author: jschuler

.eslintignore

@@ -42,3 +42,6 @@ docs
 # Copied types
 DeprecatedPopperTypes.ts
 DeprecatedTippyTypes.ts
+
+# Copied thirdparty
+packages/react-core/src/helpers/Popper/thirdparty/**/*

packages/react-catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap

@@ -185,6 +185,7 @@ exports[`CatalogTile renders properly 1`] = `
                           onFocus={[Function]}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
+                          onTriggerEnter={[Function]}
                           placement="top"
                           popper={
                             <div
@@ -467,6 +468,7 @@ exports[`CatalogTile renders properly 1`] = `
                           onFocus={[Function]}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
+                          onTriggerEnter={[Function]}
                           placement="top"
                           popper={
                             <div
@@ -594,6 +596,7 @@ exports[`CatalogTile renders properly 1`] = `
                           onFocus={[Function]}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
+                          onTriggerEnter={[Function]}
                           placement="top"
                           popper={
                             <div
@@ -824,6 +827,7 @@ exports[`CatalogTile renders properly 1`] = `
                           onFocus={[Function]}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
+                          onTriggerEnter={[Function]}
                           placement="top"
                           popper={
                             <div
@@ -1060,6 +1064,7 @@ exports[`CatalogTile renders properly 1`] = `
                           onFocus={[Function]}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
+                          onTriggerEnter={[Function]}
                           placement="top"
                           popper={
                             <div

packages/react-core/package.json

@@ -38,10 +38,9 @@
     "@patternfly/react-icons": "^4.5.0",
     "@patternfly/react-styles": "^4.5.0",
     "@patternfly/react-tokens": "^4.6.0",
-    "@popperjs/core": "2.4.2",
     "focus-trap": "4.0.2",
     "react-dropzone": "9.0.0",
-    "react-popper": "2.2.3",
+    "tippy.js": "5.1.2",
     "tslib": "^1.11.1"
   },
   "devDependencies": {

packages/react-core/src/components/Tooltip/Tooltip.tsx

@@ -132,12 +132,19 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const transitionTimerRef = React.useRef(null);
   const showTimerRef = React.useRef(null);
   const hideTimerRef = React.useRef(null);
-  const handleKeyDown = (event: KeyboardEvent) => {
+  const onDocumentKeyDown = (event: KeyboardEvent) => {
     if (!triggerManually) {
       if (event.keyCode === KEY_CODES.ESCAPE_KEY && visible) {
         hide();
-      } else if (event.keyCode === KEY_CODES.ENTER && !visible) {
+      }
+    }
+  };
+  const onTriggerEnter = (event: KeyboardEvent) => {
+    if (event.keyCode === KEY_CODES.ENTER) {
+      if (!visible) {
         show();
+      } else {
+        hide();
       }
     }
   };
@@ -241,7 +248,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       onFocus={triggerOnFocus && show}
       onBlur={triggerOnFocus && hide}
       onDocumentClick={triggerOnClick && onDocumentClick}
-      onDocumentKeyDown={triggerManually ? null : handleKeyDown}
+      onDocumentKeyDown={triggerManually ? null : onDocumentKeyDown}
+      onTriggerEnter={triggerManually ? null : onTriggerEnter}
       enableFlip={enableFlip}
       zIndex={zIndex}
       flipBehavior={flipBehavior}

packages/react-core/src/components/Tooltip/__tests__/Generated/__snapshots__/Tooltip.test.tsx.snap

@@ -23,6 +23,7 @@ exports[`Tooltip should match snapshot (auto-generated) 1`] = `
   onFocus={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
+  onTriggerEnter={[Function]}
   placement="top"
   popper={
     <div

packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -23,6 +23,7 @@ exports[`tooltip renders 1`] = `
   onFocus={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
+  onTriggerEnter={[Function]}
   placement="top"
   popper={
     <div

packages/react-core/src/helpers/Popper/Popper.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { FindRefWrapper } from './FindRefWrapper';
-import { usePopper } from 'react-popper';
-import { Placement, Modifier, Boundary } from '@popperjs/core';
-import { Options as FlipOptions } from '@popperjs/core/lib/modifiers/flip';
-import getOppositePlacement from '@popperjs/core/lib/utils/getOppositePlacement';
+import { usePopper } from './thirdparty/react-popper/usePopper';
+import { Placement, BasePlacement, Modifier } from './thirdparty/popper-core';
 import { css } from '@patternfly/react-styles';
 
+const hash: {
+  [key: string]: string;
+} = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
+
+const getOppositePlacement = (placement: Placement): any =>
+  placement.replace(/left|right|bottom|top/g, (matched: string) => hash[matched] as BasePlacement);
+
 export interface ToggleMenuBaseProps {
   /** The container to append the menu to. Defaults to 'inline'
    * If your menu is being cut off you can append it to an element higher up the DOM tree.

packages/react-core/src/helpers/Popper/thirdparty/README.md

@@ -0,0 +1,23 @@
+# react-popper
+Copied and modified from https://github.com/popperjs/react-popper ("react-popper": "2.2.3")
+
+# popper-core
+Copied and modified from https://github.com/popperjs/popper-core ("@popperjs/core": "2.4.2")
+
+## Why
+Brought this in so that consumers don't have to deal with potential build errors / jest errors, etc
+
+## Note
+The code may not have the same level of quality as other components since it is thirdparty code that was modified just enough to make it work with the build. Although some types and eslint issues were fixed, many files have TS errors that were suppressed with the `// @ts-nocheck` comment, and some eslint errors were also supressed with `/* eslint-disable SOMETHING /*` comments.
+
+## Some modifications to make it work with our build
+- Converted flow to typescript (using npm package flow-to-ts)
+- Fixed some ts linting issues/added eslint ignores and ts-nocheck comments
+- Copied in some util functions
+- Some source changes
+- Replaced some dependencies (import isEqual from 'react-fast-compare' => JSON.stringify)
+
+# Changes for next breaking-change release
+- Delete the thirdparty folder and add them as dependencies to the package.json:
+`"react-popper": "2.2.3"`
+`"@popperjs/core": "2.4.2"`

packages/react-core/src/helpers/Popper/thirdparty/popper-core/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Federico Zivolo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/react-core/src/helpers/Popper/thirdparty/popper-core/dom-utils/contains.ts

@@ -0,0 +1,27 @@
+// @ts-nocheck
+/**
+ * @param parent
+ * @param child
+ */
+export default function contains(parent: Element, child: Element) {
+  // $FlowFixMe: hasOwnProperty doesn't seem to work in tests
+  const isShadow = Boolean(child.getRootNode && child.getRootNode().host);
+
+  // First, attempt with faster native method
+  if (parent.contains(child)) {
+    return true;
+  } // then fallback to custom implementation with Shadow DOM support
+  else if (isShadow) {
+    let next = child;
+    do {
+      if (next && parent.isSameNode(next)) {
+        return true;
+      }
+      // $FlowFixMe: need a better way to handle this...
+      next = next.parentNode || next.host;
+    } while (next);
+  }
+
+  // Give up, the result is false
+  return false;
+}