@loomhq/lens 10.50.0 → 10.51.0

package/dist/components/tooltip/tooltip.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 declare type DelaySpeed = 'immediate' | 'long';
 declare const TooltipBoxWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipBoxProps, object>;
 export declare const TooltipBox: ({ children, maxWidth, onMouseEnter, onMouseLeave, layerProps, zIndex, ...rest }: TooltipBoxProps & React.ComponentProps<typeof TooltipBoxWrapper>) => JSX.Element;
-declare function Tooltip({ children, content, placement, keepOpen, triggerOffset, maxWidth, isInline, isDisabled, container, zIndex, verticalAlign, delay, ...rest }: TooltipProps): JSX.Element;
+declare const Tooltip: ({ children, content, placement, keepOpen, triggerOffset, maxWidth, isInline, isDisabled, container, zIndex, verticalAlign, delay, ...rest }: TooltipProps) => JSX.Element;
 export declare const availablePlacements: string[];
 declare type TooltipBoxProps = {
     children?: React.ReactNode;
@@ -25,5 +25,6 @@ declare type TooltipProps = {
     verticalAlign?: string;
     zIndex?: number;
     delay?: DelaySpeed;
+    tabIndex?: number;
 };
 export default Tooltip;

package/dist/components/tooltip/tooltip.js

@@ -9,12 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { getColorValue, getFontWeight, getRadius, getShadow, getSize, getTextSize, u, } from '../../utilities';
-import { useHover, useLayer } from 'react-laag';
+import { useHover, useLayer, mergeRefs } from 'react-laag';
 import ResizeObserver from 'resize-observer-polyfill';
 import styled from '@emotion/styled';
 import { textSizes } from '../../variables';
+import useFocusedElement from '../../hooks/use-focused-element';
 const placements = {
     topLeft: 'top-start',
     topCenter: 'top-center',
@@ -48,7 +49,7 @@ export const TooltipBox = (_a) => {
     var { children, maxWidth, onMouseEnter, onMouseLeave, layerProps, zIndex } = _a, rest = __rest(_a, ["children", "maxWidth", "onMouseEnter", "onMouseLeave", "layerProps", "zIndex"]);
     return (React.createElement(TooltipBoxWrapper, Object.assign({ maxWidth: maxWidth, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, zIndex: zIndex }, layerProps, rest), children));
 };
-const TooltipChildren = styled.span `
+const TooltipChildren = styled.div `
   display: ${props => (props.isInline ? 'inline-block' : 'block')};
   ${props => props.verticalAlign && `vertical-align: ${props.verticalAlign}`};
 `;
@@ -62,14 +63,18 @@ function getInitialDelaySpeed(delay) {
             return 200;
     }
 }
-function Tooltip(_a) {
+const Tooltip = (_a) => {
     var { children, content, placement = 'topCenter', keepOpen, triggerOffset = 4, maxWidth = 26, isInline = true, isDisabled, container, zIndex = 1100, verticalAlign = 'middle', delay = 'immediate' } = _a, rest = __rest(_a, ["children", "content", "placement", "keepOpen", "triggerOffset", "maxWidth", "isInline", "isDisabled", "container", "zIndex", "verticalAlign", "delay"]);
     const [show, hoverProps] = useHover({
         delayEnter: getInitialDelaySpeed(delay),
         delayLeave: 100,
     });
     const [isOverTooltip, setIsOverTooltip] = useState(false);
-    const isOpen = content && (show || (isOverTooltip && keepOpen)) && !isDisabled;
+    const focusRef = useRef();
+    const isFocused = useFocusedElement(focusRef);
+    // show the tooltip if a user has focused or hovered on it AND it is not disabled
+    const isOpen = (content && (show || (isOverTooltip && keepOpen)) && !isDisabled) ||
+        (content && isFocused && !isDisabled);
     const { layerProps, triggerProps, renderLayer } = useLayer({
         isOpen,
         placement: placements[placement],
@@ -79,10 +84,10 @@ function Tooltip(_a) {
         auto: true,
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(TooltipChildren, Object.assign({}, triggerProps, hoverProps, { isInline: isInline, verticalAlign: verticalAlign }), children),
+        React.createElement(TooltipChildren, Object.assign({}, triggerProps, hoverProps, { isInline: isInline, verticalAlign: verticalAlign, tabIndex: 0, ref: mergeRefs(triggerProps.ref, focusRef) }), children),
         isOpen &&
             renderLayer(React.createElement("div", Object.assign({}, layerProps, { style: Object.assign(Object.assign({}, layerProps.style), { zIndex }) }),
                 React.createElement(TooltipBox, Object.assign({ maxWidth: maxWidth, onMouseEnter: () => setIsOverTooltip(true), onMouseLeave: () => setIsOverTooltip(false) }, rest), content)))));
-}
+};
 export const availablePlacements = Object.keys(placements);
 export default Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.50.0",
+  "version": "10.51.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",