@hh.ru/magritte-ui-tooltip 6.0.10

package/Tooltip.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { DropBaseHorizontalPosition, DropBaseVerticalPosition } from '@hh.ru/magritte-internal-drop-base';
+import { TooltipProps } from './types';
+export declare const Tooltip: <T extends DropBaseHorizontalPosition | DropBaseVerticalPosition>({ activatorRef, children, direction, alignment, ignoreIntersections, ...props }: TooltipProps<T>) => ReactElement | null;

package/Tooltip.js

@@ -0,0 +1,23 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { TooltipBase } from './TooltipBase.js';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-internal-drop-base';
+import '@hh.ru/magritte-internal-layer-name';
+import '@hh.ru/magritte-ui-action';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-button';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-layer';
+import './TooltipArrow.js';
+import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-typography/BaseText';
+
+const Tooltip = ({ activatorRef, children, direction, alignment, ignoreIntersections = true, ...props }) => {
+    const position = { direction, alignment };
+    return (jsx(TooltipBase, { ...props, ...position, ignoreIntersections: ignoreIntersections, activatorRef: activatorRef, children: children }));
+};
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../src/Tooltip.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { DropBaseHorizontalPosition, DropBaseVerticalPosition } from '@hh.ru/magritte-internal-drop-base';\nimport { TooltipBase } from '@hh.ru/magritte-ui-tooltip/TooltipBase';\nimport { TooltipProps } from '@hh.ru/magritte-ui-tooltip/types';\n\nexport const Tooltip = <T extends DropBaseHorizontalPosition | DropBaseVerticalPosition>({\n    activatorRef,\n    children,\n    direction,\n    alignment,\n    ignoreIntersections = true,\n    ...props\n}: TooltipProps<T>): ReactElement | null => {\n    const position = { direction, alignment } as DropBaseHorizontalPosition | DropBaseVerticalPosition;\n\n    return (\n        <TooltipBase {...props} {...position} ignoreIntersections={ignoreIntersections} activatorRef={activatorRef}>\n            {children}\n        </TooltipBase>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;MAMa,OAAO,GAAG,CAAkE,EACrF,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,GAAG,IAAI,EAC1B,GAAG,KAAK,EACM,KAAyB;AACvC,IAAA,MAAM,QAAQ,GAAG,EAAE,SAAS,EAAE,SAAS,EAA2D,CAAC;AAEnG,IAAA,QACIA,GAAC,CAAA,WAAW,OAAK,KAAK,EAAA,GAAM,QAAQ,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,YAAY,EAAE,YAAY,YACrG,QAAQ,EAAA,CACC,EAChB;AACN;;;;"}

package/TooltipArrow.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+export declare const TooltipArrow: FC<{
+    className: string;
+}>;

package/TooltipArrow.js

@@ -0,0 +1,7 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+
+const TooltipArrow = ({ className }) => (jsx("svg", { className: className, width: "28", height: "12", viewBox: "0 0 28 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { children: jsx("path", { d: "M0 11.4996H-0.5L-0.5 11.9996L-0.5 13L-0.5 13.5H0L28 13.5H28.5V13V11.9996V11.4996H28L25.845 11.4996C23.5666 11.4996 21.4118 10.4639 19.9885 8.68482L15.9522 3.63943C14.9514 2.38842 13.0486 2.38842 12.0478 3.63943L8.01152 8.68482C6.58823 10.4639 4.43338 11.4996 2.155 11.4996H0Z", fill: "var(--magritte-ui-tooltip-arrow-fill)", stroke: "var(--magritte-ui-tooltip-arrow-stroke)" }) }) }));
+
+export { TooltipArrow };
+//# sourceMappingURL=TooltipArrow.js.map

package/TooltipArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipArrow.js","sources":["../src/TooltipArrow.tsx"],"sourcesContent":["import { FC } from 'react';\n\nexport const TooltipArrow: FC<{ className: string }> = ({ className }) => (\n    <svg\n        className={className}\n        width=\"28\"\n        height=\"12\"\n        viewBox=\"0 0 28 12\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <g>\n            <path\n                d=\"M0 11.4996H-0.5L-0.5 11.9996L-0.5 13L-0.5 13.5H0L28 13.5H28.5V13V11.9996V11.4996H28L25.845 11.4996C23.5666 11.4996 21.4118 10.4639 19.9885 8.68482L15.9522 3.63943C14.9514 2.38842 13.0486 2.38842 12.0478 3.63943L8.01152 8.68482C6.58823 10.4639 4.43338 11.4996 2.155 11.4996H0Z\"\n                fill=\"var(--magritte-ui-tooltip-arrow-fill)\"\n                stroke=\"var(--magritte-ui-tooltip-arrow-stroke)\"\n            />\n        </g>\n    </svg>\n);\n"],"names":["_jsx"],"mappings":";;AAEa,MAAA,YAAY,GAA8B,CAAC,EAAE,SAAS,EAAE,MACjEA,aACI,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,QAAA,EAElCA,GACI,CAAA,GAAA,EAAA,EAAA,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EACI,CAAC,EAAC,qRAAqR,EACvR,IAAI,EAAC,uCAAuC,EAC5C,MAAM,EAAC,yCAAyC,EAClD,CAAA,EAAA,CACF,EACF,CAAA;;;;"}

package/TooltipBase.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import { DropBaseVerticalPosition, DropBaseHorizontalPosition } from '@hh.ru/magritte-internal-drop-base';
+import { TooltipBaseProps } from './types';
+export declare const TooltipBase: <T extends DropBaseHorizontalPosition | DropBaseVerticalPosition>({ direction, alignment, visible, host, activatorRef, onClose, maxWidth, title, action, actionClose, children, showClose, actionProps, guardDistance, closeByClickOutside, "aria-label-close": ariaLabelClose, role, ...props }: TooltipBaseProps<T>) => ReactElement | null;

package/TooltipBase.js

@@ -0,0 +1,114 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { DropBase } from '@hh.ru/magritte-internal-drop-base';
+import { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';
+import { Action } from '@hh.ru/magritte-ui-action';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { Button } from '@hh.ru/magritte-ui-button';
+import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { Layer } from '@hh.ru/magritte-ui-layer';
+import { TooltipArrow } from './TooltipArrow.js';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { BaseText } from '@hh.ru/magritte-ui-typography/BaseText';
+
+var styles = {"tooltip":"magritte-tooltip___Hxyh2_6-0-10","tooltip-with-action":"magritte-tooltip-with-action___aYbOD_6-0-10","tooltipWithAction":"magritte-tooltip-with-action___aYbOD_6-0-10","tooltip-title":"magritte-tooltip-title___s-ekd_6-0-10","tooltipTitle":"magritte-tooltip-title___s-ekd_6-0-10","tooltip-close":"magritte-tooltip-close___B1qWh_6-0-10","tooltipClose":"magritte-tooltip-close___B1qWh_6-0-10","tooltip-with-close":"magritte-tooltip-with-close___2iNPt_6-0-10","tooltipWithClose":"magritte-tooltip-with-close___2iNPt_6-0-10","tooltip-enter-active":"magritte-tooltip-enter-active___M8qsm_6-0-10","tooltipEnterActive":"magritte-tooltip-enter-active___M8qsm_6-0-10","css-variables-element":"magritte-css-variables-element___yRnOI_6-0-10","cssVariablesElement":"magritte-css-variables-element___yRnOI_6-0-10","tooltip-enter-done":"magritte-tooltip-enter-done___ceiob_6-0-10","tooltipEnterDone":"magritte-tooltip-enter-done___ceiob_6-0-10","tooltip-exit-active":"magritte-tooltip-exit-active___QllYr_6-0-10","tooltipExitActive":"magritte-tooltip-exit-active___QllYr_6-0-10","tooltip-direction-bottom":"magritte-tooltip-direction-bottom___Z-QlF_6-0-10","tooltipDirectionBottom":"magritte-tooltip-direction-bottom___Z-QlF_6-0-10","tooltip-direction-top":"magritte-tooltip-direction-top___7D3L-_6-0-10","tooltipDirectionTop":"magritte-tooltip-direction-top___7D3L-_6-0-10","tooltip-direction-left":"magritte-tooltip-direction-left___-gcHH_6-0-10","tooltipDirectionLeft":"magritte-tooltip-direction-left___-gcHH_6-0-10","tooltip-direction-right":"magritte-tooltip-direction-right___KgFDu_6-0-10","tooltipDirectionRight":"magritte-tooltip-direction-right___KgFDu_6-0-10","tooltip-actions":"magritte-tooltip-actions___gN8ad_6-0-10","tooltipActions":"magritte-tooltip-actions___gN8ad_6-0-10","tooltip-arrow":"magritte-tooltip-arrow___7OOYT_6-0-10","tooltipArrow":"magritte-tooltip-arrow___7OOYT_6-0-10","tooltip-alignment-left":"magritte-tooltip-alignment-left___BQPgG_6-0-10","tooltipAlignmentLeft":"magritte-tooltip-alignment-left___BQPgG_6-0-10","tooltip-alignment-center":"magritte-tooltip-alignment-center___FuX8d_6-0-10","tooltipAlignmentCenter":"magritte-tooltip-alignment-center___FuX8d_6-0-10","tooltip-alignment-right":"magritte-tooltip-alignment-right___bzmhg_6-0-10","tooltipAlignmentRight":"magritte-tooltip-alignment-right___bzmhg_6-0-10","tooltip-alignment-top":"magritte-tooltip-alignment-top___qLAji_6-0-10","tooltipAlignmentTop":"magritte-tooltip-alignment-top___qLAji_6-0-10","tooltip-alignment-bottom":"magritte-tooltip-alignment-bottom___v2JlH_6-0-10","tooltipAlignmentBottom":"magritte-tooltip-alignment-bottom___v2JlH_6-0-10"};
+
+const CSS_CLASSES = {
+    enterActive: styles.tooltipEnterActive,
+    enterDone: styles.tooltipEnterDone,
+    exitActive: styles.tooltipExitActive,
+};
+const TooltipBase = ({ direction, alignment, visible, host, activatorRef, onClose, maxWidth = 400, title, action, actionClose, children, showClose, actionProps, guardDistance = 20, closeByClickOutside = true, 'aria-label-close': ariaLabelClose, role = 'tooltip', ...props }) => {
+    const { isMobile } = useBreakpoint();
+    const id = useId();
+    const ariaLabledBy = `tooltip-aria-label-${id}`;
+    const ariaDescribedBy = `tooltip-aria-description-${id}`;
+    const [animationTimeout, setAnimationTimeout] = useState(200);
+    const [arrowGuardDistance, setArrowGuardDistance] = useState({
+        left: { top: 0, bottom: 0, center: 0 },
+        right: { top: 0, bottom: 0, center: 0 },
+        top: { left: 0, center: 0, right: 0 },
+        bottom: { left: 0, center: 0, right: 0 },
+    });
+    const ariaRole = role === 'tooltip' && action ? 'alertdialog' : role;
+    useEffect(() => {
+        const cssVariablesElement = document.createElement('div');
+        cssVariablesElement.classList.add(styles.cssVariablesElement);
+        document.body.appendChild(cssVariablesElement);
+        const style = window.getComputedStyle(cssVariablesElement);
+        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);
+        if (Number.isInteger(animationTimeout)) {
+            setAnimationTimeout(animationTimeout);
+        }
+        const arrowSize = parseInt(style.getPropertyValue('top'), 10);
+        const arrowOffset = parseInt(style.getPropertyValue('right'), 10);
+        const arrowOffsetVertical = parseInt(style.getPropertyValue('bottom'), 10);
+        const arrowOffsetHorizontal = parseInt(style.getPropertyValue('left'), 10);
+        if (Number.isInteger(arrowSize) &&
+            Number.isInteger(arrowOffset) &&
+            Number.isInteger(arrowOffsetVertical) &&
+            Number.isInteger(arrowOffsetHorizontal)) {
+            setArrowGuardDistance(action
+                ? {
+                    left: {
+                        top: arrowOffset + arrowSize / 2,
+                        bottom: arrowOffsetVertical + arrowSize / 2,
+                        center: 0,
+                    },
+                    right: {
+                        top: arrowOffset + arrowSize / 2,
+                        bottom: arrowOffsetVertical + arrowSize / 2,
+                        center: 0,
+                    },
+                    top: {
+                        left: arrowOffsetHorizontal + arrowSize / 2,
+                        center: 0,
+                        right: arrowOffsetHorizontal + arrowSize / 2,
+                    },
+                    bottom: {
+                        left: arrowOffset + arrowSize / 2,
+                        center: 0,
+                        right: arrowOffset + arrowSize / 2,
+                    },
+                }
+                : {
+                    left: {
+                        top: arrowOffset + arrowSize / 2,
+                        bottom: arrowOffset + arrowSize / 2,
+                        center: 0,
+                    },
+                    right: {
+                        top: arrowOffset + arrowSize / 2,
+                        bottom: arrowOffset + arrowSize / 2,
+                        center: 0,
+                    },
+                    top: {
+                        left: arrowOffset + arrowSize / 2,
+                        center: 0,
+                        right: arrowOffset + arrowSize / 2,
+                    },
+                    bottom: {
+                        left: arrowOffset + arrowSize / 2,
+                        center: 0,
+                        right: arrowOffset + arrowSize / 2,
+                    },
+                });
+        }
+        document.body.removeChild(cssVariablesElement);
+    }, [action, setAnimationTimeout]);
+    if (isMobile) {
+        return null;
+    }
+    const position = { direction, alignment };
+    return (jsx(Layer, { layer: InternalLayerName.Tooltip, children: jsx(DropBase, { ...props, ...position, visible: visible, host: host, activatorRef: activatorRef, arrowGuardDistance: arrowGuardDistance, closeByClickOutside: closeByClickOutside, onClose: onClose, autoFocusWhenOpened: ariaRole !== 'tooltip', guardDistance: guardDistance, animationClassNames: CSS_CLASSES, animationTimeout: animationTimeout, role: ariaRole, "aria-labelledby": title && role !== 'tooltip' ? ariaLabledBy : undefined, "aria-describedby": role !== 'tooltip' ? ariaDescribedBy : undefined, children: ({ direction, alignment }) => (jsxs("div", { "data-qa": "tooltip", className: classnames(`${styles.tooltip} ${styles[`tooltip-direction-${direction}`]} ${styles[`tooltip-alignment-${alignment}`]}`, {
+                    [styles.tooltipWithAction]: action,
+                    [styles.tooltipWithClose]: !action && showClose,
+                }), style: {
+                    maxWidth: `${maxWidth}px`,
+                }, children: [title && (jsx("div", { className: styles.tooltipTitle, children: jsx(BaseText, { id: ariaLabledBy, "data-qa": "tooltip-title", Element: "div", style: "primary", typography: "title-5-semibold", children: title }) })), jsx(Text, { typography: "paragraph-2-regular", id: ariaDescribedBy, children: children }), action && (jsxs("div", { className: styles.tooltipActions, children: [jsx(Button, { "data-qa": "tooltip-action", ...actionProps, style: "contrast", mode: "secondary", children: action }), actionClose && (jsx(Button, { "data-qa": "tooltip-close-action", onClick: () => onClose?.(), style: "contrast", mode: "tertiary", children: actionClose }))] })), !action && showClose && (jsx("div", { className: styles.tooltipClose, children: jsx(Action, { "data-qa": "tooltip-close-action", "aria-label": ariaLabelClose, icon: CrossOutlinedSize24, mode: "secondary", onClick: () => onClose?.(), style: "contrast" }) })), jsx(TooltipArrow, { className: styles.tooltipArrow })] })) }) }));
+};
+
+export { TooltipBase };
+//# sourceMappingURL=TooltipBase.js.map

package/TooltipBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipBase.js","sources":["../src/TooltipBase.tsx"],"sourcesContent":["import { type ReactElement, useEffect, useId, useState } from 'react';\nimport classnames from 'classnames';\n\nimport {\n    DropBase,\n    type ArrowGuardDistance,\n    DropBaseVerticalPosition,\n    DropBaseHorizontalPosition,\n} from '@hh.ru/magritte-internal-drop-base';\nimport { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { TooltipArrow } from '@hh.ru/magritte-ui-tooltip/TooltipArrow';\nimport { TooltipBaseProps } from '@hh.ru/magritte-ui-tooltip/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { BaseText } from '@hh.ru/magritte-ui-typography/BaseText';\n\nimport styles from './tooltip.less';\n\nconst CSS_CLASSES = {\n    enterActive: styles.tooltipEnterActive,\n    enterDone: styles.tooltipEnterDone,\n    exitActive: styles.tooltipExitActive,\n};\n\nexport const TooltipBase = <T extends DropBaseHorizontalPosition | DropBaseVerticalPosition>({\n    direction,\n    alignment,\n    visible,\n    host,\n    activatorRef,\n    onClose,\n    maxWidth = 400,\n    title,\n    action,\n    actionClose,\n    children,\n    showClose,\n    actionProps,\n    guardDistance = 20,\n    closeByClickOutside = true,\n    'aria-label-close': ariaLabelClose,\n    role = 'tooltip',\n    ...props\n}: TooltipBaseProps<T>): ReactElement | null => {\n    const { isMobile } = useBreakpoint();\n    const id = useId();\n    const ariaLabledBy = `tooltip-aria-label-${id}`;\n    const ariaDescribedBy = `tooltip-aria-description-${id}`;\n    const [animationTimeout, setAnimationTimeout] = useState(200);\n    const [arrowGuardDistance, setArrowGuardDistance] = useState<ArrowGuardDistance>({\n        left: { top: 0, bottom: 0, center: 0 },\n        right: { top: 0, bottom: 0, center: 0 },\n        top: { left: 0, center: 0, right: 0 },\n        bottom: { left: 0, center: 0, right: 0 },\n    });\n\n    const ariaRole = role === 'tooltip' && action ? 'alertdialog' : role;\n\n    useEffect(() => {\n        const cssVariablesElement = document.createElement('div');\n        cssVariablesElement.classList.add(styles.cssVariablesElement);\n        document.body.appendChild(cssVariablesElement);\n        const style = window.getComputedStyle(cssVariablesElement);\n\n        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n        if (Number.isInteger(animationTimeout)) {\n            setAnimationTimeout(animationTimeout);\n        }\n\n        const arrowSize = parseInt(style.getPropertyValue('top'), 10);\n        const arrowOffset = parseInt(style.getPropertyValue('right'), 10);\n        const arrowOffsetVertical = parseInt(style.getPropertyValue('bottom'), 10);\n        const arrowOffsetHorizontal = parseInt(style.getPropertyValue('left'), 10);\n        if (\n            Number.isInteger(arrowSize) &&\n            Number.isInteger(arrowOffset) &&\n            Number.isInteger(arrowOffsetVertical) &&\n            Number.isInteger(arrowOffsetHorizontal)\n        ) {\n            setArrowGuardDistance(\n                action\n                    ? {\n                          left: {\n                              top: arrowOffset + arrowSize / 2,\n                              bottom: arrowOffsetVertical + arrowSize / 2,\n                              center: 0,\n                          },\n                          right: {\n                              top: arrowOffset + arrowSize / 2,\n                              bottom: arrowOffsetVertical + arrowSize / 2,\n                              center: 0,\n                          },\n                          top: {\n                              left: arrowOffsetHorizontal + arrowSize / 2,\n                              center: 0,\n                              right: arrowOffsetHorizontal + arrowSize / 2,\n                          },\n                          bottom: {\n                              left: arrowOffset + arrowSize / 2,\n                              center: 0,\n                              right: arrowOffset + arrowSize / 2,\n                          },\n                      }\n                    : {\n                          left: {\n                              top: arrowOffset + arrowSize / 2,\n                              bottom: arrowOffset + arrowSize / 2,\n                              center: 0,\n                          },\n                          right: {\n                              top: arrowOffset + arrowSize / 2,\n                              bottom: arrowOffset + arrowSize / 2,\n                              center: 0,\n                          },\n                          top: {\n                              left: arrowOffset + arrowSize / 2,\n                              center: 0,\n                              right: arrowOffset + arrowSize / 2,\n                          },\n                          bottom: {\n                              left: arrowOffset + arrowSize / 2,\n                              center: 0,\n                              right: arrowOffset + arrowSize / 2,\n                          },\n                      }\n            );\n        }\n\n        document.body.removeChild(cssVariablesElement);\n    }, [action, setAnimationTimeout]);\n\n    if (isMobile) {\n        return null;\n    }\n\n    const position = { direction, alignment } as DropBaseHorizontalPosition | DropBaseVerticalPosition;\n\n    return (\n        <Layer layer={InternalLayerName.Tooltip}>\n            <DropBase\n                {...props}\n                {...position}\n                visible={visible}\n                host={host}\n                activatorRef={activatorRef}\n                arrowGuardDistance={arrowGuardDistance}\n                closeByClickOutside={closeByClickOutside}\n                onClose={onClose}\n                autoFocusWhenOpened={ariaRole !== 'tooltip'}\n                guardDistance={guardDistance}\n                animationClassNames={CSS_CLASSES}\n                animationTimeout={animationTimeout}\n                role={ariaRole}\n                aria-labelledby={title && role !== 'tooltip' ? ariaLabledBy : undefined}\n                aria-describedby={role !== 'tooltip' ? ariaDescribedBy : undefined}\n            >\n                {({ direction, alignment }) => (\n                    <div\n                        data-qa=\"tooltip\"\n                        className={classnames(\n                            `${styles.tooltip} ${styles[`tooltip-direction-${direction}`]} ${\n                                styles[`tooltip-alignment-${alignment}`]\n                            }`,\n                            {\n                                [styles.tooltipWithAction]: action,\n                                [styles.tooltipWithClose]: !action && showClose,\n                            }\n                        )}\n                        style={{\n                            maxWidth: `${maxWidth}px`,\n                        }}\n                    >\n                        {title && (\n                            <div className={styles.tooltipTitle}>\n                                <BaseText\n                                    id={ariaLabledBy}\n                                    data-qa=\"tooltip-title\"\n                                    Element=\"div\"\n                                    style=\"primary\"\n                                    typography=\"title-5-semibold\"\n                                >\n                                    {title}\n                                </BaseText>\n                            </div>\n                        )}\n                        <Text typography=\"paragraph-2-regular\" id={ariaDescribedBy}>\n                            {children}\n                        </Text>\n                        {action && (\n                            <div className={styles.tooltipActions}>\n                                <Button data-qa=\"tooltip-action\" {...actionProps} style=\"contrast\" mode=\"secondary\">\n                                    {action}\n                                </Button>\n                                {actionClose && (\n                                    <Button\n                                        data-qa=\"tooltip-close-action\"\n                                        onClick={() => onClose?.()}\n                                        style=\"contrast\"\n                                        mode=\"tertiary\"\n                                    >\n                                        {actionClose}\n                                    </Button>\n                                )}\n                            </div>\n                        )}\n                        {!action && showClose && (\n                            <div className={styles.tooltipClose}>\n                                <Action\n                                    data-qa=\"tooltip-close-action\"\n                                    aria-label={ariaLabelClose}\n                                    icon={CrossOutlinedSize24}\n                                    mode=\"secondary\"\n                                    onClick={() => onClose?.()}\n                                    style=\"contrast\"\n                                />\n                            </div>\n                        )}\n                        <TooltipArrow className={styles.tooltipArrow} />\n                    </div>\n                )}\n            </DropBase>\n        </Layer>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/TooltipHover.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { DropBaseHorizontalPosition, DropBaseVerticalPosition } from '@hh.ru/magritte-internal-drop-base';
+import { TooltipHoverProps } from './types';
+export declare const TooltipHover: <T extends DropBaseHorizontalPosition | DropBaseVerticalPosition>({ activatorRef, children, direction, alignment, ignoreIntersections, ...props }: TooltipHoverProps<T>) => ReactElement | null;

package/TooltipHover.js

@@ -0,0 +1,42 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { TooltipBase } from './TooltipBase.js';
+import 'classnames';
+import '@hh.ru/magritte-internal-drop-base';
+import '@hh.ru/magritte-internal-layer-name';
+import '@hh.ru/magritte-ui-action';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-button';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-layer';
+import './TooltipArrow.js';
+import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-typography/BaseText';
+
+const TooltipHover = ({ activatorRef, children, direction, alignment, ignoreIntersections = true, ...props }) => {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        const activator = activatorRef.current;
+        if (!activator) {
+            return void 0;
+        }
+        let isTouchEnabled = false;
+        const handleTouchStart = () => (isTouchEnabled = true);
+        const handleMouseEnter = () => !isTouchEnabled && setVisible(true);
+        const handleMouseLeave = () => setVisible(false);
+        activator.addEventListener('touchstart', handleTouchStart);
+        activator.addEventListener('mouseenter', handleMouseEnter);
+        activator.addEventListener('mouseleave', handleMouseLeave);
+        return () => {
+            activator.removeEventListener('touchstart', handleTouchStart);
+            activator.removeEventListener('mouseenter', handleMouseEnter);
+            activator.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, [activatorRef, setVisible]);
+    const position = { direction, alignment };
+    return (jsx(TooltipBase, { ...props, ...position, ignoreIntersections: ignoreIntersections, visible: visible, activatorRef: activatorRef, children: children }));
+};
+
+export { TooltipHover };
+//# sourceMappingURL=TooltipHover.js.map

package/TooltipHover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipHover.js","sources":["../src/TooltipHover.tsx"],"sourcesContent":["import { ReactElement, useEffect, useState } from 'react';\n\nimport { DropBaseHorizontalPosition, DropBaseVerticalPosition } from '@hh.ru/magritte-internal-drop-base';\nimport { TooltipBase } from '@hh.ru/magritte-ui-tooltip/TooltipBase';\nimport { TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip/types';\n\nexport const TooltipHover = <T extends DropBaseHorizontalPosition | DropBaseVerticalPosition>({\n    activatorRef,\n    children,\n    direction,\n    alignment,\n    ignoreIntersections = true,\n    ...props\n}: TooltipHoverProps<T>): ReactElement | null => {\n    const [visible, setVisible] = useState(false);\n\n    useEffect(() => {\n        const activator = activatorRef.current;\n        if (!activator) {\n            return void 0;\n        }\n\n        let isTouchEnabled = false;\n\n        const handleTouchStart = () => (isTouchEnabled = true);\n        const handleMouseEnter = () => !isTouchEnabled && setVisible(true);\n        const handleMouseLeave = () => setVisible(false);\n\n        activator.addEventListener('touchstart', handleTouchStart);\n        activator.addEventListener('mouseenter', handleMouseEnter);\n        activator.addEventListener('mouseleave', handleMouseLeave);\n\n        return () => {\n            activator.removeEventListener('touchstart', handleTouchStart);\n            activator.removeEventListener('mouseenter', handleMouseEnter);\n            activator.removeEventListener('mouseleave', handleMouseLeave);\n        };\n    }, [activatorRef, setVisible]);\n\n    const position = { direction, alignment } as DropBaseHorizontalPosition | DropBaseVerticalPosition;\n\n    return (\n        <TooltipBase\n            {...props}\n            {...position}\n            ignoreIntersections={ignoreIntersections}\n            visible={visible}\n            activatorRef={activatorRef}\n        >\n            {children}\n        </TooltipBase>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;MAMa,YAAY,GAAG,CAAkE,EAC1F,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,GAAG,IAAI,EAC1B,GAAG,KAAK,EACW,KAAyB;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,SAAS,EAAE;YACZ,OAAO,KAAK,CAAC,CAAC;AACjB,SAAA;QAED,IAAI,cAAc,GAAG,KAAK,CAAC;QAE3B,MAAM,gBAAgB,GAAG,OAAO,cAAc,GAAG,IAAI,CAAC,CAAC;AACvD,QAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,cAAc,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;QACnE,MAAM,gBAAgB,GAAG,MAAM,UAAU,CAAC,KAAK,CAAC,CAAC;AAEjD,QAAA,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;AAC3D,QAAA,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;AAC3D,QAAA,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;AAE3D,QAAA,OAAO,MAAK;AACR,YAAA,SAAS,CAAC,mBAAmB,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;AAC9D,YAAA,SAAS,CAAC,mBAAmB,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;AAC9D,YAAA,SAAS,CAAC,mBAAmB,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;AAClE,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;AAE/B,IAAA,MAAM,QAAQ,GAAG,EAAE,SAAS,EAAE,SAAS,EAA2D,CAAC;IAEnG,QACIA,IAAC,WAAW,EAAA,EAAA,GACJ,KAAK,EACL,GAAA,QAAQ,EACZ,mBAAmB,EAAE,mBAAmB,EACxC,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAEzB,QAAA,EAAA,QAAQ,EACC,CAAA,EAChB;AACN;;;;"}

package/index.css

@@ -0,0 +1,155 @@
+:root{
+  --magritte-color-component-tooltip-background-content-v18-1-1:#000000;
+  --magritte-color-component-tooltip-text-content-v18-1-1:#ffffff;
+  --magritte-color-component-tooltip-stroke-content-v18-1-1:#3B3B3B;
+}
+:root{
+  --magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-200-duration-v18-1-1:200ms;
+  --magritte-static-border-radius-400-v18-1-1:16px;
+  --magritte-static-border-radius-600-v18-1-1:24px;
+}
+.magritte-night-theme{
+  --magritte-color-component-tooltip-background-content-v18-1-1:#000000;
+  --magritte-color-component-tooltip-text-content-v18-1-1:#ffffff;
+  --magritte-color-component-tooltip-stroke-content-v18-1-1:#3B3B3B;
+}
+.magritte-tooltip___Hxyh2_6-0-10{
+  position:relative;
+  padding:16px;
+  border-radius:var(--magritte-static-border-radius-400-v18-1-1);
+  background:var(--magritte-color-component-tooltip-background-content-v18-1-1);
+  border:1px solid var(--magritte-color-component-tooltip-stroke-content-v18-1-1);
+  box-sizing:border-box;
+  word-wrap:break-word;
+  min-height:60px;
+  --magritte-ui-text-color-override:var(--magritte-color-component-tooltip-text-content-v18-1-1);
+  --magritte-ui-tooltip-arrow-fill:var(--magritte-color-component-tooltip-background-content-v18-1-1);
+  --magritte-ui-tooltip-arrow-stroke:var(--magritte-color-component-tooltip-stroke-content-v18-1-1);
+}
+.magritte-tooltip-with-action___aYbOD_6-0-10{
+  border-bottom-left-radius:var(--magritte-static-border-radius-600-v18-1-1);
+  border-bottom-right-radius:var(--magritte-static-border-radius-600-v18-1-1);
+}
+.magritte-tooltip-title___s-ekd_6-0-10{
+  margin-bottom:4px;
+}
+.magritte-tooltip-close___B1qWh_6-0-10{
+  position:absolute;
+  right:9px;
+  top:9px;
+}
+.magritte-tooltip-with-close___2iNPt_6-0-10{
+  padding-right:40px;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-tooltip-enter-active___M8qsm_6-0-10 .magritte-tooltip___Hxyh2_6-0-10{
+    opacity:0;
+  }
+  .magritte-css-variables-element___yRnOI_6-0-10,
+  .magritte-tooltip-enter-done___ceiob_6-0-10 .magritte-tooltip___Hxyh2_6-0-10{
+    opacity:1;
+    transition:all var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-1) var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1);
+    --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-1);
+  }
+  .magritte-tooltip-exit-active___QllYr_6-0-10 .magritte-tooltip___Hxyh2_6-0-10{
+    opacity:0;
+    transition:all var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-1) var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1);
+    --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-1);
+  }
+  .magritte-tooltip-exit-active___QllYr_6-0-10 .magritte-tooltip-direction-bottom___Z-QlF_6-0-10{
+    transform:translateY(4px);
+  }
+  .magritte-tooltip-enter-active___M8qsm_6-0-10 .magritte-tooltip-direction-bottom___Z-QlF_6-0-10{
+    transform:translateY(4px);
+  }
+  .magritte-tooltip-enter-done___ceiob_6-0-10 .magritte-tooltip-direction-bottom___Z-QlF_6-0-10{
+    transform:translateY(0%);
+  }
+  .magritte-tooltip-exit-active___QllYr_6-0-10 .magritte-tooltip-direction-top___7D3L-_6-0-10{
+    transform:translateY(-4px);
+  }
+  .magritte-tooltip-enter-active___M8qsm_6-0-10 .magritte-tooltip-direction-top___7D3L-_6-0-10{
+    transform:translateY(-4px);
+  }
+  .magritte-tooltip-enter-done___ceiob_6-0-10 .magritte-tooltip-direction-top___7D3L-_6-0-10{
+    transform:translateY(0%);
+  }
+  .magritte-tooltip-exit-active___QllYr_6-0-10 .magritte-tooltip-direction-left___-gcHH_6-0-10{
+    transform:translateX(-4px);
+  }
+  .magritte-tooltip-enter-active___M8qsm_6-0-10 .magritte-tooltip-direction-left___-gcHH_6-0-10{
+    transform:translateX(-4px);
+  }
+  .magritte-tooltip-enter-done___ceiob_6-0-10 .magritte-tooltip-direction-left___-gcHH_6-0-10{
+    transform:translateX(0%);
+  }
+  .magritte-tooltip-exit-active___QllYr_6-0-10 .magritte-tooltip-direction-right___KgFDu_6-0-10{
+    transform:translateX(4px);
+  }
+  .magritte-tooltip-enter-active___M8qsm_6-0-10 .magritte-tooltip-direction-right___KgFDu_6-0-10{
+    transform:translateX(4px);
+  }
+  .magritte-tooltip-enter-done___ceiob_6-0-10 .magritte-tooltip-direction-right___KgFDu_6-0-10{
+    transform:translateX(0%);
+  }
+}
+.magritte-tooltip-actions___gN8ad_6-0-10{
+  display:flex;
+  gap:12px;
+  margin-top:16px;
+  flex-flow:wrap;
+}
+.magritte-css-variables-element___yRnOI_6-0-10{
+  top:28px;
+  right:15px;
+  bottom:24px;
+  left:calc(var(--magritte-static-border-radius-600-v18-1-1) - 12px / 2 + 28px /2 );
+}
+.magritte-tooltip-arrow___7OOYT_6-0-10{
+  position:absolute;
+}
+.magritte-tooltip-direction-bottom___Z-QlF_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  top:-12px;
+}
+.magritte-tooltip-direction-top___7D3L-_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  bottom:-12px;
+  transform:rotate(180deg);
+}
+.magritte-tooltip-alignment-left___BQPgG_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  left:15px;
+}
+.magritte-tooltip-alignment-left___BQPgG_6-0-10.magritte-tooltip-direction-top___7D3L-_6-0-10.magritte-tooltip-with-action___aYbOD_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  left:calc(var(--magritte-static-border-radius-600-v18-1-1) - 12px/2 + 28px/2);
+}
+.magritte-tooltip-direction-top___7D3L-_6-0-10.magritte-tooltip-alignment-center___FuX8d_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10,
+.magritte-tooltip-direction-bottom___Z-QlF_6-0-10.magritte-tooltip-alignment-center___FuX8d_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  left:calc(50% - 28px/2);
+}
+.magritte-tooltip-alignment-right___bzmhg_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  right:15px;
+}
+.magritte-tooltip-alignment-right___bzmhg_6-0-10.magritte-tooltip-direction-top___7D3L-_6-0-10.magritte-tooltip-with-action___aYbOD_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  right:calc(var(--magritte-static-border-radius-600-v18-1-1) - 12px/2 + 28px/2);
+}
+.magritte-tooltip-direction-left___-gcHH_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  right:-20px;
+  transform:rotate(90deg);
+}
+.magritte-tooltip-direction-right___KgFDu_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  left:-20px;
+  transform:rotate(-90deg);
+}
+.magritte-tooltip-alignment-top___qLAji_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  top:24px;
+}
+.magritte-tooltip-direction-left___-gcHH_6-0-10.magritte-tooltip-alignment-center___FuX8d_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10,
+.magritte-tooltip-direction-right___KgFDu_6-0-10.magritte-tooltip-alignment-center___FuX8d_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  top:calc(50% - 12px/2);
+}
+.magritte-tooltip-alignment-bottom___v2JlH_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  bottom:24px;
+}
+.magritte-tooltip-alignment-bottom___v2JlH_6-0-10.magritte-tooltip-with-action___aYbOD_6-0-10 .magritte-tooltip-arrow___7OOYT_6-0-10{
+  bottom:calc(var(--magritte-static-border-radius-600-v18-1-1) - 12px/2 + 28px/2);
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TooltipHover';
+export * from './Tooltip';
+export * from '@hh.ru/magritte-ui-theme-provider';

package/index.js

@@ -0,0 +1,19 @@
+import './index.css';
+export { TooltipHover } from './TooltipHover.js';
+export { Tooltip } from './Tooltip.js';
+export * from '@hh.ru/magritte-ui-theme-provider';
+import 'react/jsx-runtime';
+import 'react';
+import './TooltipBase.js';
+import 'classnames';
+import '@hh.ru/magritte-internal-drop-base';
+import '@hh.ru/magritte-internal-layer-name';
+import '@hh.ru/magritte-ui-action';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-button';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-layer';
+import './TooltipArrow.js';
+import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-typography/BaseText';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@hh.ru/magritte-ui-tooltip",
+  "version": "6.0.10",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "changelog": "yarn root:changelog $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-test": "yarn root:stylelint-test $(pwd)",
+    "eslint-test": "yarn root:eslint-test $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-design-tokens": "18.1.1",
+    "@hh.ru/magritte-internal-drop-base": "5.0.4",
+    "@hh.ru/magritte-internal-layer-name": "2.1.1",
+    "@hh.ru/magritte-ui-action": "4.3.3",
+    "@hh.ru/magritte-ui-breakpoint": "4.0.1",
+    "@hh.ru/magritte-ui-button": "3.1.14",
+    "@hh.ru/magritte-ui-icon": "7.1.3",
+    "@hh.ru/magritte-ui-layer": "2.0.3",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.21",
+    "@hh.ru/magritte-ui-typography": "3.0.8"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b660dd64fca3eaad5ec44ea9a73f92bb0d9694aa"
+}

