oolib 2.31.7 → 2.33.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.
- package/dist/components/BlockLabel/index.js +7 -2
- package/dist/components/Tooltip/index.js +18 -5
- package/dist/components/Tooltip/styled.d.ts +1 -0
- package/dist/components/Tooltip/styled.js +10 -6
- package/dist/components/Tooltip/util/index.js +9 -7
- package/dist/icons/custom/index.js +4 -4
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.js +1 -0
- package/package.json +1 -1
|
@@ -11,9 +11,11 @@ var index_styled_1 = require("./index.styled");
|
|
|
11
11
|
var colors_1 = require("../../themes/colors");
|
|
12
12
|
var toArray_1 = require("../../utils/toArray");
|
|
13
13
|
var Hints_1 = __importDefault(require("../Hints"));
|
|
14
|
+
var Tooltip_1 = require("../Tooltip");
|
|
15
|
+
var phosphor_react_1 = require("phosphor-react");
|
|
14
16
|
var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
|
|
15
17
|
var BlockLabel = function (props) {
|
|
16
|
-
var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, _a = props.hintsTitle, hintsTitle = _a === void 0 ? "Hints" : _a, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel;
|
|
18
|
+
var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, _a = props.hintsTitle, hintsTitle = _a === void 0 ? "Hints" : _a, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip;
|
|
17
19
|
var shouldCompRender = label ||
|
|
18
20
|
(!readOnly &&
|
|
19
21
|
(sublabel ||
|
|
@@ -32,7 +34,10 @@ var BlockLabel = function (props) {
|
|
|
32
34
|
(label || inputOnlyLabel) && (react_1.default.createElement(Typo_1.SANS_3, { invert: invert, semibold: true, capitalize: true }, label || inputOnlyLabel)),
|
|
33
35
|
!readOnly && hints ? (react_1.default.createElement(Hints_1.default, { id: id, title: hintsTitle, subtitle: hintsSubtitle, hints: hints })) : null,
|
|
34
36
|
optional && !hideOptionalLabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)")),
|
|
35
|
-
!readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null
|
|
37
|
+
!readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null,
|
|
38
|
+
infoTooltip &&
|
|
39
|
+
react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || 'right' },
|
|
40
|
+
react_1.default.createElement(phosphor_react_1.Info, { size: 18 }))),
|
|
36
41
|
!readOnly &&
|
|
37
42
|
sublabel &&
|
|
38
43
|
(0, toArray_1.toArray)(sublabel).map(function (subL) { return (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, subL)); }))));
|
|
@@ -29,12 +29,25 @@ var Typo_1 = require("../Typo");
|
|
|
29
29
|
var styled_1 = require("./styled");
|
|
30
30
|
var Tooltip = function (_a) {
|
|
31
31
|
var text = _a.text, _b = _a.position, position = _b === void 0 ? 'top' : _b, style = _a.style, children = _a.children;
|
|
32
|
-
var _c = (0, react_1.useState)(false),
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
var _c = (0, react_1.useState)(false), isHovered = _c[0], setIsHovered = _c[1];
|
|
33
|
+
var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
|
|
34
|
+
var targetRef = (0, react_1.useRef)(null);
|
|
35
|
+
var handleClick = function (e) {
|
|
36
|
+
e.preventDefault();
|
|
37
|
+
if (targetRef.current) {
|
|
38
|
+
targetRef.current.blur();
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
console.log('tab', isFocused);
|
|
42
|
+
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),
|
|
44
|
+
isHovered && (react_1.default.createElement(styled_1.StyledTooltip, { position: position, show: isHovered, style: style },
|
|
36
45
|
react_1.default.createElement(Typo_1.SANS_2, null, text),
|
|
37
46
|
react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
|
|
38
|
-
react_1.default.createElement(styled_1.StyledArrow, { position: position }))))
|
|
47
|
+
react_1.default.createElement(styled_1.StyledArrow, { position: position })))),
|
|
48
|
+
isFocused && (react_1.default.createElement(styled_1.StyledTooltip, { position: position, show: isFocused, style: style },
|
|
49
|
+
react_1.default.createElement(Typo_1.SANS_2, null, text),
|
|
50
|
+
react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
|
|
51
|
+
react_1.default.createElement(styled_1.StyledArrow, { position: position }))))));
|
|
39
52
|
};
|
|
40
53
|
exports.Tooltip = Tooltip;
|
|
@@ -27,12 +27,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.StyledArrow = exports.StyledArrowOutline = exports.StyledTooltip = exports.StyledWrapper = void 0;
|
|
30
|
+
exports.StyledArrow = exports.StyledArrowOutline = exports.StyledTooltipTarget = exports.StyledTooltip = exports.StyledWrapper = void 0;
|
|
31
31
|
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.button(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"], ["\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"])));
|
|
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,25 +40,29 @@ 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
|
|
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: 20rem;\n max-width: 20rem;\n word-wrap:break-word\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: 20rem;\n max-width: 20rem;\n word-wrap:break-word\n"])), function (_a) {
|
|
44
44
|
var show = _a.show;
|
|
45
45
|
return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["opacity:1; z-index: 5;"], ["opacity:1; z-index: 5;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["opacity:0; z-index: -5;"], ["opacity:0; 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.
|
|
50
|
+
exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-color : red ;\n border-style : solid ;\n border-width : 0;\n background: inherit;\n font-size: inherit;\n color: inherit;\n cursor: inherit;\n display: flex;\n outline: none;\n ", ";\n"], ["\n border-color : red ;\n border-style : solid ;\n border-width : 0;\n background: inherit;\n font-size: inherit;\n color: inherit;\n cursor: inherit;\n display: flex;\n outline: none;\n ", ";\n"])), function (_a) {
|
|
51
|
+
var isFocused = _a.isFocused;
|
|
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) {
|
|
51
55
|
var position = _a.position;
|
|
52
56
|
return clipPaths[position];
|
|
53
57
|
}, function (_a) {
|
|
54
58
|
var position = _a.position;
|
|
55
59
|
return (0, util_1.positionArrowBorder)(position);
|
|
56
60
|
});
|
|
57
|
-
exports.StyledArrow = styled_components_1.default.span(
|
|
61
|
+
exports.StyledArrow = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __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) {
|
|
58
62
|
var position = _a.position;
|
|
59
63
|
return clipPaths[position];
|
|
60
64
|
}, function (_a) {
|
|
61
65
|
var position = _a.position;
|
|
62
66
|
return (0, util_1.positionArrow)(position);
|
|
63
67
|
});
|
|
64
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
68
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -9,11 +9,13 @@ var styled_components_1 = require("styled-components");
|
|
|
9
9
|
var positionTooltip = function (position) {
|
|
10
10
|
switch (position) {
|
|
11
11
|
case 'top':
|
|
12
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n bottom: calc(100% + 8.5px);\n left: 50%;\n transform: translateX(-50%);\n "], ["\n bottom: calc(100% + 8.5px);\n left: 50%;\n transform: translateX(-50%);\n "])));
|
|
12
13
|
case 'bottom':
|
|
13
|
-
return (0, styled_components_1.css)(
|
|
14
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n top: calc(100% + 8.5px);\n left: 50%;\n transform: translateX(-50%);\n "], ["\n top: calc(100% + 8.5px);\n left: 50%;\n transform: translateX(-50%);\n "])));
|
|
14
15
|
case 'left':
|
|
16
|
+
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n right: calc(100% + 8.5px);\n top: 50%;\n transform: translateY(-50%);\n "], ["\n right: calc(100% + 8.5px);\n top: 50%;\n transform: translateY(-50%);\n "])));
|
|
15
17
|
case 'right':
|
|
16
|
-
return (0, styled_components_1.css)(
|
|
18
|
+
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n left: calc(100% + 8.5px);\n top: 50%;\n transform: translateY(-50%);\n "], ["\n left: calc(100% + 8.5px);\n top: 50%;\n transform: translateY(-50%);\n "])));
|
|
17
19
|
}
|
|
18
20
|
};
|
|
19
21
|
exports.positionTooltip = positionTooltip;
|
|
@@ -21,10 +23,10 @@ var positionArrowBorder = function (position) {
|
|
|
21
23
|
switch (position) {
|
|
22
24
|
case 'top':
|
|
23
25
|
case 'bottom':
|
|
24
|
-
return (0, styled_components_1.css)(
|
|
26
|
+
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n left: 50%;\n transform: translateX(-5px); // 13/2 - 1.5 of the arrow itself \n "], ["\n ", ";\n left: 50%;\n transform: translateX(-5px); // 13/2 - 1.5 of the arrow itself \n "])), position + ': 100%');
|
|
25
27
|
case 'left':
|
|
26
28
|
case 'right':
|
|
27
|
-
return (0, styled_components_1.css)(
|
|
29
|
+
return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n top: 50%;\n transform: translateY(-5px); // 13/2\n "], ["\n ", ";\n top: 50%;\n transform: translateY(-5px); // 13/2\n "])), position + ': 100%');
|
|
28
30
|
}
|
|
29
31
|
};
|
|
30
32
|
exports.positionArrowBorder = positionArrowBorder;
|
|
@@ -32,11 +34,11 @@ var positionArrow = function (position) {
|
|
|
32
34
|
switch (position) {
|
|
33
35
|
case 'top':
|
|
34
36
|
case 'bottom':
|
|
35
|
-
return (0, styled_components_1.css)(
|
|
37
|
+
return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n left: 8%;\n "], ["\n ", ";\n left: 8%;\n "])), position + ': -2%');
|
|
36
38
|
case 'left':
|
|
37
39
|
case 'right':
|
|
38
|
-
return (0, styled_components_1.css)(
|
|
40
|
+
return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", ";\n top: 8%;\n "], ["\n ", ";\n top: 8%;\n "])), position + ': -2%');
|
|
39
41
|
}
|
|
40
42
|
};
|
|
41
43
|
exports.positionArrow = positionArrow;
|
|
42
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
44
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -21,10 +21,10 @@ var comps_1 = require("../../utils/comps");
|
|
|
21
21
|
var yellow = themes_1.colors.yellow, greyColor100 = themes_1.colors.greyColor100;
|
|
22
22
|
var IndexIcon = function (_a) {
|
|
23
23
|
var _b = _a.color, color = _b === void 0 ? greyColor100 : _b, _c = _a.size, size = _c === void 0 ? 24 : _c;
|
|
24
|
-
return (react_1.default.createElement("svg", { width:
|
|
25
|
-
react_1.default.createElement("path", { d: "
|
|
26
|
-
react_1.default.createElement("path", { d: "
|
|
27
|
-
react_1.default.createElement("path", { d: "
|
|
24
|
+
return (react_1.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
25
|
+
react_1.default.createElement("path", { d: "M2.34375 7.5H12.6562", stroke: "#383838", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
|
|
26
|
+
react_1.default.createElement("path", { d: "M2.34375 3.75H12.6562", stroke: "#383838", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
|
|
27
|
+
react_1.default.createElement("path", { d: "M2.34375 11.25H8.90625", stroke: "#383838", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
|
|
28
28
|
};
|
|
29
29
|
exports.IndexIcon = IndexIcon;
|
|
30
30
|
var LanguageIcon = function (_a) {
|
package/dist/icons/index.d.ts
CHANGED
|
@@ -85,6 +85,7 @@ export namespace icons {
|
|
|
85
85
|
export { FolderSimpleStar };
|
|
86
86
|
export { LinkSimple };
|
|
87
87
|
export { Laptop };
|
|
88
|
+
export { Info };
|
|
88
89
|
export { OkeGoogleIcon };
|
|
89
90
|
export { LetterH };
|
|
90
91
|
export { IndexIcon };
|
|
@@ -184,6 +185,7 @@ import { FolderSimple } from "phosphor-react";
|
|
|
184
185
|
import { FolderSimpleStar } from "phosphor-react";
|
|
185
186
|
import { LinkSimple } from "phosphor-react";
|
|
186
187
|
import { Laptop } from "phosphor-react";
|
|
188
|
+
import { Info } from "phosphor-react";
|
|
187
189
|
import { OkeGoogleIcon } from "./custom";
|
|
188
190
|
import { LetterH } from "./custom";
|
|
189
191
|
import { IndexIcon } from "./custom";
|
package/dist/icons/index.js
CHANGED
|
@@ -90,6 +90,7 @@ exports.icons = {
|
|
|
90
90
|
FolderSimpleStar: phosphor_react_1.FolderSimpleStar,
|
|
91
91
|
LinkSimple: phosphor_react_1.LinkSimple,
|
|
92
92
|
Laptop: phosphor_react_1.Laptop,
|
|
93
|
+
Info: phosphor_react_1.Info,
|
|
93
94
|
//custom
|
|
94
95
|
OkeGoogleIcon: custom_1.OkeGoogleIcon,
|
|
95
96
|
LetterH: custom_1.LetterH,
|