@itcase/ui 1.2.22 → 1.2.24

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 (58) hide show
  1. package/dist/{Button-CxJYh-_G.js → Button-AKN9f9n0.js} +1 -1
  2. package/dist/{Button-CDc_-QmL.js → Button-Bf9kDDqK.js} +1 -1
  3. package/dist/{Icon-DTwrijaa.js → Icon-B1V8M_j9.js} +6 -5
  4. package/dist/{Icon-DfVed6hR.js → Icon-Du1Nyea-.js} +7 -6
  5. package/dist/{Label-BT_PpHjb.js → Label-B0O9q0E4.js} +1 -1
  6. package/dist/{Label-B7HJUf4x.js → Label-D8DRdqad.js} +1 -1
  7. package/dist/{Tooltip-CK7SVawj.js → Tooltip-aaDRYNWY.js} +21 -10
  8. package/dist/{Tooltip-BygRHezt.js → Tooltip-xGmgUzGr.js} +21 -10
  9. package/dist/cjs/components/Accordion.js +2 -2
  10. package/dist/cjs/components/Avatar.js +2 -2
  11. package/dist/cjs/components/Breadcrumbs.js +2 -2
  12. package/dist/cjs/components/Button.js +3 -3
  13. package/dist/cjs/components/Cell.js +3 -3
  14. package/dist/cjs/components/Choice.js +2 -2
  15. package/dist/cjs/components/ContextMenu.js +2 -2
  16. package/dist/cjs/components/CookiesWarning.js +3 -3
  17. package/dist/cjs/components/DatePicker.js +4 -4
  18. package/dist/cjs/components/Icon.js +2 -2
  19. package/dist/cjs/components/InputPassword.js +2 -2
  20. package/dist/cjs/components/Label.js +2 -2
  21. package/dist/cjs/components/LanguageSelector.js +2 -2
  22. package/dist/cjs/components/Pagination.js +46 -13
  23. package/dist/cjs/components/Response.js +3 -3
  24. package/dist/cjs/components/Search.js +2 -2
  25. package/dist/cjs/components/Select.js +2 -2
  26. package/dist/cjs/components/SiteMenu.js +2 -2
  27. package/dist/cjs/components/Tooltip.js +1 -1
  28. package/dist/components/Accordion.js +2 -2
  29. package/dist/components/Avatar.js +2 -2
  30. package/dist/components/Breadcrumbs.js +2 -2
  31. package/dist/components/Button.js +3 -3
  32. package/dist/components/Cell.js +3 -3
  33. package/dist/components/Choice.js +2 -2
  34. package/dist/components/ContextMenu.js +2 -2
  35. package/dist/components/CookiesWarning.js +3 -3
  36. package/dist/components/DatePicker.js +4 -4
  37. package/dist/components/Icon.js +2 -2
  38. package/dist/components/InputPassword.js +2 -2
  39. package/dist/components/Label.js +2 -2
  40. package/dist/components/LanguageSelector.js +2 -2
  41. package/dist/components/Pagination.js +46 -14
  42. package/dist/components/Response.js +3 -3
  43. package/dist/components/Search.js +2 -2
  44. package/dist/components/Select.js +2 -2
  45. package/dist/components/SiteMenu.js +2 -2
  46. package/dist/components/Tooltip.js +1 -1
  47. package/dist/css/components/DatePicker/DatePicker.css +1 -1
  48. package/dist/css/components/Icon/Icon.css +1 -0
  49. package/dist/css/mixins/mixin_utils.css +18 -11
  50. package/dist/css/styles/mediaqueries.css +1 -1
  51. package/dist/css/tokens/typography.css +3 -0
  52. package/dist/types/components/Icon/Icon.d.ts +3 -3
  53. package/dist/types/components/Icon/Icon.interface.d.ts +15 -14
  54. package/dist/types/components/Pagination/Pagination.d.ts +3 -2
  55. package/dist/types/components/Pagination/Pagination.interface.d.ts +30 -13
  56. package/dist/types/components/Pagination/index.d.ts +1 -1
  57. package/dist/types/components/Tooltip/Tooltip.d.ts +1 -1
  58. package/package.json +27 -27
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import clsx from 'clsx';
4
4
  import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
5
5
  import { useStyles } from './hooks/useStyles.js';
