@loomhq/lens 10.53.1 → 10.54.1

package/dist/components/icon/available-icons/bell-off.d.ts

@@ -0,0 +1,2 @@
+export default SvgBellOff;
+declare function SvgBellOff(props: any): JSX.Element;

package/dist/components/icon/available-icons/bell-off.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+function SvgBellOff(props) {
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none" }, props),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.575 3.875A6.401 6.401 0 0118.502 8.4c0 3.003.643 4.86 1.229 5.935.294.54.58.892.776 1.099a2.618 2.618 0 00.263.243v.001a1 1 0 01-.567 1.823H4a1 1 0 01-.568-1.823h.001l.043-.034c.045-.038.122-.106.22-.21.196-.207.482-.56.776-1.1.586-1.074 1.228-2.93 1.228-5.934 0-1.698.675-3.326 1.875-4.526zM6.11 15.502h11.983a8.219 8.219 0 01-.118-.209c-.765-1.4-1.473-3.594-1.473-6.892a4.401 4.401 0 00-8.801 0c0 3.298-.709 5.491-1.473 6.892a8.57 8.57 0 01-.118.21zM10.042 19.238a1 1 0 011.367.363.8.8 0 001.385 0 1 1 0 011.73 1.004 2.8 2.8 0 01-4.845 0 1 1 0 01.363-1.367z", fill: "currentColor" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.29289 2.29289C2.68342 1.90237 3.31658 1.90237 3.70711 2.29289L22.0404 20.6262C22.431 21.0167 22.431 21.6499 22.0404 22.0404C21.6499 22.431 21.0167 22.431 20.6262 22.0404L2.29289 3.70711C1.90237 3.31658 1.90237 2.68342 2.29289 2.29289Z", fill: "currentColor" })));
+}
+export default SvgBellOff;

package/dist/components/icon/available-icons/index.d.ts

@@ -21,6 +21,8 @@ export { default as SvgReplay5 } from "./replay-5.js";
 export { default as SvgBack5 } from "./back5.js";
 export { default as SvgForward5 } from "./forward-5.js";
 export { default as SvgBarChart } from "./bar-chart.js";
+export { default as SvgBell } from "./bell.js";
+export { default as SvgBellOff } from "./bell-off.js";
 export { default as SvgBlur } from "./blur.js";
 export { default as SvgBorderColor } from "./border-color.js";
 export { default as SvgBulb } from "./bulb.js";
@@ -226,4 +228,3 @@ export { default as SvgPictureInPicture } from "./picture-in-picture.js";
 export { default as SvgFolderPlus } from "./folder-plus.js";
 export { default as SvgPower } from "./power.js";
 export { default as SvgReplay } from "./replay.js";
-export { default as SvgBell } from "./bell.js";

package/dist/components/icon/available-icons/index.js

@@ -21,6 +21,8 @@ export { default as SvgReplay5 } from './replay-5.js';
 export { default as SvgBack5 } from './back5.js';
 export { default as SvgForward5 } from './forward-5.js';
 export { default as SvgBarChart } from './bar-chart.js';
+export { default as SvgBell } from './bell.js';
+export { default as SvgBellOff } from './bell-off.js';
 export { default as SvgBlur } from './blur.js';
 export { default as SvgBorderColor } from './border-color.js';
 export { default as SvgBulb } from './bulb.js';
@@ -226,4 +228,3 @@ export { default as SvgPictureInPicture } from './picture-in-picture.js';
 export { default as SvgFolderPlus } from './folder-plus.js';
 export { default as SvgPower } from './power.js';
 export { default as SvgReplay } from './replay.js';
-export { default as SvgBell } from './bell.js';

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 const 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, tabIndex, zIndex, verticalAlign, delay, ...rest }: TooltipProps) => JSX.Element;
 export declare const availablePlacements: string[];
 declare type TooltipBoxProps = {
     children?: React.ReactNode;

package/dist/components/tooltip/tooltip.js

@@ -9,13 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { getColorValue, getFontWeight, getRadius, getShadow, getSize, getTextSize, u, } from '../../utilities';
 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',
@@ -64,17 +63,49 @@ function getInitialDelaySpeed(delay) {
     }
 }
 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"]);
+    var { children, content, placement = 'topCenter', keepOpen, triggerOffset = 4, maxWidth = 26, isInline = true, isDisabled, container, tabIndex = 0, zIndex = 1100, verticalAlign = 'middle', delay = 'immediate' } = _a, rest = __rest(_a, ["children", "content", "placement", "keepOpen", "triggerOffset", "maxWidth", "isInline", "isDisabled", "container", "tabIndex", "zIndex", "verticalAlign", "delay"]);
     const [show, hoverProps] = useHover({
         delayEnter: getInitialDelaySpeed(delay),
         delayLeave: 100,
     });
     const [isOverTooltip, setIsOverTooltip] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
     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);
+    useEffect(() => {
+        const isTooltipDisabled = !content || isDisabled;
+        if (isTooltipDisabled) {
+            return;
+        }
+        if (show || (isOverTooltip && keepOpen)) {
+            setIsOpen(true);
+        }
+        // We have to watch this separately since hover and focus are managed separately. So, an element can be keyboard focused while another element is mouse hovered.
+        if (!show) {
+            setIsOpen(false);
+        }
+    }, [content, isDisabled, isOverTooltip, keepOpen, setIsOpen, show]);
+    const handleFocus = () => {
+        setIsOpen(true);
+    };
+    const handleBlur = () => {
+        setIsOpen(false);
+    };
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const keyListener = e => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                handleBlur();
+            }
+        };
+        window.addEventListener('keydown', keyListener);
+        return () => {
+            window.removeEventListener('keydown', keyListener);
+        };
+    }, [isOpen, setIsOpen]);
     const { layerProps, triggerProps, renderLayer } = useLayer({
         isOpen,
         placement: placements[placement],
@@ -84,7 +115,7 @@ const Tooltip = (_a) => {
         auto: true,
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(TooltipChildren, Object.assign({}, triggerProps, hoverProps, { isInline: isInline, verticalAlign: verticalAlign, tabIndex: isDisabled ? -1 : 0, ref: mergeRefs(triggerProps.ref, focusRef) }), children),
+        React.createElement(TooltipChildren, Object.assign({}, triggerProps, hoverProps, { onFocus: handleFocus, onBlur: handleBlur, isInline: isInline, verticalAlign: verticalAlign, tabIndex: isDisabled ? -1 : tabIndex, 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)))));

package/package.json

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