@redocly/theme 0.1.32 → 0.1.33

package/Tooltip/Tooltip.js

@@ -44,7 +44,9 @@ var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../hooks");
 function TooltipComponent(_a) {
     var children = _a.children, isOpen = _a.isOpen, tip = _a.tip, _b = _a.withArrow, withArrow = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.className, className = _d === void 0 ? 'default' : _d, width = _a.width, dataTestId = _a.dataTestId;
+    var ref = (0, react_1.useRef)(null);
     var _e = (0, hooks_1.useControl)(isOpen), isOpened = _e.isOpened, handleOpen = _e.handleOpen, handleClose = _e.handleClose;
+    (0, hooks_1.useOutsideClick)(ref, handleClose);
     var isControlled = isOpen !== undefined;
     (0, react_1.useEffect)(function () {
         if (isControlled) {
@@ -61,7 +63,7 @@ function TooltipComponent(_a) {
         onMouseLeave: handleClose,
         onClick: handleClose,
     };
-    return (react_1.default.createElement(TooltipWrapper, __assign({}, controllers, { className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" }),
+    return (react_1.default.createElement(TooltipWrapper, __assign({ ref: ref }, controllers, { className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" }),
         children,
         isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
 }
@@ -86,7 +88,7 @@ var PLACEMENTS = {
     }),
 };
 var TooltipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n"], ["\n  position: relative;\n  display: inline-block;\n"])));
-var TooltipBody = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"], ["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"])), function (_a) {
+var TooltipBody = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"], ["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width || '120px';
 }, function (_a) {

package/hooks/index.d.ts

@@ -5,3 +5,4 @@ export * from '../hooks/useActiveHeading';
 export * from '../hooks/useActiveSectionId';
 export * from '../hooks/useFullHeight';
 export * from '../hooks/useNavbarHeight';
+export * from '../hooks/useOutsideClick';

package/hooks/index.js

@@ -21,3 +21,4 @@ __exportStar(require("../hooks/useActiveHeading"), exports);
 __exportStar(require("../hooks/useActiveSectionId"), exports);
 __exportStar(require("../hooks/useFullHeight"), exports);
 __exportStar(require("../hooks/useNavbarHeight"), exports);
+__exportStar(require("../hooks/useOutsideClick"), exports);

package/hooks/useOutsideClick.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare function useOutsideClick(ref: MutableRefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void;

package/hooks/useOutsideClick.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideClick = void 0;
+var react_1 = require("react");
+function useOutsideClick(ref, handler) {
+    (0, react_1.useEffect)(function () {
+        var listener = function (event) {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return function () {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+}
+exports.useOutsideClick = useOutsideClick;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Tooltip/Tooltip.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren, ReactNode } from 'react';
-import React, { useEffect, memo } from 'react';
+import React, { useEffect, memo, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { useControl } from '@theme/hooks';
+import { useControl, useOutsideClick } from '@theme/hooks';
 
 export interface TooltipProps {
   tip: string | ReactNode;
@@ -24,8 +24,11 @@ export function TooltipComponent({
   width,
   dataTestId,
 }: PropsWithChildren<TooltipProps>): JSX.Element {
+  const ref = useRef<HTMLDivElement | null>(null);
   const { isOpened, handleOpen, handleClose } = useControl(isOpen);
 
+  useOutsideClick(ref, handleClose);
+
   const isControlled = isOpen !== undefined;
 
   useEffect(() => {
@@ -46,6 +49,7 @@ export function TooltipComponent({
 
   return (
     <TooltipWrapper
+      ref={ref}
       {...controllers}
       className={`tooltip-${className}`}
       data-component-name="Tooltip/Tooltip"
@@ -169,7 +173,6 @@ const TooltipBody = styled.span<
   overflow-wrap: break-word;
 
   border-radius: var(--global-border-radius);
-  pointer-events: none;
   transition: opacity 0.3s ease-out;
 
   font-size: 13px;

package/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from '@theme/hooks/useActiveHeading';
 export * from '@theme/hooks/useActiveSectionId';
 export * from '@theme/hooks/useFullHeight';
 export * from '@theme/hooks/useNavbarHeight';
+export * from '@theme/hooks/useOutsideClick';

package/src/hooks/useOutsideClick.ts

@@ -0,0 +1,21 @@
+import { MutableRefObject, useEffect } from 'react';
+
+export function useOutsideClick(
+  ref: MutableRefObject<HTMLElement | null>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}