6
- import { I as Icon } from './Icon-DfVed6hR.js';
6
+ import { I as Icon } from './Icon-Du1Nyea-.js';
7
7
  import { a as LinkWrapper } from './Link-CeQuavin.js';
8
8
  import { L as Loader } from './Loader-CJ8ZCdwy.js';
9
9
  import { T as Text } from './Text-CG3xPG27.js';
@@ -5,7 +5,7 @@ var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
7
7
  var useStyles = require('./cjs/hooks/useStyles.js');
8
- var Icon = require('./Icon-DTwrijaa.js');
8
+ var Icon = require('./Icon-B1V8M_j9.js');
9
9
  var Link = require('./Link-CqWzwh8V.js');
10
10
  var Loader = require('./Loader-fA11tUEJ.js');
11
11
  var Text = require('./Text-_YhyTsQ1.js');
@@ -7,7 +7,7 @@ var SVG = require('react-inlinesvg');
7
7
  var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
8
8
  var useStyles = require('./cjs/hooks/useStyles.js');
9
9
  var Link = require('./Link-CqWzwh8V.js');
10
- var Tooltip = require('./Tooltip-BygRHezt.js');
10
+ var Tooltip = require('./Tooltip-xGmgUzGr.js');
11
11
 
12
12
  var iconConfig = {
13
13
  appearance: {},
@@ -16,8 +16,9 @@ var iconConfig = {
16
16
  },
17
17
  };
18
18
  var Icon = React.forwardRef(function Icon(props, ref) {
19
- var _a = React.useState(false), isTooltipVisible = _a[0], setIsTooltipVisible = _a[1];
20
- var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick;
19
+ // TODO: Tooltip doesn't work that anymore
20
+ // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
21
+ var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
21
22
  // const svgSizes = useMemo(() => {
22
23
  // const sizes: {
23
24
  // width?: string
@@ -44,7 +45,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
44
45
  }
45
46
  return null;
46
47
  }, [SvgImage, width, height, imageSrc]);
47
- var cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
48
+ useDeviceTargetClass.useDeviceTargetClass(props, {
48
49
  prefix: 'cursor_',
49
50
  propsKey: 'cursor',
50
51
  });
@@ -106,7 +107,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
106
107
  });
107
108
  // @ts-expect-error
108
109
  var iconStyles = useStyles.useStyles(props).styles;
