@konturio/ui-kit - npm Package Compare versions

Comparing version 3.12.2 to 3.13.0

package.json

 {
   "name": "@konturio/ui-kit",
-  "version": "3.12.2",
+  "version": "3.13.0",
   "repository": {
@@ -34,3 +34,3 @@ "type": "git",
   },
-  "gitHead": "78fecdc500e1d74acecd240f7d1a1f8af0b0e2e6"
+  "gitHead": "c603ac43b72cc51c88aba23478948cfc743bb893"
 }

tslib/Timeline/implementation/vis-timeline/useVisTimeline.d.ts

@@ -7,7 +7,6 @@ import { Timeline as VisTimeline } from 'vis-timeline';
 import type { TooltipEntry, TimelineOptions } from '../../types';
-import type { TooltipCoords } from '../../../Tooltip/types';
 export declare function useVisTimeline(timelineContainerRef: MutableRefObject<null>, data: DataSet<DataItem, 'id'>, options: TimelineOptions, setTooltipEntry: (payload: {
     entry: TooltipEntry;
-    position: TooltipCoords;
+    target: Element;
 } | null) => void): VisTimeline | null;
 //# sourceMappingURL=useVisTimeline.d.ts.map

tslib/Timeline/implementation/vis-timeline/useVisTimeline.js

@@ -8,2 +8,7 @@ import { useEffect, useState, useRef } from 'react';
 import { toTooltipEntry } from './toTooltipEntry';
+function useSyncedRef(data) {
+    const dataRef = useRef();
+    dataRef.current = data;
+    return dataRef;
+}
 export function useVisTimeline(timelineContainerRef, data, options, setTooltipEntry) {
@@ -29,4 +34,3 @@ const [timeline, setTimeline] = useState(null);
     }, [data]);
-    const dataMapRef = useRef(data);
-    dataMapRef.current = data;
+    const dataMapRef = useSyncedRef(data);
     const { onSelect } = options;
@@ -41,3 +45,3 @@ useEffect(() => {
                     entry: toTooltipEntry(entry),
-                    position: { x: event.clientX, y: event.clientY },
+                    target: event.target,
                 });
@@ -55,3 +59,3 @@ }
         };
-    }, [timeline, dataMapRef, setTooltipEntry]);
+    }, [timeline, setTooltipEntry]);
     useEffect(() => {
@@ -88,4 +92,4 @@ if (!onSelect)
         };
-    }, [timeline, onSelect]);
+    }, [timeline, onSelect, dataMapRef]);
     return timeline;
 }

tslib/Timeline/implementation/vis-timeline/VisTimeline.js

 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useMemo, useRef, forwardRef, useState } from 'react';
+import { useEffect, useImperativeHandle, useMemo, useRef, forwardRef, useState, useCallback } from 'react';
 import { DataSet } from 'vis-data';
@@ -11,4 +11,16 @@ import { toVisTimelineDataset } from './toVisTimelineDataset';
     const { tooltipComponent: TooltipComponent } = rest;
+    const tooltipTargetRef = useRef(null);
     const [tooltipData, setTooltipData] = useState(null);
-    const timeline = useVisTimeline(timelineContainerRef, data, options, setTooltipData);
+    const setTooltip = useCallback((payload) => {
+        setTooltipData(() => {
+            if (payload === null) {
+                tooltipTargetRef.current = null;
+                return null;
+            }
+            const { entry, target } = payload;
+            tooltipTargetRef.current = target;
+            return { entry };
+        });
+    }, []);
+    const timeline = useVisTimeline(timelineContainerRef, data, options, setTooltip);
     useImperativeHandle(ref, () => ({
@@ -29,4 +41,4 @@ fit: () => timeline?.fit(),
     }, [timeline, selected]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: timelineContainerRef }), TooltipComponent && tooltipData && (_jsx(TooltipComponent, { hoverBehavior: true, position: tooltipData.position, entry: tooltipData.entry, onClose: () => setTooltipData(null) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: timelineContainerRef }), TooltipComponent && tooltipData && (_jsx(TooltipComponent, { hoverBehavior: true, open: tooltipData !== null, triggerRef: tooltipTargetRef, entry: tooltipData.entry, onClose: () => setTooltipData(null) }))] }));
 });
 VisTimeline.displayName = 'VisTimeline';

