oolib 2.34.0 → 2.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -42,7 +42,7 @@ var SIZES = {
|
|
|
42
42
|
};
|
|
43
43
|
var commonStyle = function (_a) {
|
|
44
44
|
var size = _a.size;
|
|
45
|
-
return "\n padding: ".concat(size === "XS" ? "0 .5rem" : "0 1rem", ";\n position: relative;\n display: inline-flex;\n column-gap: 1rem;\n align-items: "
|
|
45
|
+
return "\n padding: ".concat(size === "XS" ? "0 .5rem" : "0 1rem", ";\n position: relative;\n display: inline-flex;\n column-gap: 1rem;\n align-items: \"center\";\n border-radius:0.2rem;\n white-space: nowrap;\n\theight: ").concat(SIZES[size], ";\n max-width: 100%;\n");
|
|
46
46
|
};
|
|
47
47
|
var blueHover = function (_a) {
|
|
48
48
|
var invert = _a.invert, colors = _a.colors;
|
|
@@ -38,9 +38,8 @@ var Tooltip = function (_a) {
|
|
|
38
38
|
targetRef.current.blur();
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
|
-
console.log('tab', isFocused);
|
|
42
41
|
return (react_1.default.createElement(styled_1.StyledWrapper, null,
|
|
43
|
-
react_1.default.createElement(styled_1.StyledTooltipTarget, { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, onClick: handleClick, ref: targetRef, isFocused: isFocused }, children),
|
|
42
|
+
react_1.default.createElement(styled_1.StyledTooltipTarget, { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, onClick: handleClick, ref: targetRef, isFocused: isFocused, tabIndex: 0 }, children),
|
|
44
43
|
isHovered && (react_1.default.createElement(styled_1.StyledTooltip, { position: position, show: isHovered, style: style },
|
|
45
44
|
react_1.default.createElement(Typo_1.SANS_2, null, text),
|
|
46
45
|
react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
|
|
@@ -32,7 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
32
32
|
var themes_1 = require("../../themes");
|
|
33
33
|
var mixins_1 = require("../../themes/mixins");
|
|
34
34
|
var util_1 = require("./util");
|
|
35
|
-
exports.StyledWrapper = styled_components_1.default.
|
|
35
|
+
exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative; // made this wrapper with styled.component to ensure its\n width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n text-align: center;\n cursor: pointer;\n"], ["\n position: relative; // made this wrapper with styled.component to ensure its\n width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n text-align: center;\n cursor: pointer;\n"])));
|
|
36
36
|
var greyColor15 = themes_1.colors.greyColor15, white = themes_1.colors.white;
|
|
37
37
|
var clipPaths = {
|
|
38
38
|
top: "0% 0%, 47% 65.4%, 52% 65.4%, 100% 0",
|
|
@@ -40,29 +40,26 @@ var clipPaths = {
|
|
|
40
40
|
right: '100% 0%, 50% 47%, 50% 52%, 100% 100%',
|
|
41
41
|
left: '0% 0%, 50% 47%, 50% 52%, 0% 100%',
|
|
42
42
|
};
|
|
43
|
-
exports.StyledTooltip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n ", "\n\n padding: 0.4rem 1rem;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 2px;\n position: absolute;\n ", "\n width:
|
|
43
|
+
exports.StyledTooltip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n ", ";\n ", "\n\n padding: 0.4rem 1rem;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 2px;\n position: absolute;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap:break-word\n"], ["\n\n ", ";\n ", "\n\n padding: 0.4rem 1rem;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 2px;\n position: absolute;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap:break-word\n"])), function (_a) {
|
|
44
44
|
var show = _a.show;
|
|
45
|
-
return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["
|
|
45
|
+
return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["display:'visible'; z-index: 5000;"], ["display:'visible'; z-index: 5000;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["display:'none'; z-index: -5;"], ["display:'none'; z-index: -5;"])));
|
|
46
46
|
}, (0, mixins_1.transition)('opacity 0.1s'), white, greyColor15, function (_a) {
|
|
47
47
|
var position = _a.position;
|
|
48
48
|
return (0, util_1.positionTooltip)(position);
|
|
49
49
|
});
|
|
50
|
-
exports.StyledTooltipTarget = styled_components_1.default.button(
|
|
51
|
-
|
|
52
|
-
return !isFocused && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n outline: none;\n "], ["\n outline: none;\n "])));
|
|
53
|
-
});
|
|
54
|
-
exports.StyledArrowOutline = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n width: 1rem;\n height: 1rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "\n"], ["\n background-color: ", ";\n width: 1rem;\n height: 1rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "\n"])), greyColor15, function (_a) {
|
|
50
|
+
exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: none;\n background: inherit;\n font-size: inherit;\n color: inherit;\n cursor: inherit;\n display: flex;\n outline : ", ";\n border-radius: 2px;\n"], ["\n border: none;\n background: inherit;\n font-size: inherit;\n color: inherit;\n cursor: inherit;\n display: flex;\n outline : ", ";\n border-radius: 2px;\n"])), function (props) { return props.isFocused ? '2px solid black !important' : 'none'; });
|
|
51
|
+
exports.StyledArrowOutline = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n width: 1rem;\n height: 1rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "\n"], ["\n background-color: ", ";\n width: 1rem;\n height: 1rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "\n"])), greyColor15, function (_a) {
|
|
55
52
|
var position = _a.position;
|
|
56
53
|
return clipPaths[position];
|
|
57
54
|
}, function (_a) {
|
|
58
55
|
var position = _a.position;
|
|
59
56
|
return (0, util_1.positionArrowBorder)(position);
|
|
60
57
|
});
|
|
61
|
-
exports.StyledArrow = styled_components_1.default.span(
|
|
58
|
+
exports.StyledArrow = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject([" // the the white part\n background-color: ", ";\n display:inline-block;\n width: 0.85rem;\n height: 0.85rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "\n"], [" // the the white part\n background-color: ", ";\n display:inline-block;\n width: 0.85rem;\n height: 0.85rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "\n"])), white, function (_a) {
|
|
62
59
|
var position = _a.position;
|
|
63
60
|
return clipPaths[position];
|
|
64
61
|
}, function (_a) {
|
|
65
62
|
var position = _a.position;
|
|
66
63
|
return (0, util_1.positionArrow)(position);
|
|
67
64
|
});
|
|
68
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7
|
|
65
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|