package/types.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode, RefObject, PropsWithChildren } from 'react';
+import type { DropBasePermanentProps, DropBaseVerticalPosition, DropBaseHorizontalPosition } from '@hh.ru/magritte-internal-drop-base';
+import { type DefaultButtonProps, type ButtonProps, type ButtonLabel } from '@hh.ru/magritte-ui-button';
+interface TooltipPropsWithAction {
+    /** Лейбл кнопки действия */
+    action: ButtonLabel;
+    /** Лейбл кнопки закрытия */
+    actionClose: ButtonLabel;
+    /** Cвойства кнопки действия */
+    actionProps: Omit<ButtonProps, 'style' | 'mode' | 'Element'> & Omit<DefaultButtonProps, 'children'>;
+    'aria-label-close'?: never;
+    showClose?: false;
+}
+interface TooltipPropsWithoutAction {
+    action?: never;
+    actionClose?: never;
+    actionProps?: never;
+    'aria-label-close'?: never;
+    showClose?: false;
+}
+interface TooltipPropsWithoutActionWithClose {
+    action?: never;
+    actionClose?: never;
+    actionProps?: never;
+    /** Aria label иконки закрытия */
+    'aria-label-close': string;
+    /** Показать ли иконку закрытия, можно устоновить если в tooltip нет action */
+    showClose: true;
+}
+interface TooltipTitleProps {
+    /** Заголовок компонента */
+    title: ReactNode;
+    'aria-label'?: never;
+}
+interface TooltipWithoutTitleProps {
+    title?: never;
+    /** Aria заголовок, устанавливаем в случае если нет title и role !== 'tooltip' */
+    'aria-label'?: string;
+}
+interface TooltipOnlyProps {
+    /** Максимальная ширина тултипа */
+    maxWidth?: number;
+    /** Aria role подробнее в разделе Доступность */
+    role?: 'tooltip' | 'dialog' | 'alertdialog';
+}
+interface TooltipActivator {
+    /** Активатор тултипа, относительно которого он показывается */
+    activatorRef: RefObject<HTMLElement>;
+}
+export type TooltipActionableProps = PropsWithChildren<TooltipOnlyProps> & (TooltipPropsWithAction | TooltipPropsWithoutActionWithClose | TooltipPropsWithoutAction) & (TooltipTitleProps | TooltipWithoutTitleProps);
+export type TooltipBaseProps<T extends DropBaseHorizontalPosition | DropBaseVerticalPosition> = Omit<DropBasePermanentProps, 'arrowGuardDistance' | 'children' | 'animationTimeout' | 'animationClassNames' | 'role'> & T & TooltipActionableProps;
+export type TooltipHoverProps<T extends DropBaseHorizontalPosition | DropBaseVerticalPosition> = Omit<DropBasePermanentProps, 'closeByClickOutside' | 'arrowGuardDistance' | 'children' | 'animationTimeout' | 'animationClassNames' | 'visible' | 'role' | 'activatorRef' | 'autoFocusWhenOpened' | 'guardDistance'> & T & PropsWithChildren<Omit<TooltipOnlyProps, 'role'>> & TooltipActivator;
+export type TooltipProps<T extends DropBaseHorizontalPosition | DropBaseVerticalPosition> = Omit<DropBasePermanentProps, 'arrowGuardDistance' | 'children' | 'animationTimeout' | 'animationClassNames' | 'role' | 'activatorRef'> & T & TooltipActionableProps & TooltipActivator;
+export {};

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}