28179456061

Committed 25 Jun 2026 02:59PM UTC coverage: 86.433% (+0.9%) from 85.576%

Build # 28179456061

Build Type

Pull #2741

github

Committed by

crishpeen

Commit Message

fix(web): remove unused mixins and variables

Pull Request Pull Request #2741: refactor(web,web-react)!: switch toggle to composition markup #DS-564

Coverage Stats

2639 of 3519 branches covered (74.99%)

Branch coverage included in aggregate %.

67 of 79 new or added lines in 4 files covered. (84.81%)

12 existing lines in 6 files now uncovered.

7223 of 7891 relevant lines covered (91.53%)

209.23 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

87.27

/packages/web-react/src/components/Tooltip/TooltipPopover.tsx

'use client';

import classNames from 'classnames';
import React, { useMemo } from 'react';
import { useStyleProps } from '../../hooks';
import { type TooltipPopoverProps } from '../../types';
import TooltipCloseButton from './TooltipCloseButton';
import { useTooltipContext } from './TooltipContext';
import { useTooltipStyleProps } from './useTooltipStyleProps';

const normalizeFiniteNumber = (value?: number, fallback?: number) =>
  typeof value === 'number' && Number.isFinite(value) ? value : fallback;

const TooltipPopover = (props: TooltipPopoverProps) => {
  const { children, ...rest } = props;
  const {
    arrowRef,
    getFloatingProps,
    isDismissible,
    isOpen,
    middlewareData,
    onToggle,
    placement,
    tooltipRef,
    x,
    y,
    position,
    sizeMaxWidth,
    tooltipMaxWidth,
  } = useTooltipContext();
  const { classProps, props: modifiedProps } = useTooltipStyleProps({
    isOpen,
    isDismissible,
    placement,
    ...rest,
  });
  const { styleProps: contentStyleProps, props: contentOtherProps } = useStyleProps(modifiedProps);

  const renderCloseButton = useMemo(
    () => isDismissible && <TooltipCloseButton onClick={() => onToggle(false)} label="close" />,
    [isDismissible, onToggle],
  );

  const getMaxHeightAndWidth = () => {
    if (isOpen && sizeMaxWidth && tooltipMaxWidth) {
      return {
        maxWidth: tooltipMaxWidth < sizeMaxWidth ? tooltipMaxWidth : sizeMaxWidth,
      };
    }

    return undefined;
  };

  const getArrowStaticSidePosition = () => {
    if (placement && arrowRef.current) {
      const { arrow } = middlewareData;
      const side = placement.split('-')[0];

      const staticSide = {
        top: 'bottom',
        right: 'left',
        bottom: 'top',
        left: 'right',
      }[side] as string;

      const arrowEl = arrowRef.current as HTMLElement;

      const offset =
        staticSide === 'top' || staticSide === 'bottom'
          ? arrowEl.offsetHeight
          : (arrowEl.offsetHeight + arrowEl.offsetWidth) / 2;

      const arrowX = arrow?.x;
      const arrowY = arrow?.y;

      return {
        left: normalizeFiniteNumber(arrowX),
        top: normalizeFiniteNumber(arrowY),
        [staticSide]: offset && -Math.floor(offset), // remove 0.5 pixels values for arrow offset
      };
    }

    return undefined;
  };

  return (
    <div
      ref={tooltipRef}
      className={classNames(classProps.popoverClassName, contentStyleProps.className)}
      {...contentOtherProps}
      {...getFloatingProps()}
      style={{
        position,
        top: normalizeFiniteNumber(y, 0),
        left: normalizeFiniteNumber(x, 0),
        ...getMaxHeightAndWidth(),
        ...contentStyleProps.style,
      }}
      data-spirit-element="tooltip" // This is used to select CSS variables for maxWidth and tooltip offset
    >
      {children}
      {renderCloseButton}
      <span
        ref={arrowRef}
        className={classProps.arrowClassName}
        data-spirit-element="tooltip-arrow"
        style={{
          position: 'absolute',
          ...getArrowStaticSidePosition(),
        }}
      />
    </div>
  );
};

TooltipPopover.spiritComponent = 'TooltipPopover';

export default TooltipPopover;

