@scm-manager/ui-components 2.30.2-20220115-125803 → 2.30.2-20220115-150339

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.30.2-20220115-125803",
+  "version": "2.30.2-20220115-150339",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.30.2-20220115-125803",
+    "@scm-manager/ui-tests": "^2.30.2-20220115-150339",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -66,9 +66,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.3",
-    "@scm-manager/ui-api": "^2.30.2-20220115-125803",
-    "@scm-manager/ui-extensions": "^2.30.2-20220115-125803",
-    "@scm-manager/ui-types": "^2.30.2-20220115-125803",
+    "@scm-manager/ui-api": "^2.30.2-20220115-150339",
+    "@scm-manager/ui-extensions": "^2.30.2-20220115-150339",
+    "@scm-manager/ui-types": "^2.30.2-20220115-150339",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/Tooltip.tsx

@@ -21,128 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, ReactNode, useEffect, useState } from "react";
-import styled from "styled-components";
-import classNames from "classnames";
-
-// See for css reference: https://github.com/Wikiki/bulma-tooltip/blob/master/src/sass/index.sass
-
-const TooltipWrapper = styled.span`
-  position: relative;
-  display: inline-block;
-`;
-
-const ArrowBase = styled.span`
-  z-index: 1020;
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-`;
-
-const ArrowTop = styled(ArrowBase)`
-  top: 0;
-  right: auto;
-  bottom: auto;
-  left: 50%;
-  margin-top: -5px;
-  margin-right: auto;
-  margin-bottom: auto;
-  margin-left: -5px;
-  border-width: 5px 5px 0 5px;
-`;
-
-const ArrowRight = styled(ArrowBase)`
-  top: auto;
-  right: 0;
-  bottom: 50%;
-  left: auto;
-  margin-top: auto;
-  margin-right: -5px;
-  margin-bottom: -5px;
-  margin-left: auto;
-  border-width: 5px 5px 5px 0;
-`;
-
-const ArrowLeft = styled(ArrowBase)`
-  top: auto;
-  right: auto;
-  bottom: 50%;
-  left: 0;
-  margin-top: auto;
-  margin-right: auto;
-  margin-bottom: -5px;
-  margin-left: -5px;
-  border-width: 5px 0 5px 5px;
-`;
-
-const ArrowBottom = styled(ArrowBase)`
-  top: auto;
-  right: auto;
-  bottom: 0;
-  left: 50%;
-  margin-top: auto;
-  margin-right: auto;
-  margin-bottom: -5px;
-  margin-left: -5px;
-  border-width: 0 5px 5px 5px;
-`;
-
-const Arrow = {
-  bottom: ArrowBottom,
-  left: ArrowLeft,
-  right: ArrowRight,
-  top: ArrowTop
-};
-
-const TooltipContainerBase = styled.div<{ multiline?: boolean }>`
-  z-index: 1020;
-  position: absolute;
-  padding: 0.5rem 1rem;
-  overflow: hidden;
-  hyphens: auto;
-  text-overflow: ${({ multiline }) => (multiline ? "clip" : "ellipsis")};
-  white-space: ${({ multiline }) => (multiline ? "normal" : "pre")};
-  max-width: ${({ multiline }) => (multiline ? "15rem" : "auto")};
-  width: ${({ multiline }) => (multiline ? "15rem" : "auto")};
-  word-break: ${({ multiline }) => (multiline ? "keep-all" : "unset")};
-`;
-
-const TooltipContainerTop = styled(TooltipContainerBase)`
-  left: 50%;
-  bottom: calc(100% + 5px);
-  transform: translateX(-50%);
-`;
-
-const TooltipContainerBottom = styled(TooltipContainerBase)`
-  left: 50%;
-  top: calc(100% + 5px);
-  transform: translateX(-50%);
-`;
-
-const TooltipContainerLeft = styled(TooltipContainerBase)`
-  right: calc(100% + 5px);
-  top: 50%;
-  transform: translateY(-50%);
-`;
-
-const TooltipContainerRight = styled(TooltipContainerBase)`
-  left: calc(100% + 5px);
-  top: 50%;
-  transform: translateY(-50%);
-`;
-
-const Container = {
-  bottom: TooltipContainerBottom,
-  left: TooltipContainerLeft,
-  right: TooltipContainerRight,
-  top: TooltipContainerTop
-};
+import React, { ReactNode } from "react";
 
 type Props = {
   message: string;
   className?: string;
-  location?: TooltipLocation;
+  location: TooltipLocation;
   multiline?: boolean;
   children: ReactNode;
   id?: string;
@@ -150,53 +34,27 @@ type Props = {
 
 export type TooltipLocation = "bottom" | "right" | "top" | "left";
 
-const Tooltip: FC<Props> = ({ className, message, location = "right", multiline, children, id }) => {
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    const listener = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        setOpen(false);
-      }
-    };
-    window.addEventListener("keydown", listener);
-    return () => window.removeEventListener("keydown", listener);
-  }, []);
-
-  const LocationContainer = Container[location];
-  const LocationArrow = Arrow[location];
-
-  return (
-    <TooltipWrapper
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
-      onClick={() => setOpen(false)}
-    >
-      {open ? (
-        <>
-          <LocationArrow className={`tooltip-arrow-${location}-border-color`} />
-          <LocationContainer
-            className={classNames(
-              className,
-              "is-size-7",
-              "is-family-primary",
-              "has-rounded-border",
-              "has-text-white",
-              "has-background-grey-dark",
-              "has-text-weight-semibold"
-            )}
-            multiline={multiline}
-            aria-live="polite"
-            id={id}
-            role="tooltip"
-          >
-            {message}
-          </LocationContainer>
-        </>
-      ) : null}
-      {children}
-    </TooltipWrapper>
-  );
-};
+class Tooltip extends React.Component<Props> {
+  static defaultProps = {
+    location: "right"
+  };
+
+  render() {
+    const { className, message, location, multiline, children, id } = this.props;
+    let classes = `tooltip has-tooltip-${location}`;
+    if (multiline) {
+      classes += " has-tooltip-multiline";
+    }
+    if (className) {
+      classes += " " + className;
+    }
+
+    return (
+      <span className={classes} data-tooltip={message} aria-label={message} id={id}>
+        {children}
+      </span>
+    );
+  }
+}
 
 export default Tooltip;