@hh.ru/magritte-ui-tooltip 6.2.1 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/Tooltip.d.ts +1 -2
  2. package/Tooltip.js +2 -3
  3. package/Tooltip.js.map +1 -1
  4. package/TooltipBase.d.ts +1 -2
  5. package/TooltipBase.js +21 -6
  6. package/TooltipBase.js.map +1 -1
  7. package/TooltipHover.d.ts +1 -2
  8. package/TooltipHover.js +2 -3
  9. package/TooltipHover.js.map +1 -1
  10. package/index.css +46 -56
  11. package/package.json +5 -5
  12. package/types.d.ts +7 -5
package/Tooltip.d.ts CHANGED
@@ -1,4 +1,3 @@
1
1
  import { ReactElement } from 'react';
2
- import { DropBaseHorizontalPosition, DropBaseVerticalPosition } from '@hh.ru/magritte-internal-drop-base';
3
2
  import { TooltipProps } from '@hh.ru/magritte-ui-tooltip/types';
4
- export declare const Tooltip: <T extends DropBaseHorizontalPosition | DropBaseVerticalPosition>({ activatorRef, children, direction, alignment, ignoreIntersections, ...props }: TooltipProps<T>) => ReactElement | null;
3
+ export declare const Tooltip: ({ activatorRef, children, ignoreIntersections, ...props }: TooltipProps) => ReactElement | null;
package/Tooltip.js CHANGED
@@ -14,9 +14,8 @@ import './TooltipArrow.js';
14
14
  import '@hh.ru/magritte-ui-typography';
15
15
  import '@hh.ru/magritte-ui-typography/BaseText';
16
16
 