tslib/Timeline/types.d.ts

 /// <reference types="react" />
 import type { TimelineOptions as VisTimelineOptions } from 'vis-timeline';
-import type { TooltipProps } from '../Tooltip/Tooltip/Tooltip';
+import type { TooltipProps } from '../Tooltip/types';
 export interface TimelineEntry {
@@ -5,0 +5,0 @@ id: string | number;

tslib/Tooltip/Tooltip/Tooltip.d.ts

@@ -1,16 +0,5 @@
-import type { LegacyRef, PropsWithChildren } from 'react';
-import type { PlacementFn, TooltipCoords, TooltipPlacement } from '../types';
+/// <reference types="react" />
+import type { TooltipProps } from '../types';
 export declare type MouseClickEvent = React.MouseEvent<HTMLDivElement, MouseEvent>;
-export declare type TooltipProps = PropsWithChildren<{
-    position: TooltipCoords;
-    onClose?: (e: MouseClickEvent) => void;
-    transitionRef?: LegacyRef<any>;
-    getPlacement?: TooltipPlacement | PlacementFn;
-    hoverBehavior?: boolean;
-    classes?: {
-        popupContent?: string;
-    };
-    onOuterClick?: (e: MouseClickEvent) => void;
-}>;
-export declare function Tooltip({ children, position, transitionRef, getPlacement, classes, hoverBehavior, onOuterClick, onClose, }: TooltipProps): JSX.Element;
+export declare function Tooltip({ children, position, triggerRef, transitionRef, placement: placementProp, getPlacement, classes, hoverBehavior, onOuterClick, onClose, open, offset: offsetValue, }: TooltipProps): JSX.Element | null;
 //# sourceMappingURL=Tooltip.d.ts.map

tslib/Tooltip/Tooltip/Tooltip.js

@@ -1,9 +0,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { useCallback } from 'react';
-import { TooltipAnchor } from '../TooltipAnchor/TooltipAnchor';
-import { TooltipContent } from '../TooltipContent/TooltipContent';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { arrow, autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/react-dom';
+import { Close16 } from '@konturio/default-icons';
 import s from './Tooltip.module.css';
-const stopPropagation = (e) => e.stopPropagation();
-export function Tooltip({ children, position, transitionRef, getPlacement, classes, hoverBehavior = false, onOuterClick, onClose, }) {
+import { calculatePlacement } from './calculatePlacement';
+const defaultPlacement = 'top';
+export function Tooltip({ children, position, triggerRef, transitionRef, placement: placementProp, getPlacement, classes, hoverBehavior = false, onOuterClick, onClose, open = true, offset: offsetValue = 7, }) {
     const onClickOuter = useCallback((e) => {
@@ -17,5 +18,47 @@ if (onOuterClick && hoverBehavior === true) {
         }
-        onClose && onClose(e);
+        onClose?.(e);
     }, [hoverBehavior, onOuterClick, onClose]);
-    return (_jsx("div", { ref: transitionRef, className: clsx(s.tooltipContainer, hoverBehavior && s.hoverTooltip), onClick: onClickOuter, children: position && (_jsx(TooltipAnchor, { position: position, onClick: stopPropagation, getPlacement: getPlacement, children: _jsx(TooltipContent, { className: classes?.popupContent, onClose: hoverBehavior ? undefined : onClose, children: children }) })) }));
+    const arrowRef = useRef(null);
+    const placement = useMemo(() => calculatePlacement(getPlacement, placementProp, position) || defaultPlacement, [getPlacement, placementProp, position]);
+    const { refs, x: floatingX, y: floatingY, strategy, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, placement: finalPlacement, } = useFloating({
+        placement: placement,
+        open,
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(offsetValue), flip(), shift({ padding: 5 }), arrow({ element: arrowRef })],
+    });
+    const positionVariables = useMemo(() => ({
+        '--tooltip-arrox-x-position': arrowX != null ? `${arrowX}px` : '',
+        '--tooltip-arrow-y-position': arrowY != null ? `${arrowY}px` : '',
+        '--tooltip-x-position': `${floatingX ?? 0}px`,
+        '--tooltip-y-position': `${floatingY ?? 0}px`,
+        '--tooltip-placement': strategy,
+    }), [arrowX, arrowY, floatingX, floatingY, strategy]);
+    const arrowSide = useMemo(() => {
+        const side = finalPlacement.split('-')[0] || defaultPlacement;
+        return `arrow-${side}`;
+    }, [finalPlacement]);
+    useLayoutEffect(() => {
+        if (triggerRef) {
+            refs.setReference(triggerRef.current);
+        }
+        else if (position) {
+            const { x, y } = position;
+            refs.setReference({
+                getBoundingClientRect() {
+                    return { width: 0, height: 0, x, y, top: y, left: x, right: x, bottom: y };
+                },
+            });
+        }
+    }, [position, refs, triggerRef]);
+    if (position && triggerRef) {
+        console.error('Both position and triggerRef are provided. Tooltip will be rendered with triggerRef');
+    }
+    if (!position && !triggerRef) {
+        console.error('Tooltip will not be rendered because neither position nor triggerRef are provided');
+        return null;
+    }
+    if (!open)
+        return null;
+    const onCloseProp = hoverBehavior ? undefined : onClose;
+    return (_jsx("div", { ref: transitionRef, className: clsx(s.tooltipContainer, { [s.hoverTooltip]: hoverBehavior }), onClick: onClickOuter, style: positionVariables, children: _jsxs("div", { ref: refs.setFloating, className: s.tooltipContent, children: [_jsxs("div", { className: clsx(s.contentBody, clsx), children: [_jsxs("div", { children: [children, _jsx("div", { className: s.bodyBottom })] }), onCloseProp && (_jsx("div", { className: s.closeIcon, onClick: onCloseProp, children: _jsx(Close16, {}) }))] }), _jsx("div", { ref: arrowRef, className: clsx(s.arrow, s[arrowSide]), children: _jsx("div", { className: s.arrowInner }) })] }) }));
 }

tslib/Tooltip/types.d.ts

@@ -1,5 +0,3 @@
-export declare type PlacementFn = (coords: {
-    x: number;
-    y: number;
-}) => TooltipPlacement;
+import type { LegacyRef, MutableRefObject, PropsWithChildren } from 'react';
+import type { Placement } from '@floating-ui/react-dom';
 export declare type TooltipCoords = {
@@ -9,3 +7,20 @@ x: number;
 };
+export declare type PlacementFn = (coords: TooltipCoords) => TooltipPlacement;
 export declare type TooltipPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export declare type MouseClickEvent = React.MouseEvent<HTMLDivElement, MouseEvent>;
+export declare type TooltipProps = PropsWithChildren<{
+    transitionRef?: LegacyRef<any> | MutableRefObject<any>;
+    position?: TooltipCoords | null;
+    triggerRef?: MutableRefObject<any>;
+    onClose?: (e: MouseClickEvent) => void;
+    offset?: number;
+    placement?: Placement;
+    getPlacement?: TooltipPlacement | PlacementFn;
+    hoverBehavior?: boolean;
+    classes?: {
+        popupContent?: string;
+    };
+    onOuterClick?: (e: MouseClickEvent) => void;
+    open?: boolean;
+}>;
 //# sourceMappingURL=types.d.ts.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

436206

increased by0.02%

Lines of code

7983

increased by0.26%

Worsened metrics

Number of package files

411

decreased by-2.61%

No dependency changes