@hh.ru/magritte-ui-tooltip 6.1.8 → 6.1.9

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 (5) hide show
  1. package/TooltipBase.js +2 -2
  2. package/TooltipBase.js.map +1 -1
  3. package/index.css +39 -39
  4. package/package.json +2 -2
  5. package/types.d.ts +1 -1
package/TooltipBase.js CHANGED
@@ -13,7 +13,7 @@ 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-1-8","tooltip-with-action":"magritte-tooltip-with-action___aYbOD_6-1-8","tooltipWithAction":"magritte-tooltip-with-action___aYbOD_6-1-8","tooltip-title":"magritte-tooltip-title___s-ekd_6-1-8","tooltipTitle":"magritte-tooltip-title___s-ekd_6-1-8","tooltip-close":"magritte-tooltip-close___B1qWh_6-1-8","tooltipClose":"magritte-tooltip-close___B1qWh_6-1-8","tooltip-with-close":"magritte-tooltip-with-close___2iNPt_6-1-8","tooltipWithClose":"magritte-tooltip-with-close___2iNPt_6-1-8","tooltip-enter-active":"magritte-tooltip-enter-active___M8qsm_6-1-8","tooltipEnterActive":"magritte-tooltip-enter-active___M8qsm_6-1-8","css-variables-element":"magritte-css-variables-element___yRnOI_6-1-8","cssVariablesElement":"magritte-css-variables-element___yRnOI_6-1-8","tooltip-enter-done":"magritte-tooltip-enter-done___ceiob_6-1-8","tooltipEnterDone":"magritte-tooltip-enter-done___ceiob_6-1-8","tooltip-exit-active":"magritte-tooltip-exit-active___QllYr_6-1-8","tooltipExitActive":"magritte-tooltip-exit-active___QllYr_6-1-8","tooltip-direction-bottom":"magritte-tooltip-direction-bottom___Z-QlF_6-1-8","tooltipDirectionBottom":"magritte-tooltip-direction-bottom___Z-QlF_6-1-8","tooltip-direction-top":"magritte-tooltip-direction-top___7D3L-_6-1-8","tooltipDirectionTop":"magritte-tooltip-direction-top___7D3L-_6-1-8","tooltip-direction-left":"magritte-tooltip-direction-left___-gcHH_6-1-8","tooltipDirectionLeft":"magritte-tooltip-direction-left___-gcHH_6-1-8","tooltip-direction-right":"magritte-tooltip-direction-right___KgFDu_6-1-8","tooltipDirectionRight":"magritte-tooltip-direction-right___KgFDu_6-1-8","tooltip-actions":"magritte-tooltip-actions___gN8ad_6-1-8","tooltipActions":"magritte-tooltip-actions___gN8ad_6-1-8","tooltip-arrow":"magritte-tooltip-arrow___7OOYT_6-1-8","tooltipArrow":"magritte-tooltip-arrow___7OOYT_6-1-8","tooltip-alignment-left":"magritte-tooltip-alignment-left___BQPgG_6-1-8","tooltipAlignmentLeft":"magritte-tooltip-alignment-left___BQPgG_6-1-8","tooltip-alignment-center":"magritte-tooltip-alignment-center___FuX8d_6-1-8","tooltipAlignmentCenter":"magritte-tooltip-alignment-center___FuX8d_6-1-8","tooltip-alignment-right":"magritte-tooltip-alignment-right___bzmhg_6-1-8","tooltipAlignmentRight":"magritte-tooltip-alignment-right___bzmhg_6-1-8","tooltip-alignment-top":"magritte-tooltip-alignment-top___qLAji_6-1-8","tooltipAlignmentTop":"magritte-tooltip-alignment-top___qLAji_6-1-8","tooltip-alignment-bottom":"magritte-tooltip-alignment-bottom___v2JlH_6-1-8","tooltipAlignmentBottom":"magritte-tooltip-alignment-bottom___v2JlH_6-1-8"};
16
+ var styles = {"tooltip":"magritte-tooltip___Hxyh2_6-1-9","tooltip-with-action":"magritte-tooltip-with-action___aYbOD_6-1-9","tooltipWithAction":"magritte-tooltip-with-action___aYbOD_6-1-9","tooltip-title":"magritte-tooltip-title___s-ekd_6-1-9","tooltipTitle":"magritte-tooltip-title___s-ekd_6-1-9","tooltip-close":"magritte-tooltip-close___B1qWh_6-1-9","tooltipClose":"magritte-tooltip-close___B1qWh_6-1-9","tooltip-with-close":"magritte-tooltip-with-close___2iNPt_6-1-9","tooltipWithClose":"magritte-tooltip-with-close___2iNPt_6-1-9","tooltip-enter-active":"magritte-tooltip-enter-active___M8qsm_6-1-9","tooltipEnterActive":"magritte-tooltip-enter-active___M8qsm_6-1-9","css-variables-element":"magritte-css-variables-element___yRnOI_6-1-9","cssVariablesElement":"magritte-css-variables-element___yRnOI_6-1-9","tooltip-enter-done":"magritte-tooltip-enter-done___ceiob_6-1-9","tooltipEnterDone":"magritte-tooltip-enter-done___ceiob_6-1-9","tooltip-exit-active":"magritte-tooltip-exit-active___QllYr_6-1-9","tooltipExitActive":"magritte-tooltip-exit-active___QllYr_6-1-9","tooltip-direction-bottom":"magritte-tooltip-direction-bottom___Z-QlF_6-1-9","tooltipDirectionBottom":"magritte-tooltip-direction-bottom___Z-QlF_6-1-9","tooltip-direction-top":"magritte-tooltip-direction-top___7D3L-_6-1-9","tooltipDirectionTop":"magritte-tooltip-direction-top___7D3L-_6-1-9","tooltip-direction-left":"magritte-tooltip-direction-left___-gcHH_6-1-9","tooltipDirectionLeft":"magritte-tooltip-direction-left___-gcHH_6-1-9","tooltip-direction-right":"magritte-tooltip-direction-right___KgFDu_6-1-9","tooltipDirectionRight":"magritte-tooltip-direction-right___KgFDu_6-1-9","tooltip-actions":"magritte-tooltip-actions___gN8ad_6-1-9","tooltipActions":"magritte-tooltip-actions___gN8ad_6-1-9","tooltip-arrow":"magritte-tooltip-arrow___7OOYT_6-1-9","tooltipArrow":"magritte-tooltip-arrow___7OOYT_6-1-9","tooltip-alignment-left":"magritte-tooltip-alignment-left___BQPgG_6-1-9","tooltipAlignmentLeft":"magritte-tooltip-alignment-left___BQPgG_6-1-9","tooltip-alignment-center":"magritte-tooltip-alignment-center___FuX8d_6-1-9","tooltipAlignmentCenter":"magritte-tooltip-alignment-center___FuX8d_6-1-9","tooltip-alignment-right":"magritte-tooltip-alignment-right___bzmhg_6-1-9","tooltipAlignmentRight":"magritte-tooltip-alignment-right___bzmhg_6-1-9","tooltip-alignment-top":"magritte-tooltip-alignment-top___qLAji_6-1-9","tooltipAlignmentTop":"magritte-tooltip-alignment-top___qLAji_6-1-9","tooltip-alignment-bottom":"magritte-tooltip-alignment-bottom___v2JlH_6-1-9","tooltipAlignmentBottom":"magritte-tooltip-alignment-bottom___v2JlH_6-1-9"};
17
17
 