109
- return (jsxRuntime.jsx("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: function () { return setIsTooltipVisible(true); }, onMouseLeave: function () { return setIsTooltipVisible(false); }, children: jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx(link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }) }));
110
+ return (jsxRuntime.jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
110
111
  });
111
112
  var removeFillStroke = function (code) {
112
113
  return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
@@ -1,11 +1,11 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
- import React, { useState, useMemo } from 'react';
2
+ import React, { useMemo } from 'react';
3
3
  import clsx from 'clsx';
4
4
  import SVG from 'react-inlinesvg';
5
5
  import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
6
6
  import { useStyles } from './hooks/useStyles.js';
7
7
  import { a as LinkWrapper } from './Link-CeQuavin.js';
8
- import { T as Tooltip } from './Tooltip-CK7SVawj.js';
8
+ import { T as Tooltip } from './Tooltip-aaDRYNWY.js';
9
9
 
10
10
  var iconConfig = {
11
11
  appearance: {},
@@ -14,8 +14,9 @@ var iconConfig = {
14
14
  },
15
15
  };
16
16
  var Icon = React.forwardRef(function Icon(props, ref) {
17
- var _a = useState(false), isTooltipVisible = _a[0], setIsTooltipVisible = _a[1];
18
- var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick;
17
+ // TODO: Tooltip doesn't work that anymore
18
+ // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
19
+ var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
19
20
  // const svgSizes = useMemo(() => {
20
21
  // const sizes: {
21
22
  // width?: string
@@ -42,7 +43,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
42
43
  }
43
44
  return null;
44
45
  }, [SvgImage, width, height, imageSrc]);
45
- var cursorClass = useDeviceTargetClass(props, {
46
+ useDeviceTargetClass(props, {
46
47
  prefix: 'cursor_',
47
48
  propsKey: 'cursor',
48
49
  });
@@ -104,7 +105,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
104
105
  });
105
106
  // @ts-expect-error
106
107
  var iconStyles = useStyles(props).styles;
107
- return (jsx("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: function () { return setIsTooltipVisible(true); }, onMouseLeave: function () { return setIsTooltipVisible(false); }, children: jsxs(LinkWrapper, { className: clsx(link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }) }));
108
+ return (jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
108
109
  });
109
110
  var removeFillStroke = function (code) {
110
111
  return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
@@ -6,7 +6,7 @@ var clsx = require('clsx');
6
6
  var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
7
7
  var useStyles = require('./cjs/hooks/useStyles.js');
8
8
  var Text = require('./Text-_YhyTsQ1.js');
9
- var Tooltip = require('./Tooltip-BygRHezt.js');
9
+ var Tooltip = require('./Tooltip-xGmgUzGr.js');
10
10
 
11
11
  var labelConfig = {
12
12
  appearance: undefined,
@@ -4,7 +4,7 @@ import clsx from 'clsx';
4
4
  import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
5
5
  import { useStyles } from './hooks/useStyles.js';
6
6
  import { T as Text } from './Text-CG3xPG27.js';
7
- import { T as Tooltip } from './Tooltip-CK7SVawj.js';
7
+ import { T as Tooltip } from './Tooltip-aaDRYNWY.js';
8
8
 
9
9
  var labelConfig = {
10
10
  appearance: undefined,
@@ -13,11 +13,14 @@ var tooltipConfig = {
13
13
  },
14
14
  };
15
15
  var Tooltip = React.forwardRef(function Tooltip(props, ref) {
16
- var children = props.children, after = props.after, appearance = props.appearance, arrowPosition = props.arrowPosition, before = props.before, className = props.className, initialIsVisible = props.initialIsVisible, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize, title = props.title, alignPosition = props.alignPosition, titleSize = props.titleSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, type = props.type;
16
+ var children = props.children, after = props.after, appearance = props.appearance, arrowPosition = props.arrowPosition, before = props.before, className = props.className, initialIsVisible = props.initialIsVisible, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize, title = props.title, alignPosition = props.alignPosition, titleSize = props.titleSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, type = props.type, _a = props.openTimeoutDelay, openTimeoutDelay = _a === void 0 ? 500 : _a, _b = props.closeTimeoutDelay, closeTimeoutDelay = _b === void 0 ? 250 : _b;
17
+ var tooltipElementRef = useRef(null);
17
18
  var tooltipTimeoutHideRef = useRef(null);
18
19
  var tooltipTimeoutShowRef = useRef(null);
19
20
  var isTooltipCloseAnimationInProgressRef = useRef(false);
20
- var _a = useState(initialIsVisible), isTooltipVisible = _a[0], setIsTooltipVisible = _a[1];
21
+ // TODO: rename to open?
22
+ var _c = useState(initialIsVisible), isTooltipVisible = _c[0], setIsTooltipVisible = _c[1];
23
+ // TODO: or rename to show/hide?
21
24
  var openTooltip = useCallback(function () {
22
25
  if (!isTooltipCloseAnimationInProgressRef.current) {
23
26
  if (tooltipTimeoutHideRef.current) {
@@ -25,9 +28,9 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
25
28
  }
26
29
  tooltipTimeoutShowRef.current = setTimeout(function () {
27
30
  setIsTooltipVisible(true);
28
- }, 500);
31
+ }, openTimeoutDelay);
29
32
  }
30
- }, []);
33
+ }, [openTimeoutDelay]);
31
34
  var closeTooltip = useCallback(function () {
32
35
  if (tooltipTimeoutShowRef.current) {
33
36
  clearTimeout(tooltipTimeoutShowRef.current);
@@ -43,13 +46,20 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
43
46
  }
44
47
  return newState;
45
48
  });
46
- }, 250);
47
- }, []);
49
+ }, closeTimeoutDelay);
50
+ }, [closeTimeoutDelay]);
48
51
  var onAnimationEnd = useCallback(function () {
49
52
  isTooltipCloseAnimationInProgressRef.current = false;
50
53
  }, []);
51
- // @ts-expect-error
52
- useImperativeHandle(ref, function () { return ({ closeTooltip: closeTooltip, openTooltip: openTooltip }); }, [openTooltip, closeTooltip]);
54
+ useImperativeHandle(ref, function () { return ({
55
+ get tooltipElement() {
56
+ return tooltipElementRef.current;
57
+ },
58
+ isTooltipVisible: isTooltipVisible,
59
+ closeTooltip: closeTooltip,
60
+ openTooltip: openTooltip,
61
+ }); }, [isTooltipVisible, openTooltip, closeTooltip]);
62
+ /* STYLES */
53
63
  var alignDirectionClass = useDeviceTargetClass(props, {
54
64
  prefix: 'align_',
55
65
  propsKey: 'alignDirection',
@@ -96,10 +106,11 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
96
106
  });
