@loomhq/lens 10.58.2 → 10.60.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 const Tooltip: ({ children, content, placement, keepOpen, triggerOffset, maxWidth, isInline, isDisabled, container, tabIndex, zIndex, verticalAlign, delay, ...rest }: TooltipProps) => JSX.Element;
+declare const Tooltip: ({ children, content, placement, keepOpen, triggerOffset, maxWidth, isInline, isDisabled, container, tabIndex, zIndex, verticalAlign, delay, dynamicPosition, ...rest }: TooltipProps) => JSX.Element;
 export declare const availablePlacements: string[];
 declare type TooltipBoxProps = {
     children?: React.ReactNode;
@@ -21,6 +21,7 @@ declare type TooltipProps = {
     keepOpen?: boolean;
     maxWidth?: number | string | [];
     placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'leftTop' | 'leftCenter' | 'leftBottom' | 'rightTop' | 'rightCenter' | 'rightBottom';
+    dynamicPosition?: boolean;
     triggerOffset?: number;
     verticalAlign?: string;
     zIndex?: number;

package/dist/components/tooltip/tooltip.js

@@ -11,10 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 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 { useHover, useLayer, mergeRefs, useMousePositionAsTrigger, } from 'react-laag';
 import ResizeObserver from 'resize-observer-polyfill';
 import styled from '@emotion/styled';
 import { textSizes } from '../../variables';
+import { usePrefersReducedMotion } from '../../hooks/use-prefer-reduced-motion';
 const placements = {
     topLeft: 'top-start',
     topCenter: 'top-center',
@@ -69,15 +70,20 @@ function getInitialDelaySpeed(delay) {
     }
 }
 const Tooltip = (_a) => {
-    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"]);
+    var { children, content, placement = 'topCenter', keepOpen, triggerOffset = 4, maxWidth = 26, isInline = true, isDisabled, container, tabIndex = 0, zIndex = 1100, verticalAlign = 'middle', delay = 'immediate', dynamicPosition = false } = _a, rest = __rest(_a, ["children", "content", "placement", "keepOpen", "triggerOffset", "maxWidth", "isInline", "isDisabled", "container", "tabIndex", "zIndex", "verticalAlign", "delay", "dynamicPosition"]);
     const [show, hoverProps] = useHover({
         delayEnter: getInitialDelaySpeed(delay),
         delayLeave: 200,
     });
+    const { handleMouseEvent, trigger, parentRef } = useMousePositionAsTrigger({
+        enabled: show,
+    });
     const [isOverTooltip, setIsOverTooltip] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
     const focusRef = useRef();
     const isTooltipDisabled = !content || isDisabled;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const allowTrackMousePosition = dynamicPosition && !prefersReducedMotion;
     // show the tooltip if a user has focused or hovered on it AND it is not disabled
     useEffect(() => {
         const keepTooltipOpenOnHover = isOverTooltip && keepOpen;
@@ -130,9 +136,10 @@ const Tooltip = (_a) => {
         triggerOffset,
         container,
         auto: true,
+        trigger: allowTrackMousePosition ? trigger : null,
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(TooltipChildren, Object.assign({}, triggerProps, hoverProps, { onFocus: handleFocus, onBlur: handleBlur, isInline: isInline, verticalAlign: verticalAlign, tabIndex: isTooltipDisabled ? -1 : tabIndex, ref: mergeRefs(triggerProps.ref, focusRef) }), children),
+        React.createElement(TooltipChildren, Object.assign({}, triggerProps, hoverProps, { onFocus: handleFocus, onBlur: handleBlur, isInline: isInline, verticalAlign: verticalAlign, tabIndex: isTooltipDisabled ? -1 : tabIndex, ref: mergeRefs(triggerProps.ref, focusRef, parentRef), onMouseMove: allowTrackMousePosition ? handleMouseEvent : null }), 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/dist/css-utilities/rules.d.ts

@@ -106,7 +106,7 @@ export const displayRules: {
     selector: string;
     declarations: {
         property: string;
-        value: any;
+        value: string;
     }[];
 }[];
 export const flexWrapRules: {
@@ -129,7 +129,7 @@ export const flexItemRules: {
     modifier: string;
     declarations: {
         property: string;
-        value: any;
+        value: string;
     }[];
 }[];
 export const JustifyContentRules: {
@@ -137,7 +137,7 @@ export const JustifyContentRules: {
     modifier: string;
     declarations: {
         property: string;
-        value: any;
+        value: string;
     }[];
 }[];
 export const growRules: {
@@ -161,7 +161,7 @@ export const alignSelfRules: {
     modifier: string;
     declarations: {
         property: string;
-        value: any;
+        value: string;
     }[];
 }[];
 export const overflowRules: {

package/dist/hooks/use-prefer-reduced-motion.d.ts

@@ -0,0 +1 @@
+export function usePrefersReducedMotion(): boolean;

package/dist/hooks/use-prefer-reduced-motion.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+const QUERY = '(prefers-reduced-motion: no-preference)';
+export function usePrefersReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(true);
+    useEffect(() => {
+        const mediaQueryList = window.matchMedia(QUERY);
+        setPrefersReducedMotion(!window.matchMedia(QUERY).matches);
+        const listener = event => {
+            setPrefersReducedMotion(!event.matches);
+        };
+        mediaQueryList.addEventListener('toggle motion', listener);
+        return () => {
+            mediaQueryList.removeEventListener('toggle motion', listener);
+        };
+    }, []);
+    return prefersReducedMotion;
+}

package/dist/utilities/case.d.ts

@@ -1 +1 @@
-export function pascalCaseToKebabCase(string: any): any;
+export declare const pascalCaseToKebabCase: (string: string) => string;

package/dist/utilities/case.js

@@ -1,4 +1,4 @@
-export const pascalCaseToKebabCase = string => {
+export const pascalCaseToKebabCase = (string) => {
     return string
         .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
         .replace(/[\s_]+/g, '-')

package/dist/utilities/color.d.ts

@@ -1,3 +1,4 @@
-export function getColorAlpha(color: any, alpha: any): string;
-export function getColorScale(color: any, scaleType: any, scaleIncrement: any): string;
-export function getColorValue(color: any): any;
+import { hslaColors } from '../colors';
+export declare const getColorAlpha: (color: keyof typeof hslaColors, alpha: number) => string;
+export declare const getColorScale: (color: keyof typeof hslaColors, scaleType: string, scaleIncrement: number) => string;
+export declare const getColorValue: (color?: string) => string | undefined;

package/dist/utilities/color.js

@@ -13,7 +13,7 @@ export const getColorScale = (color, scaleType, scaleIncrement) => {
     };
     return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${Math.round(scaledValue())}%,${hslaColors[color].a})`;
 };
-export const getColorValue = color => {
+export const getColorValue = (color) => {
     if (color) {
         if (color in hslaColors || color in themeColors.light) {
             return `var(--lns-color-${color})`;

package/dist/utilities/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./color";
-export * from "./responsive";
-export * from "./size";
-export * from "./styles";
-export * from "./case";
+export * from './color';
+export * from './responsive';
+export * from './size';
+export * from './styles';
+export * from './case';

package/package.json

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