17
- const Tooltip = ({ activatorRef, children, direction, alignment, ignoreIntersections = true, ...props }) => {
18
- const position = { direction, alignment };
19
- return (jsx(TooltipBase, { ...props, ...position, ignoreIntersections: ignoreIntersections, activatorRef: activatorRef, children: children }));
17
+ const Tooltip = ({ activatorRef, children, ignoreIntersections = true, ...props }) => {
18
+ return (jsx(TooltipBase, { ...props, ignoreIntersections: ignoreIntersections, activatorRef: activatorRef, children: children }));
20
19
  };
21
20
 
22
21
  export { Tooltip };
package/Tooltip.js.map CHANGED
@@ -1 +1 @@
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;;;;"}
1
+ {"version":3,"file":"Tooltip.js","sources":["../src/Tooltip.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { TooltipBase } from '@hh.ru/magritte-ui-tooltip/TooltipBase';\nimport { TooltipProps } from '@hh.ru/magritte-ui-tooltip/types';\n\nexport const Tooltip = ({\n activatorRef,\n children,\n ignoreIntersections = true,\n ...props\n}: TooltipProps): ReactElement | null => {\n return (\n <TooltipBase {...props} ignoreIntersections={ignoreIntersections} activatorRef={activatorRef}>\n {children}\n </TooltipBase>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;AAKa,MAAA,OAAO,GAAG,CAAC,EACpB,YAAY,EACZ,QAAQ,EACR,mBAAmB,GAAG,IAAI,EAC1B,GAAG,KAAK,EACG,KAAyB;AACpC,IAAA,QACIA,GAAC,CAAA,WAAW,EAAK,EAAA,GAAA,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,YAAY,EAAE,YAAY,YACvF,QAAQ,EAAA,CACC,EAChB;AACN;;;;"}
package/TooltipBase.d.ts CHANGED
@@ -1,4 +1,3 @@
1
1
  import { type ReactElement } from 'react';
2
- import { DropBaseVerticalPosition, DropBaseHorizontalPosition } from '@hh.ru/magritte-internal-drop-base';
3
2
  import { TooltipBaseProps } from '@hh.ru/magritte-ui-tooltip/types';
4
- 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;
3
+ export declare const TooltipBase: ({ visible, activatorRef, onClose, maxWidth, title, action, actionClose, children, showClose, actionProps, guardDistanceToActivator, closeByClickOutside, placement, forcePlacement, "aria-label-close": ariaLabelClose, role, ...props }: TooltipBaseProps) => ReactElement | null;
package/TooltipBase.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
- import { useId, useState, useEffect } from 'react';
3
+ import { useId, useState, useMemo, useEffect } from 'react';
4
4
  import classnames from 'classnames';
5
5
  import { DropBase } from '@hh.ru/magritte-internal-drop-base';
6
6
  import { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';
@@ -13,14 +13,29 @@ import { TooltipArrow } from './TooltipArrow.js';
13
13
  import { Text } from '@hh.ru/magritte-ui-typography';
14
14
  import { BaseText } from '@hh.ru/magritte-ui-typography/BaseText';
15
15
 
16
- var styles = {"tooltip":"magritte-tooltip___Hxyh2_6-2-1","tooltip-with-action":"magritte-tooltip-with-action___aYbOD_6-2-1","tooltipWithAction":"magritte-tooltip-with-action___aYbOD_6-2-1","tooltip-title":"magritte-tooltip-title___s-ekd_6-2-1","tooltipTitle":"magritte-tooltip-title___s-ekd_6-2-1","tooltip-close":"magritte-tooltip-close___B1qWh_6-2-1","tooltipClose":"magritte-tooltip-close___B1qWh_6-2-1","tooltip-with-close":"magritte-tooltip-with-close___2iNPt_6-2-1","tooltipWithClose":"magritte-tooltip-with-close___2iNPt_6-2-1","tooltip-enter-active":"magritte-tooltip-enter-active___M8qsm_6-2-1","tooltipEnterActive":"magritte-tooltip-enter-active___M8qsm_6-2-1","css-variables-element":"magritte-css-variables-element___yRnOI_6-2-1","cssVariablesElement":"magritte-css-variables-element___yRnOI_6-2-1","tooltip-enter-done":"magritte-tooltip-enter-done___ceiob_6-2-1","tooltipEnterDone":"magritte-tooltip-enter-done___ceiob_6-2-1","tooltip-exit-active":"magritte-tooltip-exit-active___QllYr_6-2-1","tooltipExitActive":"magritte-tooltip-exit-active___QllYr_6-2-1","tooltip-direction-bottom":"magritte-tooltip-direction-bottom___Z-QlF_6-2-1","tooltipDirectionBottom":"magritte-tooltip-direction-bottom___Z-QlF_6-2-1","tooltip-direction-top":"magritte-tooltip-direction-top___7D3L-_6-2-1","tooltipDirectionTop":"magritte-tooltip-direction-top___7D3L-_6-2-1","tooltip-direction-left":"magritte-tooltip-direction-left___-gcHH_6-2-1","tooltipDirectionLeft":"magritte-tooltip-direction-left___-gcHH_6-2-1","tooltip-direction-right":"magritte-tooltip-direction-right___KgFDu_6-2-1","tooltipDirectionRight":"magritte-tooltip-direction-right___KgFDu_6-2-1","tooltip-actions":"magritte-tooltip-actions___gN8ad_6-2-1","tooltipActions":"magritte-tooltip-actions___gN8ad_6-2-1","tooltip-arrow":"magritte-tooltip-arrow___7OOYT_6-2-1","tooltipArrow":"magritte-tooltip-arrow___7OOYT_6-2-1","tooltip-alignment-left":"magritte-tooltip-alignment-left___BQPgG_6-2-1","tooltipAlignmentLeft":"magritte-tooltip-alignment-left___BQPgG_6-2-1","tooltip-alignment-center":"magritte-tooltip-alignment-center___FuX8d_6-2-1","tooltipAlignmentCenter":"magritte-tooltip-alignment-center___FuX8d_6-2-1","tooltip-alignment-right":"magritte-tooltip-alignment-right___bzmhg_6-2-1","tooltipAlignmentRight":"magritte-tooltip-alignment-right___bzmhg_6-2-1","tooltip-alignment-top":"magritte-tooltip-alignment-top___qLAji_6-2-1","tooltipAlignmentTop":"magritte-tooltip-alignment-top___qLAji_6-2-1","tooltip-alignment-bottom":"magritte-tooltip-alignment-bottom___v2JlH_6-2-1","tooltipAlignmentBottom":"magritte-tooltip-alignment-bottom___v2JlH_6-2-1"};
16
+ var styles = {"tooltip":"magritte-tooltip___Hxyh2_7-0-0","tooltip-with-action":"magritte-tooltip-with-action___aYbOD_7-0-0","tooltipWithAction":"magritte-tooltip-with-action___aYbOD_7-0-0","tooltip-title":"magritte-tooltip-title___s-ekd_7-0-0","tooltipTitle":"magritte-tooltip-title___s-ekd_7-0-0","tooltip-close":"magritte-tooltip-close___B1qWh_7-0-0","tooltipClose":"magritte-tooltip-close___B1qWh_7-0-0","tooltip-with-close":"magritte-tooltip-with-close___2iNPt_7-0-0","tooltipWithClose":"magritte-tooltip-with-close___2iNPt_7-0-0","tooltip-enter":"magritte-tooltip-enter___cnped_7-0-0","tooltipEnter":"magritte-tooltip-enter___cnped_7-0-0","css-variables-element":"magritte-css-variables-element___yRnOI_7-0-0","cssVariablesElement":"magritte-css-variables-element___yRnOI_7-0-0","tooltip-enter-active":"magritte-tooltip-enter-active___M8qsm_7-0-0","tooltipEnterActive":"magritte-tooltip-enter-active___M8qsm_7-0-0","tooltip-exit":"magritte-tooltip-exit___IXkNp_7-0-0","tooltipExit":"magritte-tooltip-exit___IXkNp_7-0-0","tooltip-exit-active":"magritte-tooltip-exit-active___QllYr_7-0-0","tooltipExitActive":"magritte-tooltip-exit-active___QllYr_7-0-0","tooltip-actions":"magritte-tooltip-actions___gN8ad_7-0-0","tooltipActions":"magritte-tooltip-actions___gN8ad_7-0-0","tooltip-arrow":"magritte-tooltip-arrow___7OOYT_7-0-0","tooltipArrow":"magritte-tooltip-arrow___7OOYT_7-0-0"};
17
17
 
18
18
  const CSS_CLASSES = {
19
+ enter: styles.tooltipEnter,
19
20
  enterActive: styles.tooltipEnterActive,
20
- enterDone: styles.tooltipEnterDone,
21
+ exit: styles.tooltipExit,
21
22
  exitActive: styles.tooltipExitActive,
22
23
  };
23
- 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 }) => {
24
+ const PLACEMENTS_LIST = [
25
+ 'left-top',
26
+ 'left-center',
27
+ 'left-bottom',
28
+ 'top-left',
29
+ 'top-center',
30
+ 'top-right',
31
+ 'right-bottom',
32
+ 'right-center',
33
+ 'right-top',
34
+ 'bottom-left',
35
+ 'bottom-center',
36
+ 'bottom-right',
37
+ ];
38
+ const TooltipBase = ({ visible, activatorRef, onClose, maxWidth = 400, title, action, actionClose, children, showClose, actionProps, guardDistanceToActivator = 20, closeByClickOutside = true, placement, forcePlacement, 'aria-label-close': ariaLabelClose, role = 'tooltip', ...props }) => {
24
39
  const { isMobile } = useBreakpoint();
25
40
  const id = useId();
26
41
  const ariaLabledBy = `tooltip-aria-label-${id}`;
@@ -32,6 +47,7 @@ const TooltipBase = ({ direction, alignment, visible, host, activatorRef, onClos
32
47
  top: { left: 0, center: 0, right: 0 },
33
48
  bottom: { left: 0, center: 0, right: 0 },
34
49
  });
50
+ const placementsList = useMemo(() => (forcePlacement ? placement : [placement, ...PLACEMENTS_LIST.filter((place) => place !== placement)]), [placement, forcePlacement]);
35
51
  const ariaRole = role === 'tooltip' && action ? 'alertdialog' : role;
36
52
  useEffect(() => {
37
53
  const cssVariablesElement = document.createElement('div');
@@ -101,8 +117,7 @@ const TooltipBase = ({ direction, alignment, visible, host, activatorRef, onClos
101
117
  if (isMobile) {
102
118
  return null;
103
119
  }
104
- const position = { direction, alignment };
105
- 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}`]}`, {
120
+ return (jsx(Layer, { layer: InternalLayerName.Tooltip, children: jsx(DropBase, { ...props, placement: placementsList, visible: visible, activatorRef: activatorRef, arrowGuardDistance: arrowGuardDistance, closeByClickOutside: closeByClickOutside, onClose: onClose, autoFocusWhenOpened: ariaRole !== 'tooltip', guardDistanceToActivator: guardDistanceToActivator, guardDistanceToViewport: 0, allowShrinkHeightToFitIntoViewport: false, animationClassNames: CSS_CLASSES, animationTimeout: animationTimeout, role: ariaRole, "aria-labelledby": title && role !== 'tooltip' ? ariaLabledBy : undefined, "aria-describedby": role !== 'tooltip' ? ariaDescribedBy : undefined, children: () => (jsxs("div", { "data-qa": "tooltip", className: classnames(styles.tooltip, {
106
121
  [styles.tooltipWithAction]: action,
107
122
  [styles.tooltipWithClose]: !action && showClose,
108
123
  }), style: {
package/TooltipBase.js.map CHANGED
@@ -1 +1 @@
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\n data-qa=\"tooltip-action\"\n {...actionProps}\n style=\"contrast\"\n mode=\"secondary\"\n size=\"small\"\n >\n {action}\n </Button>\n {actionClose && (\n <Button\n data-qa=\"tooltip-close-action\"\n onClick={() => onClose?.()}\n style=\"contrast\"\n mode=\"tertiary\"\n size=\"small\"\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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"}
1
+ {"version":3,"file":"TooltipBase.js","sources":["../src/TooltipBase.tsx"],"sourcesContent":["import { type ReactElement, useEffect, useId, useState, useMemo } from 'react';\nimport classnames from 'classnames';\n\nimport { DropBase, type ArrowGuardDistance, type Placement } 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 enter: styles.tooltipEnter,\n enterActive: styles.tooltipEnterActive,\n exit: styles.tooltipExit,\n exitActive: styles.tooltipExitActive,\n};\n\nconst PLACEMENTS_LIST: Placement[] = [\n 'left-top',\n 'left-center',\n 'left-bottom',\n 'top-left',\n 'top-center',\n 'top-right',\n 'right-bottom',\n 'right-center',\n 'right-top',\n 'bottom-left',\n 'bottom-center',\n 'bottom-right',\n];\n\nexport const TooltipBase = ({\n visible,\n activatorRef,\n onClose,\n maxWidth = 400,\n title,\n action,\n actionClose,\n children,\n showClose,\n actionProps,\n guardDistanceToActivator = 20,\n closeByClickOutside = true,\n placement,\n forcePlacement,\n 'aria-label-close': ariaLabelClose,\n role = 'tooltip',\n ...props\n}: TooltipBaseProps): 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 const placementsList = useMemo(\n () => (forcePlacement ? placement : [placement, ...PLACEMENTS_LIST.filter((place) => place !== placement)]),\n [placement, forcePlacement]\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 return (\n <Layer layer={InternalLayerName.Tooltip}>\n <DropBase\n {...props}\n placement={placementsList}\n visible={visible}\n activatorRef={activatorRef}\n arrowGuardDistance={arrowGuardDistance}\n closeByClickOutside={closeByClickOutside}\n onClose={onClose}\n autoFocusWhenOpened={ariaRole !== 'tooltip'}\n guardDistanceToActivator={guardDistanceToActivator}\n guardDistanceToViewport={0}\n allowShrinkHeightToFitIntoViewport={false}\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 {() => (\n <div\n data-qa=\"tooltip\"\n className={classnames(styles.tooltip, {\n [styles.tooltipWithAction]: action,\n [styles.tooltipWithClose]: !action && showClose,\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\n data-qa=\"tooltip-action\"\n {...actionProps}\n style=\"contrast\"\n mode=\"secondary\"\n size=\"small\"\n >\n {action}\n </Button>\n {actionClose && (\n <Button\n data-qa=\"tooltip-close-action\"\n onClick={() => onClose?.()}\n style=\"contrast\"\n mode=\"tertiary\"\n size=\"small\"\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 CHANGED
@@ -1,4 +1,3 @@
1
1
  import { ReactElement } from 'react';
2
- import { DropBaseHorizontalPosition, DropBaseVerticalPosition } from '@hh.ru/magritte-internal-drop-base';
3
2
  import { TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip/types';
4
- export declare const TooltipHover: <T extends DropBaseHorizontalPosition | DropBaseVerticalPosition>({ activatorRef, children, direction, alignment, ignoreIntersections, ...props }: TooltipHoverProps<T>) => ReactElement | null;
3
+ export declare const TooltipHover: ({ activatorRef, children, ignoreIntersections, ...props }: TooltipHoverProps) => ReactElement | null;
package/TooltipHover.js CHANGED
@@ -14,7 +14,7 @@ import './TooltipArrow.js';
14
14
  import '@hh.ru/magritte-ui-typography';
15
15
  import '@hh.ru/magritte-ui-typography/BaseText';
16
16
 
17
- const TooltipHover = ({ activatorRef, children, direction, alignment, ignoreIntersections = true, ...props }) => {
17
+ const TooltipHover = ({ activatorRef, children, ignoreIntersections = true, ...props }) => {
18
18
  const [visible, setVisible] = useState(false);
19
19
  useEffect(() => {
20
20
  const activator = activatorRef.current;
@@ -34,8 +34,7 @@ const TooltipHover = ({ activatorRef, children, direction, alignment, ignoreInte
34
34
  activator.removeEventListener('mouseleave', handleMouseLeave);
35
35
  };
36
36
  }, [activatorRef, setVisible]);
37
- const position = { direction, alignment };
38
- return (jsx(TooltipBase, { ...props, ...position, ignoreIntersections: ignoreIntersections, visible: visible, activatorRef: activatorRef, children: children }));
37
+ return (jsx(TooltipBase, { ...props, ignoreIntersections: ignoreIntersections, visible: visible, activatorRef: activatorRef, children: children }));
39
38
  };
40
39
 
41
40
  export { TooltipHover };
package/TooltipHover.js.map CHANGED
@@ -1 +1 @@
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;;;;"}
1
+ {"version":3,"file":"TooltipHover.js","sources":["../src/TooltipHover.tsx"],"sourcesContent":["import { ReactElement, useEffect, useState } from 'react';\n\nimport { TooltipBase } from '@hh.ru/magritte-ui-tooltip/TooltipBase';\nimport { TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip/types';\n\nexport const TooltipHover = ({\n activatorRef,\n children,\n ignoreIntersections = true,\n ...props\n}: TooltipHoverProps): 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 return (\n <TooltipBase {...props} ignoreIntersections={ignoreIntersections} visible={visible} activatorRef={activatorRef}>\n {children}\n </TooltipBase>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;AAKa,MAAA,YAAY,GAAG,CAAC,EACzB,YAAY,EACZ,QAAQ,EACR,mBAAmB,GAAG,IAAI,EAC1B,GAAG,KAAK,EACQ,KAAyB;IACzC,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;IAE/B,QACIA,IAAC,WAAW,EAAA,EAAA,GAAK,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EACzG,QAAA,EAAA,QAAQ,EACC,CAAA,EAChB;AACN;;;;"}
package/index.css CHANGED
@@ -14,7 +14,7 @@
14
14
  --magritte-color-component-tooltip-text-content-v18-3-0:#ffffff;
15
15
  --magritte-color-component-tooltip-stroke-content-v18-3-0:#3B3B3B;
16
16
  }
17
- .magritte-tooltip___Hxyh2_6-2-1{
17
+ .magritte-tooltip___Hxyh2_7-0-0{
18
18
  position:relative;
19
19
  padding:16px;
20
20
  border-radius:var(--magritte-static-border-radius-400-v18-3-0);
@@ -27,129 +27,119 @@
27
27
  --magritte-ui-tooltip-arrow-fill:var(--magritte-color-component-tooltip-background-content-v18-3-0);
28
28
  --magritte-ui-tooltip-arrow-stroke:var(--magritte-color-component-tooltip-stroke-content-v18-3-0);
29
29
  }
30
- .magritte-tooltip-with-action___aYbOD_6-2-1{
30
+ .magritte-tooltip-with-action___aYbOD_7-0-0{
31
31
  border-bottom-left-radius:var(--magritte-static-border-radius-600-v18-3-0);
32
32
  border-bottom-right-radius:var(--magritte-static-border-radius-600-v18-3-0);
33
33
  }
34
- .magritte-tooltip-title___s-ekd_6-2-1{
34
+ .magritte-tooltip-title___s-ekd_7-0-0{
35
35
  margin-bottom:4px;
36
36
  }
37
- .magritte-tooltip-close___B1qWh_6-2-1{
37
+ .magritte-tooltip-close___B1qWh_7-0-0{
38
38
  position:absolute;
39
39
  right:9px;
40
40
  top:9px;
41
41
  }
42
- .magritte-tooltip-with-close___2iNPt_6-2-1{
42
+ .magritte-tooltip-with-close___2iNPt_7-0-0{
43
43
  padding-right:40px;
44
44
  }
45
45
  @media (prefers-reduced-motion: no-preference){
46
- .magritte-tooltip-enter-active___M8qsm_6-2-1 .magritte-tooltip___Hxyh2_6-2-1{
46
+ .magritte-tooltip-enter___cnped_7-0-0 .magritte-tooltip___Hxyh2_7-0-0{
47
47
  opacity:0;
48
48
  }
49
- .magritte-css-variables-element___yRnOI_6-2-1,
50
- .magritte-tooltip-enter-done___ceiob_6-2-1 .magritte-tooltip___Hxyh2_6-2-1{
49
+ .magritte-css-variables-element___yRnOI_7-0-0,
50
+ .magritte-tooltip-enter-active___M8qsm_7-0-0 .magritte-tooltip___Hxyh2_7-0-0{
51
51
  opacity:1;
52
- transition:all var(--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0) var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-3-0);
52
+ transition-property:opacity, transform;
53
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0);
54
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-3-0);
53
55
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0);
54
56
  }
55
- .magritte-tooltip-exit-active___QllYr_6-2-1 .magritte-tooltip___Hxyh2_6-2-1{
57
+ .magritte-tooltip-exit___IXkNp_7-0-0 .magritte-tooltip___Hxyh2_7-0-0{
58
+ opacity:1;
59
+ }
60
+ .magritte-tooltip-exit-active___QllYr_7-0-0 .magritte-tooltip___Hxyh2_7-0-0{
56
61
  opacity:0;
57
- transition:all var(--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0) var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-3-0);
62
+ transition-property:opacity, transform;
63
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0);
64
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-3-0);
58
65
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0);
59
66
  }
60
- .magritte-tooltip-exit-active___QllYr_6-2-1 .magritte-tooltip-direction-bottom___Z-QlF_6-2-1{
61
- transform:translateY(4px);
62
- }
63
- .magritte-tooltip-enter-active___M8qsm_6-2-1 .magritte-tooltip-direction-bottom___Z-QlF_6-2-1{
67
+ .magritte-tooltip-exit-active___QllYr_7-0-0[data-magritte-drop-base-direction='bottom'] .magritte-tooltip___Hxyh2_7-0-0,
68
+ .magritte-tooltip-enter___cnped_7-0-0[data-magritte-drop-base-direction='bottom'] .magritte-tooltip___Hxyh2_7-0-0{
64
69
  transform:translateY(4px);
65
70
  }
66
- .magritte-tooltip-enter-done___ceiob_6-2-1 .magritte-tooltip-direction-bottom___Z-QlF_6-2-1{
67
- transform:translateY(0%);
68
- }
69
- .magritte-tooltip-exit-active___QllYr_6-2-1 .magritte-tooltip-direction-top___7D3L-_6-2-1{
70
- transform:translateY(-4px);
71
- }
72
- .magritte-tooltip-enter-active___M8qsm_6-2-1 .magritte-tooltip-direction-top___7D3L-_6-2-1{
71
+ .magritte-tooltip-exit-active___QllYr_7-0-0[data-magritte-drop-base-direction='top'] .magritte-tooltip___Hxyh2_7-0-0,
72
+ .magritte-tooltip-enter___cnped_7-0-0[data-magritte-drop-base-direction='top'] .magritte-tooltip___Hxyh2_7-0-0{
73
73
  transform:translateY(-4px);
74
74
  }
75
- .magritte-tooltip-enter-done___ceiob_6-2-1 .magritte-tooltip-direction-top___7D3L-_6-2-1{
76
- transform:translateY(0%);
77
- }
78
- .magritte-tooltip-exit-active___QllYr_6-2-1 .magritte-tooltip-direction-left___-gcHH_6-2-1{
79
- transform:translateX(-4px);
80
- }
81
- .magritte-tooltip-enter-active___M8qsm_6-2-1 .magritte-tooltip-direction-left___-gcHH_6-2-1{
75
+ .magritte-tooltip-exit-active___QllYr_7-0-0[data-magritte-drop-base-direction='left'] .magritte-tooltip___Hxyh2_7-0-0,
76
+ .magritte-tooltip-enter___cnped_7-0-0[data-magritte-drop-base-direction='left'] .magritte-tooltip___Hxyh2_7-0-0{
82
77
  transform:translateX(-4px);
83
78
  }
84
- .magritte-tooltip-enter-done___ceiob_6-2-1 .magritte-tooltip-direction-left___-gcHH_6-2-1{
85
- transform:translateX(0%);
86
- }
87
- .magritte-tooltip-exit-active___QllYr_6-2-1 .magritte-tooltip-direction-right___KgFDu_6-2-1{
88
- transform:translateX(4px);
89
- }
90
- .magritte-tooltip-enter-active___M8qsm_6-2-1 .magritte-tooltip-direction-right___KgFDu_6-2-1{
79
+ .magritte-tooltip-exit-active___QllYr_7-0-0[data-magritte-drop-base-direction='right'] .magritte-tooltip___Hxyh2_7-0-0,
80
+ .magritte-tooltip-enter___cnped_7-0-0[data-magritte-drop-base-direction='right'] .magritte-tooltip___Hxyh2_7-0-0{
91
81
  transform:translateX(4px);
92
82
  }
93
- .magritte-tooltip-enter-done___ceiob_6-2-1 .magritte-tooltip-direction-right___KgFDu_6-2-1{
94
- transform:translateX(0%);
83
+ .magritte-tooltip-enter-active___M8qsm_7-0-0[data-magritte-drop-base-direction] .magritte-tooltip___Hxyh2_7-0-0{
84
+ transform:translate(0, 0);
95
85
  }
96
86
  }
97
- .magritte-tooltip-actions___gN8ad_6-2-1{
87
+ .magritte-tooltip-actions___gN8ad_7-0-0{
98
88
  display:flex;
99
89
  gap:12px;
100
90
  margin-top:16px;
101
91
  flex-flow:wrap;
102
92
  }
103
- .magritte-css-variables-element___yRnOI_6-2-1{
93
+ .magritte-css-variables-element___yRnOI_7-0-0{
104
94
  top:28px;
105
95
  right:15px;
106
96
  bottom:24px;
107
97
  left:calc(var(--magritte-static-border-radius-600-v18-3-0) - 12px / 2 + 28px /2 );
108
98
  }
109
- .magritte-tooltip-arrow___7OOYT_6-2-1{
99
+ .magritte-tooltip-arrow___7OOYT_7-0-0{
110
100
  position:absolute;
111
101
  }
112
- .magritte-tooltip-direction-bottom___Z-QlF_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
102
+ [data-magritte-drop-base-direction='bottom'] .magritte-tooltip-arrow___7OOYT_7-0-0{
113
103
  top:-12px;
114
104
  }
115
- .magritte-tooltip-direction-top___7D3L-_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
105
+ [data-magritte-drop-base-direction='top'] .magritte-tooltip-arrow___7OOYT_7-0-0{
116
106
  bottom:-12px;
117
107
  transform:rotate(180deg);
118
108
  }
119
- .magritte-tooltip-alignment-left___BQPgG_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
109
+ [data-magritte-drop-base-alignment='left'] .magritte-tooltip-arrow___7OOYT_7-0-0{
120
110
  left:15px;
121
111
  }
122
- .magritte-tooltip-alignment-left___BQPgG_6-2-1.magritte-tooltip-direction-top___7D3L-_6-2-1.magritte-tooltip-with-action___aYbOD_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
112
+ [data-magritte-drop-base-alignment='left'][data-magritte-drop-base-direction='top'] .magritte-tooltip-with-action___aYbOD_7-0-0 .magritte-tooltip-arrow___7OOYT_7-0-0{
123
113
  left:calc(var(--magritte-static-border-radius-600-v18-3-0) - 12px/2 + 28px/2);
124
114
  }
125
- .magritte-tooltip-direction-top___7D3L-_6-2-1.magritte-tooltip-alignment-center___FuX8d_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1,
126
- .magritte-tooltip-direction-bottom___Z-QlF_6-2-1.magritte-tooltip-alignment-center___FuX8d_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
115
+ [data-magritte-drop-base-direction='top'][data-magritte-drop-base-alignment='center'] .magritte-tooltip-arrow___7OOYT_7-0-0,
116
+ [data-magritte-drop-base-direction='bottom'][data-magritte-drop-base-alignment='center'] .magritte-tooltip-arrow___7OOYT_7-0-0{
127
117
  left:calc(50% - 28px/2);
128
118
  }
129
- .magritte-tooltip-alignment-right___bzmhg_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
119
+ [data-magritte-drop-base-alignment='right'] .magritte-tooltip-arrow___7OOYT_7-0-0{
130
120
  right:15px;
131
121
  }
132
- .magritte-tooltip-alignment-right___bzmhg_6-2-1.magritte-tooltip-direction-top___7D3L-_6-2-1.magritte-tooltip-with-action___aYbOD_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
122
+ [data-magritte-drop-base-alignment='right'][data-magritte-drop-base-direction='top'] .magritte-tooltip-with-action___aYbOD_7-0-0 .magritte-tooltip-arrow___7OOYT_7-0-0{
133
123
  right:calc(var(--magritte-static-border-radius-600-v18-3-0) - 12px/2 + 28px/2);
134
124
  }
135
- .magritte-tooltip-direction-left___-gcHH_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
125
+ [data-magritte-drop-base-direction='left'] .magritte-tooltip-arrow___7OOYT_7-0-0{
136
126
  right:-20px;
137
127
  transform:rotate(90deg);
138
128
  }
139
- .magritte-tooltip-direction-right___KgFDu_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
129
+ [data-magritte-drop-base-direction='right'] .magritte-tooltip-arrow___7OOYT_7-0-0{
140
130
  left:-20px;
141
131
  transform:rotate(-90deg);
142
132
  }
143
- .magritte-tooltip-alignment-top___qLAji_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
133
+ [data-magritte-drop-base-alignment='top'] .magritte-tooltip-arrow___7OOYT_7-0-0{
144
134
  top:24px;
145
135
  }
146
- .magritte-tooltip-direction-left___-gcHH_6-2-1.magritte-tooltip-alignment-center___FuX8d_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1,
147
- .magritte-tooltip-direction-right___KgFDu_6-2-1.magritte-tooltip-alignment-center___FuX8d_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
136
+ [data-magritte-drop-base-direction='left'][data-magritte-drop-base-alignment='center'] .magritte-tooltip-arrow___7OOYT_7-0-0,
137
+ [data-magritte-drop-base-direction='right'][data-magritte-drop-base-alignment='center'] .magritte-tooltip-arrow___7OOYT_7-0-0{
148
138
  top:calc(50% - 12px/2);
149
139
  }
150
- .magritte-tooltip-alignment-bottom___v2JlH_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
140
+ [data-magritte-drop-base-alignment='bottom'] .magritte-tooltip-arrow___7OOYT_7-0-0{
151
141
  bottom:24px;
152
142
  }
153
- .magritte-tooltip-alignment-bottom___v2JlH_6-2-1.magritte-tooltip-with-action___aYbOD_6-2-1 .magritte-tooltip-arrow___7OOYT_6-2-1{
143
+ [data-magritte-drop-base-alignment='bottom'] .magritte-tooltip-with-action___aYbOD_7-0-0 .magritte-tooltip-arrow___7OOYT_7-0-0{
154
144
  bottom:calc(var(--magritte-static-border-radius-600-v18-3-0) - 12px/2 + 28px/2);
155
145
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-tooltip",
3
- "version": "6.2.1",
3
+ "version": "7.0.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -21,11 +21,11 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@hh.ru/magritte-design-tokens": "18.3.0",
24
- "@hh.ru/magritte-internal-drop-base": "6.0.4",
24
+ "@hh.ru/magritte-internal-drop-base": "7.0.0",
25
25
  "@hh.ru/magritte-internal-layer-name": "2.2.0",
26
- "@hh.ru/magritte-ui-action": "4.3.16",
26
+ "@hh.ru/magritte-ui-action": "4.3.17",
27
27
  "@hh.ru/magritte-ui-breakpoint": "4.0.3",
28
- "@hh.ru/magritte-ui-button": "5.1.0",
28
+ "@hh.ru/magritte-ui-button": "5.1.1",
29
29
  "@hh.ru/magritte-ui-icon": "7.2.1",
30
30
  "@hh.ru/magritte-ui-layer": "2.0.6",
31
31
  "@hh.ru/magritte-ui-theme-provider": "1.1.26",
@@ -38,5 +38,5 @@
38
38
  "publishConfig": {
39
39
  "access": "public"
40
40
  },
41
- "gitHead": "7b11468eb1cd54c5819f9eb46da4d63f619eee49"
41
+ "gitHead": "e7a6ffbcfdc2a1626062c73336e4d389433327d8"
42
42
  }
package/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode, RefObject, PropsWithChildren } from 'react';
2
- import { ActivatorElementType } from '@hh.ru/magritte-internal-drop-base';
3
- import type { DropBasePermanentProps, DropBaseVerticalPosition, DropBaseHorizontalPosition } from '@hh.ru/magritte-internal-drop-base';
2
+ import { ActivatorElementType, Placement } from '@hh.ru/magritte-internal-drop-base';
3
+ import type { DropBasePermanentProps } from '@hh.ru/magritte-internal-drop-base';
4
4
  import { type DefaultButtonProps, type ButtonProps, type ButtonLabel } from '@hh.ru/magritte-ui-button';
5
5
  interface TooltipPropsWithAction {
6
6
  /** Лейбл кнопки действия */
@@ -43,13 +43,15 @@ interface TooltipOnlyProps {
43
43
  maxWidth?: number;
44
44
  /** Aria role подробнее в разделе Доступность */
45
45
  role?: 'tooltip' | 'dialog' | 'alertdialog';
46
+ placement: Placement;
47
+ forcePlacement?: boolean;
46
48
  }
47
49
  interface TooltipActivator {
48
50
  /** Активатор тултипа, относительно которого он показывается */
49
51
  activatorRef: RefObject<ActivatorElementType>;
50
52
  }
51
53
  export type TooltipActionableProps = PropsWithChildren<TooltipOnlyProps> & (TooltipPropsWithAction | TooltipPropsWithoutActionWithClose | TooltipPropsWithoutAction) & (TooltipTitleProps | TooltipWithoutTitleProps);
52
- export type TooltipBaseProps<T extends DropBaseHorizontalPosition | DropBaseVerticalPosition> = Omit<DropBasePermanentProps, 'arrowGuardDistance' | 'children' | 'animationTimeout' | 'animationClassNames' | 'role'> & T & TooltipActionableProps;
53
- 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;
54
- export type TooltipProps<T extends DropBaseHorizontalPosition | DropBaseVerticalPosition> = Omit<DropBasePermanentProps, 'arrowGuardDistance' | 'children' | 'animationTimeout' | 'animationClassNames' | 'role' | 'activatorRef'> & T & TooltipActionableProps & TooltipActivator;
54
+ export type TooltipBaseProps = Omit<DropBasePermanentProps, 'arrowGuardDistance' | 'children' | 'animationTimeout' | 'animationClassNames' | 'role' | 'placement' | 'allowShrinkHeightToFitIntoViewport' | 'guardDistanceToViewport' | 'minHeight'> & TooltipActionableProps;
55
+ export type TooltipHoverProps = Omit<DropBasePermanentProps, 'closeByClickOutside' | 'arrowGuardDistance' | 'children' | 'animationTimeout' | 'animationClassNames' | 'visible' | 'role' | 'activatorRef' | 'autoFocusWhenOpened' | 'placement' | 'allowShrinkHeightToFitIntoViewport' | 'guardDistanceToViewport' | 'minHeight'> & PropsWithChildren<Omit<TooltipOnlyProps, 'role'>> & TooltipActivator;
56
+ export type TooltipProps = Omit<DropBasePermanentProps, 'arrowGuardDistance' | 'children' | 'animationTimeout' | 'animationClassNames' | 'role' | 'activatorRef' | 'placement' | 'allowShrinkHeightToFitIntoViewport' | 'guardDistanceToViewport' | 'minHeight'> & TooltipActionableProps & TooltipActivator;
55
57
  export {};