97
107
  // @ts-expect-error
98
108
  var tooltipStyles = useStyles(props).styles;
99
- var appearanceConfig = appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance];
109
+ // prettier-ignore
110
+ var appearanceConfig = (appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance]);
100
111
  return (jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass ||
101
112
  ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
102
- "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxs("div", { className: "tooltip__inner", children: [title && (jsx(Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight), children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
113
+ "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), style: tooltipStyles, ref: tooltipElementRef, onAnimationEnd: onAnimationEnd, children: [before, jsxs("div", { className: "tooltip__inner", children: [title && (jsx(Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight), children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
103
114
  });
104
115
 
105
116
  export { Tooltip as T, tooltipConfig as t };
@@ -15,11 +15,14 @@ var tooltipConfig = {
15
15
  },
16
16
  };
17
17
  var Tooltip = React.forwardRef(function Tooltip(props, ref) {
18
- var children = props.children, after = props.after, appearance = props.appearance, arrowPosition = props.arrowPosition, before = props.before, className = props.className, initialIsVisible = props.initialIsVisible, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize, title = props.title, alignPosition = props.alignPosition, titleSize = props.titleSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, type = props.type;
18
+ var children = props.children, after = props.after, appearance = props.appearance, arrowPosition = props.arrowPosition, before = props.before, className = props.className, initialIsVisible = props.initialIsVisible, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize, title = props.title, alignPosition = props.alignPosition, titleSize = props.titleSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, type = props.type, _a = props.openTimeoutDelay, openTimeoutDelay = _a === void 0 ? 500 : _a, _b = props.closeTimeoutDelay, closeTimeoutDelay = _b === void 0 ? 250 : _b;
19
+ var tooltipElementRef = React.useRef(null);
19
20
  var tooltipTimeoutHideRef = React.useRef(null);
20
21
  var tooltipTimeoutShowRef = React.useRef(null);
21
22
  var isTooltipCloseAnimationInProgressRef = React.useRef(false);
22
- var _a = React.useState(initialIsVisible), isTooltipVisible = _a[0], setIsTooltipVisible = _a[1];
23
+ // TODO: rename to open?
24
+ var _c = React.useState(initialIsVisible), isTooltipVisible = _c[0], setIsTooltipVisible = _c[1];
25
+ // TODO: or rename to show/hide?
23
26
  var openTooltip = React.useCallback(function () {
24
27
  if (!isTooltipCloseAnimationInProgressRef.current) {
25
28
  if (tooltipTimeoutHideRef.current) {
@@ -27,9 +30,9 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
27
30
  }
28
31
  tooltipTimeoutShowRef.current = setTimeout(function () {
29
32
  setIsTooltipVisible(true);
30
- }, 500);
33
+ }, openTimeoutDelay);
31
34
  }
32
- }, []);
35
+ }, [openTimeoutDelay]);
33
36
  var closeTooltip = React.useCallback(function () {
34
37
  if (tooltipTimeoutShowRef.current) {
35
38
  clearTimeout(tooltipTimeoutShowRef.current);
@@ -45,13 +48,20 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
45
48
  }
46
49
  return newState;
47
50
  });
48
- }, 250);
49
- }, []);
51
+ }, closeTimeoutDelay);
52
+ }, [closeTimeoutDelay]);
50
53
  var onAnimationEnd = React.useCallback(function () {
51
54
  isTooltipCloseAnimationInProgressRef.current = false;
52
55
  }, []);
53
- // @ts-expect-error
54
- React.useImperativeHandle(ref, function () { return ({ closeTooltip: closeTooltip, openTooltip: openTooltip }); }, [openTooltip, closeTooltip]);
56
+ React.useImperativeHandle(ref, function () { return ({
57
+ get tooltipElement() {
58
+ return tooltipElementRef.current;
59
+ },
60
+ isTooltipVisible: isTooltipVisible,
61
+ closeTooltip: closeTooltip,
62
+ openTooltip: openTooltip,
63
+ }); }, [isTooltipVisible, openTooltip, closeTooltip]);
64
+ /* STYLES */
55
65
  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
