@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.
- package/dist/{Button-CxJYh-_G.js → Button-AKN9f9n0.js} +1 -1
- package/dist/{Button-CDc_-QmL.js → Button-Bf9kDDqK.js} +1 -1
- package/dist/{Icon-DTwrijaa.js → Icon-B1V8M_j9.js} +6 -5
- package/dist/{Icon-DfVed6hR.js → Icon-Du1Nyea-.js} +7 -6
- package/dist/{Label-BT_PpHjb.js → Label-B0O9q0E4.js} +1 -1
- package/dist/{Label-B7HJUf4x.js → Label-D8DRdqad.js} +1 -1
- package/dist/{Tooltip-CK7SVawj.js → Tooltip-aaDRYNWY.js} +21 -10
- package/dist/{Tooltip-BygRHezt.js → Tooltip-xGmgUzGr.js} +21 -10
- package/dist/cjs/components/Accordion.js +2 -2
- package/dist/cjs/components/Avatar.js +2 -2
- package/dist/cjs/components/Breadcrumbs.js +2 -2
- package/dist/cjs/components/Button.js +3 -3
- package/dist/cjs/components/Cell.js +3 -3
- package/dist/cjs/components/Choice.js +2 -2
- package/dist/cjs/components/ContextMenu.js +2 -2
- package/dist/cjs/components/CookiesWarning.js +3 -3
- package/dist/cjs/components/DatePicker.js +4 -4
- package/dist/cjs/components/Icon.js +2 -2
- package/dist/cjs/components/InputPassword.js +2 -2
- package/dist/cjs/components/Label.js +2 -2
- package/dist/cjs/components/LanguageSelector.js +2 -2
- package/dist/cjs/components/Pagination.js +46 -13
- package/dist/cjs/components/Response.js +3 -3
- package/dist/cjs/components/Search.js +2 -2
- package/dist/cjs/components/Select.js +2 -2
- package/dist/cjs/components/SiteMenu.js +2 -2
- package/dist/cjs/components/Tooltip.js +1 -1
- package/dist/components/Accordion.js +2 -2
- package/dist/components/Avatar.js +2 -2
- package/dist/components/Breadcrumbs.js +2 -2
- package/dist/components/Button.js +3 -3
- package/dist/components/Cell.js +3 -3
- package/dist/components/Choice.js +2 -2
- package/dist/components/ContextMenu.js +2 -2
- package/dist/components/CookiesWarning.js +3 -3
- package/dist/components/DatePicker.js +4 -4
- package/dist/components/Icon.js +2 -2
- package/dist/components/InputPassword.js +2 -2
- package/dist/components/Label.js +2 -2
- package/dist/components/LanguageSelector.js +2 -2
- package/dist/components/Pagination.js +46 -14
- package/dist/components/Response.js +3 -3
- package/dist/components/Search.js +2 -2
- package/dist/components/Select.js +2 -2
- package/dist/components/SiteMenu.js +2 -2
- package/dist/components/Tooltip.js +1 -1
- package/dist/css/components/DatePicker/DatePicker.css +1 -1
- package/dist/css/components/Icon/Icon.css +1 -0
- package/dist/css/mixins/mixin_utils.css +18 -11
- package/dist/css/styles/mediaqueries.css +1 -1
- package/dist/css/tokens/typography.css +3 -0
- package/dist/types/components/Icon/Icon.d.ts +3 -3
- package/dist/types/components/Icon/Icon.interface.d.ts +15 -14
- package/dist/types/components/Pagination/Pagination.d.ts +3 -2
- package/dist/types/components/Pagination/Pagination.interface.d.ts +30 -13
- package/dist/types/components/Pagination/index.d.ts +1 -1
- package/dist/types/components/Tooltip/Tooltip.d.ts +1 -1
- 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-
|
|
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-
|
|
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-
|
|
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
|
-
|
|
20
|
-
|
|
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
|
-
|
|
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.
|
|
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, {
|
|
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-
|
|
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
|
-
|
|
18
|
-
|
|
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
|
-
|
|
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 (
|
|
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-
|
|
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-
|
|
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
|
-
|
|
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
|
-
},
|
|
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
|
-
},
|
|
47
|
-
}, []);
|
|
49
|
+
}, closeTimeoutDelay);
|
|
50
|
+
}, [closeTimeoutDelay]);
|
|
48
51
|
var onAnimationEnd = useCallback(function () {
|
|
49
52
|
isTooltipCloseAnimationInProgressRef.current = false;
|
|
50
53
|
}, []);
|
|
51
|
-
|
|
52
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
},
|
|
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
|
-
},
|
|
49
|
-
}, []);
|
|
51
|
+
}, closeTimeoutDelay);
|
|
52
|
+
}, [closeTimeoutDelay]);
|
|
50
53
|
var onAnimationEnd = React.useCallback(function () {
|
|
51
54
|
isTooltipCloseAnimationInProgressRef.current = false;
|
|
52
55
|
}, []);
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
8
|
-
var Label = require('../../Label-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
11
|
-
var Icon = require('../../Icon-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
21
|
+
require('../../Tooltip-xGmgUzGr.js');
|
|
22
22
|
require('../../Text-_YhyTsQ1.js');
|
|
23
23
|
require('../../Title-zwP6c2U2.js');
|
|
24
24
|
|