18
18
  const CSS_CLASSES = {
19
19
  enterActive: styles.tooltipEnterActive,
@@ -107,7 +107,7 @@ const TooltipBase = ({ direction, alignment, visible, host, activatorRef, onClos
107
107
  [styles.tooltipWithClose]: !action && showClose,
108
108
  }), style: {
109
109
  maxWidth: `${maxWidth}px`,
110
- }, 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 })] })) }) }));
110
+ }, 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", size: "small", children: action }), actionClose && (jsx(Button, { "data-qa": "tooltip-close-action", onClick: () => onClose?.(), style: "contrast", mode: "tertiary", size: "small", 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 })] })) }) }));
111
111
  };
112
112
 
113
113
  export { TooltipBase };
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 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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"}
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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"}
package/index.css CHANGED
@@ -14,7 +14,7 @@
14
14
  --magritte-color-component-tooltip-text-content-v18-2-1:#ffffff;
15
15
  --magritte-color-component-tooltip-stroke-content-v18-2-1:#3B3B3B;
16
16
  }
17
- .magritte-tooltip___Hxyh2_6-1-8{
17
+ .magritte-tooltip___Hxyh2_6-1-9{
18
18
  position:relative;
19
19
  padding:16px;
20
20
  border-radius:var(--magritte-static-border-radius-400-v18-2-1);
@@ -27,129 +27,129 @@
27
27
  --magritte-ui-tooltip-arrow-fill:var(--magritte-color-component-tooltip-background-content-v18-2-1);
28
28
  --magritte-ui-tooltip-arrow-stroke:var(--magritte-color-component-tooltip-stroke-content-v18-2-1);
29
29
  }
30
- .magritte-tooltip-with-action___aYbOD_6-1-8{
30
+ .magritte-tooltip-with-action___aYbOD_6-1-9{
31
31
  border-bottom-left-radius:var(--magritte-static-border-radius-600-v18-2-1);
32
32
  border-bottom-right-radius:var(--magritte-static-border-radius-600-v18-2-1);
33
33
  }
34
- .magritte-tooltip-title___s-ekd_6-1-8{
34
+ .magritte-tooltip-title___s-ekd_6-1-9{
35
35
  margin-bottom:4px;
36
36
  }
37
- .magritte-tooltip-close___B1qWh_6-1-8{
37
+ .magritte-tooltip-close___B1qWh_6-1-9{
38
38
  position:absolute;
39
39
  right:9px;
40
40
  top:9px;
41
41
  }
42
- .magritte-tooltip-with-close___2iNPt_6-1-8{
42
+ .magritte-tooltip-with-close___2iNPt_6-1-9{
43
43
  padding-right:40px;
44
44
  }
45
45
  @media (prefers-reduced-motion: no-preference){
46
- .magritte-tooltip-enter-active___M8qsm_6-1-8 .magritte-tooltip___Hxyh2_6-1-8{
46
+ .magritte-tooltip-enter-active___M8qsm_6-1-9 .magritte-tooltip___Hxyh2_6-1-9{
47
47
  opacity:0;
48
48
  }
49
- .magritte-css-variables-element___yRnOI_6-1-8,
50
- .magritte-tooltip-enter-done___ceiob_6-1-8 .magritte-tooltip___Hxyh2_6-1-8{
49
+ .magritte-css-variables-element___yRnOI_6-1-9,
50
+ .magritte-tooltip-enter-done___ceiob_6-1-9 .magritte-tooltip___Hxyh2_6-1-9{
51
51
  opacity:1;
52
52
  transition:all var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-1) var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1);
53
53
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-1);
54
54
  }
55
- .magritte-tooltip-exit-active___QllYr_6-1-8 .magritte-tooltip___Hxyh2_6-1-8{
55
+ .magritte-tooltip-exit-active___QllYr_6-1-9 .magritte-tooltip___Hxyh2_6-1-9{
56
56
  opacity:0;
57
57
  transition:all var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-1) var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1);
58
58
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-1);
59
59
  }
60
- .magritte-tooltip-exit-active___QllYr_6-1-8 .magritte-tooltip-direction-bottom___Z-QlF_6-1-8{
60
+ .magritte-tooltip-exit-active___QllYr_6-1-9 .magritte-tooltip-direction-bottom___Z-QlF_6-1-9{
61
61
  transform:translateY(4px);
62
62
  }
63
- .magritte-tooltip-enter-active___M8qsm_6-1-8 .magritte-tooltip-direction-bottom___Z-QlF_6-1-8{
63
+ .magritte-tooltip-enter-active___M8qsm_6-1-9 .magritte-tooltip-direction-bottom___Z-QlF_6-1-9{
64
64
  transform:translateY(4px);
65
65
  }
66
- .magritte-tooltip-enter-done___ceiob_6-1-8 .magritte-tooltip-direction-bottom___Z-QlF_6-1-8{
66
+ .magritte-tooltip-enter-done___ceiob_6-1-9 .magritte-tooltip-direction-bottom___Z-QlF_6-1-9{
67
67
  transform:translateY(0%);
68
68
  }
69
- .magritte-tooltip-exit-active___QllYr_6-1-8 .magritte-tooltip-direction-top___7D3L-_6-1-8{
69
+ .magritte-tooltip-exit-active___QllYr_6-1-9 .magritte-tooltip-direction-top___7D3L-_6-1-9{
70
70
  transform:translateY(-4px);
71
71
  }
72
- .magritte-tooltip-enter-active___M8qsm_6-1-8 .magritte-tooltip-direction-top___7D3L-_6-1-8{
72
+ .magritte-tooltip-enter-active___M8qsm_6-1-9 .magritte-tooltip-direction-top___7D3L-_6-1-9{
73
73
  transform:translateY(-4px);
74
74
  }
75
- .magritte-tooltip-enter-done___ceiob_6-1-8 .magritte-tooltip-direction-top___7D3L-_6-1-8{
75
+ .magritte-tooltip-enter-done___ceiob_6-1-9 .magritte-tooltip-direction-top___7D3L-_6-1-9{
76
76
  transform:translateY(0%);
77
77
  }
78
- .magritte-tooltip-exit-active___QllYr_6-1-8 .magritte-tooltip-direction-left___-gcHH_6-1-8{
78
+ .magritte-tooltip-exit-active___QllYr_6-1-9 .magritte-tooltip-direction-left___-gcHH_6-1-9{
79
79
  transform:translateX(-4px);
80
80
  }
81
- .magritte-tooltip-enter-active___M8qsm_6-1-8 .magritte-tooltip-direction-left___-gcHH_6-1-8{
81
+ .magritte-tooltip-enter-active___M8qsm_6-1-9 .magritte-tooltip-direction-left___-gcHH_6-1-9{
82
82
  transform:translateX(-4px);
83
83
  }
84
- .magritte-tooltip-enter-done___ceiob_6-1-8 .magritte-tooltip-direction-left___-gcHH_6-1-8{
84
+ .magritte-tooltip-enter-done___ceiob_6-1-9 .magritte-tooltip-direction-left___-gcHH_6-1-9{
85
85
  transform:translateX(0%);
86
86
  }
87
- .magritte-tooltip-exit-active___QllYr_6-1-8 .magritte-tooltip-direction-right___KgFDu_6-1-8{
87
+ .magritte-tooltip-exit-active___QllYr_6-1-9 .magritte-tooltip-direction-right___KgFDu_6-1-9{
88
88
  transform:translateX(4px);
89
89
  }
90
- .magritte-tooltip-enter-active___M8qsm_6-1-8 .magritte-tooltip-direction-right___KgFDu_6-1-8{
90
+ .magritte-tooltip-enter-active___M8qsm_6-1-9 .magritte-tooltip-direction-right___KgFDu_6-1-9{
91
91
  transform:translateX(4px);
92
92
  }
93
- .magritte-tooltip-enter-done___ceiob_6-1-8 .magritte-tooltip-direction-right___KgFDu_6-1-8{
93
+ .magritte-tooltip-enter-done___ceiob_6-1-9 .magritte-tooltip-direction-right___KgFDu_6-1-9{
94
94
  transform:translateX(0%);
95
95
  }
96
96
  }
97
- .magritte-tooltip-actions___gN8ad_6-1-8{
97
+ .magritte-tooltip-actions___gN8ad_6-1-9{
98
98
  display:flex;
99
99
  gap:12px;
100
100
  margin-top:16px;
101
101
  flex-flow:wrap;
102
102
  }
103
- .magritte-css-variables-element___yRnOI_6-1-8{
103
+ .magritte-css-variables-element___yRnOI_6-1-9{
104
104
  top:28px;
105
105
  right:15px;
106
106
  bottom:24px;
107
107
  left:calc(var(--magritte-static-border-radius-600-v18-2-1) - 12px / 2 + 28px /2 );
108
108
  }
109
- .magritte-tooltip-arrow___7OOYT_6-1-8{
109
+ .magritte-tooltip-arrow___7OOYT_6-1-9{
110
110
  position:absolute;
111
111
  }
112
- .magritte-tooltip-direction-bottom___Z-QlF_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
112
+ .magritte-tooltip-direction-bottom___Z-QlF_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
113
113
  top:-12px;
114
114
  }
115
- .magritte-tooltip-direction-top___7D3L-_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
115
+ .magritte-tooltip-direction-top___7D3L-_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
116
116
  bottom:-12px;
117
117
  transform:rotate(180deg);
118
118
  }
119
- .magritte-tooltip-alignment-left___BQPgG_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
119
+ .magritte-tooltip-alignment-left___BQPgG_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
120
120
  left:15px;
121
121
  }
122
- .magritte-tooltip-alignment-left___BQPgG_6-1-8.magritte-tooltip-direction-top___7D3L-_6-1-8.magritte-tooltip-with-action___aYbOD_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
122
+ .magritte-tooltip-alignment-left___BQPgG_6-1-9.magritte-tooltip-direction-top___7D3L-_6-1-9.magritte-tooltip-with-action___aYbOD_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
123
123
  left:calc(var(--magritte-static-border-radius-600-v18-2-1) - 12px/2 + 28px/2);
124
124
  }
125
- .magritte-tooltip-direction-top___7D3L-_6-1-8.magritte-tooltip-alignment-center___FuX8d_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8,
126
- .magritte-tooltip-direction-bottom___Z-QlF_6-1-8.magritte-tooltip-alignment-center___FuX8d_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
125
+ .magritte-tooltip-direction-top___7D3L-_6-1-9.magritte-tooltip-alignment-center___FuX8d_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9,
126
+ .magritte-tooltip-direction-bottom___Z-QlF_6-1-9.magritte-tooltip-alignment-center___FuX8d_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
127
127
  left:calc(50% - 28px/2);
128
128
  }
129
- .magritte-tooltip-alignment-right___bzmhg_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
129
+ .magritte-tooltip-alignment-right___bzmhg_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
130
130
  right:15px;
131
131
  }
132
- .magritte-tooltip-alignment-right___bzmhg_6-1-8.magritte-tooltip-direction-top___7D3L-_6-1-8.magritte-tooltip-with-action___aYbOD_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
132
+ .magritte-tooltip-alignment-right___bzmhg_6-1-9.magritte-tooltip-direction-top___7D3L-_6-1-9.magritte-tooltip-with-action___aYbOD_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
133
133
  right:calc(var(--magritte-static-border-radius-600-v18-2-1) - 12px/2 + 28px/2);
134
134
  }
135
- .magritte-tooltip-direction-left___-gcHH_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
135
+ .magritte-tooltip-direction-left___-gcHH_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
136
136
  right:-20px;
137
137
  transform:rotate(90deg);
138
138
  }
139
- .magritte-tooltip-direction-right___KgFDu_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
139
+ .magritte-tooltip-direction-right___KgFDu_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
140
140
  left:-20px;
141
141
  transform:rotate(-90deg);
142
142
  }
143
- .magritte-tooltip-alignment-top___qLAji_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
143
+ .magritte-tooltip-alignment-top___qLAji_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
144
144
  top:24px;
145
145
  }
146
- .magritte-tooltip-direction-left___-gcHH_6-1-8.magritte-tooltip-alignment-center___FuX8d_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8,
147
- .magritte-tooltip-direction-right___KgFDu_6-1-8.magritte-tooltip-alignment-center___FuX8d_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
146
+ .magritte-tooltip-direction-left___-gcHH_6-1-9.magritte-tooltip-alignment-center___FuX8d_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9,
147
+ .magritte-tooltip-direction-right___KgFDu_6-1-9.magritte-tooltip-alignment-center___FuX8d_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
148
148
  top:calc(50% - 12px/2);
149
149
  }
150
- .magritte-tooltip-alignment-bottom___v2JlH_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
150
+ .magritte-tooltip-alignment-bottom___v2JlH_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
151
151
  bottom:24px;
152
152
  }
153
- .magritte-tooltip-alignment-bottom___v2JlH_6-1-8.magritte-tooltip-with-action___aYbOD_6-1-8 .magritte-tooltip-arrow___7OOYT_6-1-8{
153
+ .magritte-tooltip-alignment-bottom___v2JlH_6-1-9.magritte-tooltip-with-action___aYbOD_6-1-9 .magritte-tooltip-arrow___7OOYT_6-1-9{
154
154
  bottom:calc(var(--magritte-static-border-radius-600-v18-2-1) - 12px/2 + 28px/2);
155
155
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-tooltip",
3
- "version": "6.1.8",
3
+ "version": "6.1.9",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -38,5 +38,5 @@
38
38
  "publishConfig": {
39
39
  "access": "public"
40
40
  },
41
- "gitHead": "bdbcf07ae5f66002ea09633961d0c9c008c70cd6"
41
+ "gitHead": "072f997a89b2060db44c7c18f664937e4d617be3"
42
42
  }
package/types.d.ts CHANGED
@@ -7,7 +7,7 @@ interface TooltipPropsWithAction {
7
7
  /** Лейбл кнопки закрытия */
8
8
  actionClose: ButtonLabel;
9
9
  /** Cвойства кнопки действия */
10
- actionProps: Omit<ButtonProps, 'style' | 'mode' | 'Element'> & Omit<DefaultButtonProps, 'children'>;
10
+ actionProps: Omit<ButtonProps, 'style' | 'mode' | 'size' | 'Element'> & Omit<DefaultButtonProps, 'children'>;
11
11
  'aria-label-close'?: never;
12
12
  showClose?: false;
13
13
  }