56
66
  prefix: 'align_',
57
67
  propsKey: 'alignDirection',
@@ -98,10 +108,11 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
98
108
  });
99
109
  // @ts-expect-error
100
110
  var tooltipStyles = useStyles.useStyles(props).styles;
101
- var appearanceConfig = appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance];
111
+ // prettier-ignore
112
+ var appearanceConfig = (appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance]);
102
113
  return (jsxRuntime.jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass ||
103
114
  ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
104
- "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxRuntime.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntime.jsx(Title.Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
115
+ "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), style: tooltipStyles, ref: tooltipElementRef, onAnimationEnd: onAnimationEnd, children: [before, jsxRuntime.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntime.jsx(Title.Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
105
116
  });
106
117
 
107
118
  exports.Tooltip = Tooltip;
@@ -8,7 +8,7 @@ var castArray = require('lodash/castArray');
8
8
  var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
9
9
  var useStyles = require('../hooks/useStyles.js');
10
10
  var Divider = require('../../Divider-BjB5MD6u.js');
11
- var Icon = require('../../Icon-DTwrijaa.js');
11
+ var Icon = require('../../Icon-B1V8M_j9.js');
12
12
  var Text = require('../../Text-_YhyTsQ1.js');
13
13
  require('lodash/camelCase');
14
14
  require('../context/UIContext.js');
@@ -20,7 +20,7 @@ require('lodash/upperFirst');
20
20
  require('../hooks/styleAttributes.js');
21
21
  require('react-inlinesvg');
22
22
  require('../../Link-CqWzwh8V.js');
23
- require('../../Tooltip-BygRHezt.js');
23
+ require('../../Tooltip-xGmgUzGr.js');
24
24
  require('../../Title-zwP6c2U2.js');
25
25
 
26
26
  var ChevronDown16 = function ChevronDown16(props) {
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
7
- var Icon = require('../../Icon-DTwrijaa.js');
7
+ var Icon = require('../../Icon-B1V8M_j9.js');
8
8
  var Image = require('../../Image-DrUlRMHa.js');
9
9
  var Text = require('../../Text-_YhyTsQ1.js');
10
10
  require('lodash/castArray');
@@ -20,7 +20,7 @@ require('lodash/upperFirst');
20
20
  require('../hooks/styleAttributes.js');
21
21
  require('../../Link-CqWzwh8V.js');
22
22
  require('../../tslib.es6-CCZ3TN_7.js');
23
- require('../../Tooltip-BygRHezt.js');
23
+ require('../../Tooltip-xGmgUzGr.js');
24
24
  require('../../Title-zwP6c2U2.js');
25
25
 
26
26
  function Avatar(props) {
@@ -7,7 +7,7 @@ var clsx = require('clsx');
7
7
  var camelCase = require('lodash/camelCase');
8
8
  var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
9
9
  var useStyles = require('../hooks/useStyles.js');
10
- var Icon = require('../../Icon-DTwrijaa.js');
10
+ var Icon = require('../../Icon-B1V8M_j9.js');
11
11
  var Link = require('../../Link-CqWzwh8V.js');
12
12
  var Text = require('../../Text-_YhyTsQ1.js');
13
13
  require('lodash/castArray');
@@ -19,7 +19,7 @@ require('lodash/maxBy');
19
19
  require('lodash/upperFirst');
20
20
  require('../hooks/styleAttributes.js');
21
21
  require('react-inlinesvg');
22
- require('../../Tooltip-BygRHezt.js');
22
+ require('../../Tooltip-xGmgUzGr.js');
23
23
  require('../../Title-zwP6c2U2.js');
24
24
 
25
25
  function BreadcrumbsItem(props) {
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Button = require('../../Button-CDc_-QmL.js');
3
+ var Button = require('../../Button-Bf9kDDqK.js');
4
4
  require('react/jsx-runtime');
5
5
  require('react');
6
6
  require('clsx');
@@ -15,11 +15,11 @@ require('../hooks/useStyles.js');
15
15
  require('lodash/maxBy');
16
16
  require('lodash/upperFirst');
17
17
  require('../hooks/styleAttributes.js');
18
- require('../../Icon-DTwrijaa.js');
18
+ require('../../Icon-B1V8M_j9.js');
19
19
  require('react-inlinesvg');
20
20
  require('../../Link-CqWzwh8V.js');
21
21
  require('../../tslib.es6-CCZ3TN_7.js');
22
- require('../../Tooltip-BygRHezt.js');
22
+ require('../../Tooltip-xGmgUzGr.js');
23
23
  require('../../Text-_YhyTsQ1.js');
24
24
  require('../../Title-zwP6c2U2.js');
25
25
  require('../../Loader-fA11tUEJ.js');
@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var clsx = require('clsx');
5
5
  var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
6
6
  var useStyles = require('../hooks/useStyles.js');
7
- var Icon = require('../../Icon-DTwrijaa.js');
8
- var Label = require('../../Label-BT_PpHjb.js');
7
+ var Icon = require('../../Icon-B1V8M_j9.js');
8
+ var Label = require('../../Label-B0O9q0E4.js');
9
9
  var Text = require('../../Text-_YhyTsQ1.js');
10
10
  require('react');
11
11
  require('lodash/castArray');
@@ -20,7 +20,7 @@ require('../hooks/styleAttributes.js');
20
20
  require('react-inlinesvg');
21
21
  require('../../Link-CqWzwh8V.js');
22
22
  require('../../tslib.es6-CCZ3TN_7.js');
23
- require('../../Tooltip-BygRHezt.js');
23
+ require('../../Tooltip-xGmgUzGr.js');
24
24
  require('../../Title-zwP6c2U2.js');
25
25
 
26
26
  function Cell(props) {
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
7
- var Icon = require('../../Icon-DTwrijaa.js');
7
+ var Icon = require('../../Icon-B1V8M_j9.js');
8
8
  var Loader = require('../../Loader-fA11tUEJ.js');
9
9
  var Text = require('../../Text-_YhyTsQ1.js');
10
10
  require('lodash/castArray');
@@ -20,7 +20,7 @@ require('lodash/upperFirst');
20
20
  require('../hooks/styleAttributes.js');
21
21
  require('../../Link-CqWzwh8V.js');
22
22
  require('../../tslib.es6-CCZ3TN_7.js');
23
- require('../../Tooltip-BygRHezt.js');
23
+ require('../../Tooltip-xGmgUzGr.js');
24
24
  require('../../Title-zwP6c2U2.js');
25
25
 
26
26
  var choiceConfig = {
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var clsx = require('clsx');
5
5
  var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
6
6
  var Divider = require('../../Divider-BjB5MD6u.js');
7
- var Icon = require('../../Icon-DTwrijaa.js');
7
+ var Icon = require('../../Icon-B1V8M_j9.js');
8
8
  var Text = require('../../Text-_YhyTsQ1.js');
9
9
  require('react');
10
10
  require('lodash/castArray');
@@ -20,7 +20,7 @@ require('../hooks/styleAttributes.js');
20
20
  require('react-inlinesvg');
21
21
  require('../../Link-CqWzwh8V.js');
22
22
  require('../../tslib.es6-CCZ3TN_7.js');
23
- require('../../Tooltip-BygRHezt.js');
23
+ require('../../Tooltip-xGmgUzGr.js');
24
24
  require('../../Title-zwP6c2U2.js');
25
25
 
26
26
  function ContextMenu(props) {
@@ -5,7 +5,7 @@ var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var Cookies = require('js-cookie');
7
7
  var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
8
- var Button = require('../../Button-CDc_-QmL.js');
8
+ var Button = require('../../Button-Bf9kDDqK.js');
9
9
  var Group = require('../../Group-B2oTJg0t.js');
10
10
  var Text = require('../../Text-_YhyTsQ1.js');
11
11
  require('lodash/castArray');
@@ -18,11 +18,11 @@ require('../hooks/useStyles.js');
18
18
  require('lodash/maxBy');
19
19
  require('lodash/upperFirst');
20
20
  require('../hooks/styleAttributes.js');
21
- require('../../Icon-DTwrijaa.js');
21
+ require('../../Icon-B1V8M_j9.js');
22
22
  require('react-inlinesvg');
23
23
  require('../../Link-CqWzwh8V.js');
24
24
  require('../../tslib.es6-CCZ3TN_7.js');
25
- require('../../Tooltip-BygRHezt.js');
25
+ require('../../Tooltip-xGmgUzGr.js');
26
26
  require('../../Title-zwP6c2U2.js');
27
27
  require('../../Loader-fA11tUEJ.js');
28
28
 
@@ -7,10 +7,10 @@ var clsx = require('clsx');
7
7
  var DatePicker = require('react-datepicker');
8
8
  var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
9
9
  var useStyles = require('../hooks/useStyles.js');
10
- var Button = require('../../Button-CDc_-QmL.js');
11
- var Icon = require('../../Icon-DTwrijaa.js');
10
+ var Button = require('../../Button-Bf9kDDqK.js');
11
+ var Icon = require('../../Icon-B1V8M_j9.js');
12
12
  var Input = require('../../Input-BSpFMsrf.js');
13
- var Label = require('../../Label-BT_PpHjb.js');
13
+ var Label = require('../../Label-B0O9q0E4.js');
14
14
  var Text = require('../../Text-_YhyTsQ1.js');
15
15
  require('lodash/castArray');
16
16
  require('lodash/camelCase');
@@ -24,7 +24,7 @@ require('../hooks/styleAttributes.js');
24
24
  require('../../Link-CqWzwh8V.js');
25
25
  require('../../Loader-fA11tUEJ.js');
26
26
  require('react-inlinesvg');
27
- require('../../Tooltip-BygRHezt.js');
27
+ require('../../Tooltip-xGmgUzGr.js');
28
28
  require('../../Title-zwP6c2U2.js');
29
29
 
30
30
  function buildFormatLongFn(args) {
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Icon = require('../../Icon-DTwrijaa.js');
3
+ var Icon = require('../../Icon-B1V8M_j9.js');
4
4
  require('react/jsx-runtime');
5
5
  require('react');
6
6
  require('clsx');
@@ -18,7 +18,7 @@ require('lodash/upperFirst');
18
18
  require('../hooks/styleAttributes.js');
19
19
  require('../../Link-CqWzwh8V.js');
20
20
  require('../../tslib.es6-CCZ3TN_7.js');
21
- require('../../Tooltip-BygRHezt.js');
21
+ require('../../Tooltip-xGmgUzGr.js');
22
22
  require('../../Text-_YhyTsQ1.js');
23
23
  require('../../Title-zwP6c2U2.js');
24
24
 
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
7
- var Icon = require('../../Icon-DTwrijaa.js');
7
+ var Icon = require('../../Icon-B1V8M_j9.js');
8
8
  require('lodash/castArray');
9
9
  require('lodash/camelCase');
10
10
  require('../context/UIContext.js');
@@ -18,7 +18,7 @@ require('lodash/upperFirst');
18
18
  require('../hooks/styleAttributes.js');
19
19
  require('../../Link-CqWzwh8V.js');
20
20
  require('../../tslib.es6-CCZ3TN_7.js');
21
- require('../../Tooltip-BygRHezt.js');
21
+ require('../../Tooltip-xGmgUzGr.js');
22
22
  require('../../Text-_YhyTsQ1.js');
23
23
  require('../../Title-zwP6c2U2.js');
24
24
 
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Label = require('../../Label-BT_PpHjb.js');
3
+ var Label = require('../../Label-B0O9q0E4.js');
4
4
  require('react/jsx-runtime');
5
5
  require('react');
6
6
  require('clsx');
@@ -16,7 +16,7 @@ require('lodash/maxBy');
16
16
  require('lodash/upperFirst');
17
17
  require('../hooks/styleAttributes.js');
18
18
  require('../../Text-_YhyTsQ1.js');
19
- require('../../Tooltip-BygRHezt.js');
19
+ require('../../Tooltip-xGmgUzGr.js');
20
20
  require('../../Title-zwP6c2U2.js');
21
21
 
22
22
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var clsx = require('clsx');
5
- var Icon = require('../../Icon-DTwrijaa.js');
5
+ var Icon = require('../../Icon-B1V8M_j9.js');
6
6
  require('react');
7
7
  require('react-inlinesvg');
8
8
  require('../hooks/useDeviceTargetClass.js');
@@ -18,7 +18,7 @@ require('lodash/upperFirst');
18
18
  require('../hooks/styleAttributes.js');
19
19
  require('../../Link-CqWzwh8V.js');
20
20
  require('../../tslib.es6-CCZ3TN_7.js');
21
- require('../../Tooltip-BygRHezt.js');
21
+ require('../../Tooltip-xGmgUzGr.js');
22
22
  require('../../Text-_YhyTsQ1.js');
23
23
  require('../../Title-zwP6c2U2.js');
24
24