1	'use client';
2
3	import classNames from 'classnames';	168✔
4	import React, { useMemo } from 'react';	168✔
5	import { useStyleProps } from '../../hooks';	168✔
6	import { type TooltipPopoverProps } from '../../types';
7	import TooltipCloseButton from './TooltipCloseButton';	168✔
8	import { useTooltipContext } from './TooltipContext';	168✔
9	import { useTooltipStyleProps } from './useTooltipStyleProps';	168✔
10
11	const normalizeFiniteNumber = (value?: number, fallback?: number) =>	168✔
12	typeof value === 'number' && Number.isFinite(value) ? value : fallback;	134✔
13
14	const TooltipPopover = (props: TooltipPopoverProps) => {	168✔
15	const { children, ...rest } = props;	48✔
16	const {
17	arrowRef,
18	getFloatingProps,
19	isDismissible,
20	isOpen,
21	middlewareData,
22	onToggle,
23	placement,
24	tooltipRef,
25	x,
26	y,
27	position,
28	sizeMaxWidth,
29	tooltipMaxWidth,
30	} = useTooltipContext();	48✔
31	const { classProps, props: modifiedProps } = useTooltipStyleProps({	48✔
32	isOpen,
33	isDismissible,
34	placement,
35	...rest,
36	});
37	const { styleProps: contentStyleProps, props: contentOtherProps } = useStyleProps(modifiedProps);	48✔
38
39	const renderCloseButton = useMemo(	48✔
40	() => isDismissible && <TooltipCloseButton onClick={() => onToggle(false)} label="close" />,	29✔
41	[isDismissible, onToggle],
42	);
43
44	const getMaxHeightAndWidth = () => {	48✔
45	if (isOpen && sizeMaxWidth && tooltipMaxWidth) {	48!
UNCOV 46	return {	×
47	maxWidth: tooltipMaxWidth < sizeMaxWidth ? tooltipMaxWidth : sizeMaxWidth,	×
48	};
49	}
50
51	return undefined;	48✔
52	};
53
54	const getArrowStaticSidePosition = () => {	48✔
55	if (placement && arrowRef.current) {	48✔
56	const { arrow } = middlewareData;	19✔
57	const side = placement.split('-')[0];	19✔
58
59	const staticSide = {	19✔
60	top: 'bottom',
61	right: 'left',
62	bottom: 'top',
63	left: 'right',
64	}[side] as string;
65
66	const arrowEl = arrowRef.current as HTMLElement;	19✔
67
68	const offset =
69	staticSide === 'top' \|\| staticSide === 'bottom'	19!
70	? arrowEl.offsetHeight
71	: (arrowEl.offsetHeight + arrowEl.offsetWidth) / 2;
72
73	const arrowX = arrow?.x;	19✔
74	const arrowY = arrow?.y;	19✔
75
76	return {	19✔
77	left: normalizeFiniteNumber(arrowX),
78	top: normalizeFiniteNumber(arrowY),
79	[staticSide]: offset && -Math.floor(offset), // remove 0.5 pixels values for arrow offset	19!
80	};
81	}
82
83	return undefined;	29✔
84	};
85
86	return (
87	<div
88	ref={tooltipRef}
89	className={classNames(classProps.popoverClassName, contentStyleProps.className)}
90	{...contentOtherProps}
91	{...getFloatingProps()}
92	style={{
93	position,
94	top: normalizeFiniteNumber(y, 0),
95	left: normalizeFiniteNumber(x, 0),
96	...getMaxHeightAndWidth(),
97	...contentStyleProps.style,
98	}}
99	data-spirit-element="tooltip" // This is used to select CSS variables for maxWidth and tooltip offset
100	>
101	{children}
102	{renderCloseButton}
103	<span
104	ref={arrowRef}
105	className={classProps.arrowClassName}
106	data-spirit-element="tooltip-arrow"
107	style={{
108	position: 'absolute',
109	...getArrowStaticSidePosition(),
110	}}
111	/>
112	</div>
113	);
114	};
115
116	TooltipPopover.spiritComponent = 'TooltipPopover';	168✔
117
118	export default TooltipPopover;	168✔

alma-oss / spirit-design-system / 28179456061

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous