oolib 2.37.0 → 2.38.1
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 +3 -9
- package/dist/components/TabBar/index.js +4 -2
- package/dist/components/TabBar/index.styled.d.ts +1 -0
- package/dist/components/TabBar/index.styled.js +7 -6
- package/dist/components/Tooltip/index.d.ts +2 -1
- package/dist/components/Tooltip/index.js +23 -11
- package/dist/components/Tooltip/styled.d.ts +2 -1
- package/dist/components/Tooltip/styled.js +11 -10
- package/dist/components/Tooltip/util/index.d.ts +1 -1
- package/dist/components/Tooltip/util/index.js +22 -10
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.js +1 -0
- package/dist/utils/customHooks/useScrollBar.js +4 -3
- package/dist/utils/getBlockLabelProps.js +3 -1
- package/dist/utils/usePopOutOfOverflowHiddenParent.js +3 -2
- package/package.json +1 -1
|
@@ -38,7 +38,7 @@ var Tooltip_1 = require("../Tooltip");
|
|
|
38
38
|
var phosphor_react_1 = require("phosphor-react");
|
|
39
39
|
var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
|
|
40
40
|
var BlockLabel = function (props) {
|
|
41
|
-
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
|
|
41
|
+
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;
|
|
42
42
|
var shouldCompRender = label ||
|
|
43
43
|
(!readOnly &&
|
|
44
44
|
(sublabel ||
|
|
@@ -52,19 +52,13 @@ var BlockLabel = function (props) {
|
|
|
52
52
|
var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 //this first condition seems like a proper hack..
|
|
53
53
|
? "danger"
|
|
54
54
|
: errorMsgs[0].type || "danger";
|
|
55
|
-
var _b = (0, react_1.useState)(false), tooltipClicked = _b[0], setTooltipClicked = _b[1];
|
|
56
55
|
return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
|
|
57
|
-
react_1.default.createElement("div", { style: { display: "flex", gap: "1rem"
|
|
56
|
+
react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
|
|
58
57
|
(label || inputOnlyLabel) && (react_1.default.createElement(Typo_1.SANS_3, { invert: invert, semibold: true, capitalize: true }, label || inputOnlyLabel)),
|
|
59
58
|
!readOnly && hints ? (react_1.default.createElement(Hints_1.default, { id: id, title: hintsTitle, subtitle: hintsSubtitle, hints: hints })) : null,
|
|
60
59
|
optional && !hideOptionalLabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)")),
|
|
61
60
|
!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,
|
|
62
|
-
infoTooltip &&
|
|
63
|
-
react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || 'right', invert: invert, debug: debugTooltip },
|
|
64
|
-
react_1.default.createElement(index_styled_1.StyledInfoTooltipbutton, { onClick: function () { return setTooltipClicked(true); }, onBlur: function () { return setTooltipClicked(false); } }, !tooltipClicked ?
|
|
65
|
-
react_1.default.createElement(phosphor_react_1.Info, { size: 18, style: { color: invert && 'white' } })
|
|
66
|
-
:
|
|
67
|
-
react_1.default.createElement(phosphor_react_1.Info, { size: 18, weight: "fill", style: { color: invert && 'white' } })))),
|
|
61
|
+
infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || "right", invert: invert, debug: infoTooltip.debug, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: "infoIcon" }))),
|
|
68
62
|
!readOnly &&
|
|
69
63
|
sublabel &&
|
|
70
64
|
(0, toArray_1.toArray)(sublabel).map(function (subL) { return (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, subL)); }))));
|
|
@@ -30,7 +30,8 @@ var Base = function (_a) {
|
|
|
30
30
|
};
|
|
31
31
|
return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
|
|
32
32
|
react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
|
|
33
|
-
scrollX !== 0 && (react_1.default.createElement(
|
|
33
|
+
scrollX !== 0 && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, null,
|
|
34
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
|
|
34
35
|
react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, ref: scrollContainerRef, onScroll: checkScrollPosition }, options.map(function (op) {
|
|
35
36
|
var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
|
|
36
37
|
var tabIsActive = value && op.value === value.value;
|
|
@@ -38,7 +39,8 @@ var Base = function (_a) {
|
|
|
38
39
|
react_1.default.createElement(index_styled_1.TabBarTabStyled, { size: size, active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); } },
|
|
39
40
|
react_1.default.createElement(index_styled_1.STYLED_SANS_2, { semibold: tabBarStyle === "1" }, op.display))));
|
|
40
41
|
})),
|
|
41
|
-
!scrollIsAtEnd && (react_1.default.createElement(
|
|
42
|
+
!scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, null,
|
|
43
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
|
|
42
44
|
};
|
|
43
45
|
var TabBarStyle1 = function (props) { return react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "1" })); };
|
|
44
46
|
exports.TabBarStyle1 = TabBarStyle1;
|
|
@@ -27,13 +27,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.STYLED_SANS_2 = exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = exports.TabBarStyled = void 0;
|
|
30
|
+
exports.StyledDirectionButtons = exports.STYLED_SANS_2 = exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = exports.TabBarStyled = 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 utilsOolib_1 = require("../../utilsOolib");
|
|
35
35
|
var Typo_1 = require("../Typo");
|
|
36
|
-
var greyColor100 = themes_1.colors.greyColor100, greyColor10 = themes_1.colors.greyColor10, red = themes_1.colors.red, lightRed = themes_1.colors.lightRed, invertRed = themes_1.colors.invertRed, greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, none = themes_1.colors.none;
|
|
36
|
+
var greyColor100 = themes_1.colors.greyColor100, greyColor10 = themes_1.colors.greyColor10, greyColor15 = themes_1.colors.greyColor15, red = themes_1.colors.red, lightRed = themes_1.colors.lightRed, invertRed = themes_1.colors.invertRed, greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, none = themes_1.colors.none;
|
|
37
37
|
var tabBarWrapperStyle1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n :hover {\n background-color: ", ";\n }\n\n ", "\n\n ", "\n"], ["\n ", "\n :hover {\n background-color: ", ";\n }\n\n ", "\n\n ", "\n"])), (0, mixins_1.transition)("background-color"), function (_a) {
|
|
38
38
|
var error = _a.error;
|
|
39
39
|
return error ? invertRed : greyColor10;
|
|
@@ -80,17 +80,18 @@ exports.TabBarStyled = styled_components_1.default.div(templateObject_11 || (tem
|
|
|
80
80
|
});
|
|
81
81
|
exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n /* width: fit-content; // */\n /* width: 600px; */\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n /* width: fit-content; // */\n /* width: 600px; */\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
82
82
|
exports.TabBarRowStyled = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n white-space: nowrap;\n max-width: 100%;\n overflow-x: hidden; \n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n background: transparent; /* make scrollbar transparent */\n -webkit-appearance: none;\n width: 0;\n height: 0;\n }\n"], ["\n display: flex;\n height: 100%;\n white-space: nowrap;\n max-width: 100%;\n overflow-x: hidden; \n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n background: transparent; /* make scrollbar transparent */\n -webkit-appearance: none;\n width: 0;\n height: 0;\n }\n"])));
|
|
83
|
-
exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n display: flex;\n align-items: center;\n /* min-width: 0; //so that ellipsis works on the text within */\n"], ["\n ", "\n display: flex;\n align-items: center;\n /* min-width: 0; //so that ellipsis works on the text within */\n"])), function (_a) {
|
|
83
|
+
exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n display: flex;\n align-items: center;\n /* min-width: 0; //so that ellipsis works on the text within */\n :nth-child(1){\n border-left: 2px solid ", ";\n }\n\n"], ["\n ", "\n display: flex;\n align-items: center;\n /* min-width: 0; //so that ellipsis works on the text within */\n :nth-child(1){\n border-left: 2px solid ", ";\n }\n\n"])), function (_a) {
|
|
84
84
|
var tabBarStyle = _a.tabBarStyle;
|
|
85
85
|
return tabBarStyle === "1"
|
|
86
86
|
? tabBarWrapperStyle1
|
|
87
87
|
: tabBarStyle === "2" && tabBarWrapperStyle2;
|
|
88
|
-
});
|
|
89
|
-
exports.TabBarTabStyled = styled_components_1.default.button(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n padding: 0 2rem;\n height: 100%;\n cursor: pointer;\n color: ", ";\n background-color: ", ";\n border: 0;\n :hover {\n background-color: ", ";\n }\n\n ", "\n"], ["\n padding: 0 2rem;\n height: 100%;\n cursor: pointer;\n color: ", ";\n background-color: ", ";\n border: 0;\n :hover {\n background-color: ", ";\n }\n\n ", "\n"])), greyColor100, none, none, function (_a) {
|
|
88
|
+
}, greyColor15);
|
|
89
|
+
exports.TabBarTabStyled = styled_components_1.default.button(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n padding: 0 2rem;\n height: 100%;\n cursor: pointer;\n color: ", ";\n background-color: ", ";\n border-top: 0;\n border-bottom: 0;\n border-left: 0;\n border-right: 2px solid ", ";\n :hover {\n background-color: ", ";\n }\n\n ", " \n"], ["\n padding: 0 2rem;\n height: 100%;\n cursor: pointer;\n color: ", ";\n background-color: ", ";\n border-top: 0;\n border-bottom: 0;\n border-left: 0;\n border-right: 2px solid ", ";\n :hover {\n background-color: ", ";\n }\n\n ", " \n"])), greyColor100, none, greyColor15, none, function (_a) {
|
|
90
90
|
var tabBarStyle = _a.tabBarStyle;
|
|
91
91
|
return tabBarStyle === "1"
|
|
92
92
|
? tabBarTabStyle1
|
|
93
93
|
: tabBarStyle === "2" && tabBarTabStyle2;
|
|
94
94
|
});
|
|
95
95
|
exports.STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n /* width: max-content; */\n /* white-space: nowrap; */\n /* text-overflow: ellipsis; */\n /* overflow: hidden; */\n"], ["\n /* width: max-content; */\n /* white-space: nowrap; */\n /* text-overflow: ellipsis; */\n /* overflow: hidden; */\n"])));
|
|
96
|
-
|
|
96
|
+
exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n height: 100%;\n border-right: 2px solid ", ";\n border-left: 2px solid ", ";\n"], ["\n height: 100%;\n border-right: 2px solid ", ";\n border-left: 2px solid ", ";\n"])), greyColor15, greyColor15);
|
|
97
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function Tooltip({ text, position, style, children, popOutOfOverflowHiddenParent, invert, debug }: {
|
|
1
|
+
export function Tooltip({ text, position, style, children, popOutOfOverflowHiddenParent, invert, debug, presetTarget, }: {
|
|
2
2
|
text: any;
|
|
3
3
|
position?: string;
|
|
4
4
|
style: any;
|
|
@@ -6,4 +6,5 @@ export function Tooltip({ text, position, style, children, popOutOfOverflowHidde
|
|
|
6
6
|
popOutOfOverflowHiddenParent?: boolean;
|
|
7
7
|
invert?: boolean;
|
|
8
8
|
debug?: boolean;
|
|
9
|
+
presetTarget: any;
|
|
9
10
|
}): any;
|
|
@@ -24,25 +24,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.Tooltip = void 0;
|
|
27
|
+
var phosphor_react_1 = require("phosphor-react");
|
|
27
28
|
var react_1 = __importStar(require("react"));
|
|
29
|
+
var themes_1 = require("../../themes");
|
|
28
30
|
var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflowHiddenParent");
|
|
29
31
|
var Typo_1 = require("../Typo");
|
|
30
32
|
var styled_1 = require("./styled");
|
|
31
33
|
var Tooltip = function (_a) {
|
|
32
|
-
var text = _a.text, _b = _a.position, position = _b === void 0 ?
|
|
34
|
+
var text = _a.text, _b = _a.position, position = _b === void 0 ? "top" : _b, style = _a.style, children = _a.children, _c = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _c === void 0 ? false : _c, _d = _a.invert, invert = _d === void 0 ? false : _d, _e = _a.debug, debug = _e === void 0 ? false : _e, presetTarget = _a.presetTarget;
|
|
33
35
|
var _f = (0, react_1.useState)(debug ? true : false), isClicked = _f[0], setIsClicked = _f[1];
|
|
34
36
|
var _g = (0, react_1.useState)(debug ? true : false), showTooltip = _g[0], setShowTooltip = _g[1];
|
|
35
37
|
var targetRef = (0, react_1.useRef)(null);
|
|
36
|
-
var _h = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), trackerRef = _h.trackerRef, applyFixedPos = _h.applyFixedPos, removeFixedPos = _h.removeFixedPos;
|
|
38
|
+
var _h = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), trackerRef = _h.trackerRef, applyFixedPos = _h.applyFixedPos, removeFixedPos = _h.removeFixedPos, fixPos = _h.fixPos;
|
|
37
39
|
(0, react_1.useEffect)(function () {
|
|
38
|
-
if (
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
if (popOutOfOverflowHiddenParent) {
|
|
41
|
+
if (showTooltip) {
|
|
42
|
+
applyFixedPos();
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
removeFixedPos();
|
|
46
|
+
}
|
|
43
47
|
}
|
|
44
48
|
}, [showTooltip]);
|
|
45
|
-
|
|
49
|
+
(0, react_1.useEffect)(function () {
|
|
50
|
+
setShowTooltip(debug);
|
|
51
|
+
}, [debug]);
|
|
52
|
+
return (react_1.default.createElement(styled_1.StyledWrapper, { ref: trackerRef },
|
|
46
53
|
react_1.default.createElement(styled_1.StyledTooltipTarget, { onMouseEnter: function () {
|
|
47
54
|
if (!isClicked) {
|
|
48
55
|
setShowTooltip(true);
|
|
@@ -51,10 +58,15 @@ var Tooltip = function (_a) {
|
|
|
51
58
|
if (!isClicked) {
|
|
52
59
|
setShowTooltip(false);
|
|
53
60
|
}
|
|
54
|
-
}, onClick: function () {
|
|
61
|
+
}, onClick: function () {
|
|
62
|
+
setIsClicked(true), setShowTooltip(true);
|
|
63
|
+
}, onBlur: function () {
|
|
64
|
+
setIsClicked(false), setShowTooltip(false);
|
|
65
|
+
}, ref: targetRef,
|
|
55
66
|
// isFocused={isFocused}
|
|
56
|
-
tabIndex: 0 },
|
|
57
|
-
|
|
67
|
+
tabIndex: 0 }, presetTarget === "infoIcon" ? (react_1.default.createElement(styled_1.StyledIconButton, { type: showTooltip ? "none" : "fill" },
|
|
68
|
+
react_1.default.createElement(phosphor_react_1.Info, { color: invert ? themes_1.colors.white : themes_1.colors.greyColor100, size: 20, weight: showTooltip ? 'fill' : 'regular' }))) : (children)),
|
|
69
|
+
showTooltip && (react_1.default.createElement(styled_1.StyledTooltipBox, { fixPos: fixPos, isOpen: showTooltip, position: position, show: showTooltip, style: style, invert: invert },
|
|
58
70
|
react_1.default.createElement(Typo_1.SANS_2, null, text),
|
|
59
71
|
react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
|
|
60
72
|
react_1.default.createElement(styled_1.StyledArrow, { position: position, invert: invert }))))));
|
|
@@ -27,7 +27,7 @@ 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.StyledTooltipTarget = exports.
|
|
30
|
+
exports.StyledIconButton = exports.StyledArrow = exports.StyledArrowOutline = exports.StyledTooltipTarget = exports.StyledTooltipBox = 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");
|
|
@@ -40,26 +40,27 @@ 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.
|
|
43
|
+
exports.StyledTooltipBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n ", "\n\n padding: 1rem;\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: 5px;\n /* position: ", "; */\n /* left: ", "px; */\n /* top: ", "px; */\n z-index: 50000000;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap:break-word;\n"], ["\n ", ";\n ", "\n\n padding: 1rem;\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: 5px;\n /* position: ", "; */\n /* left: ", "px; */\n /* top: ", "px; */\n z-index: 50000000;\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(["display:'visible'; z-index:
|
|
46
|
-
}, (0, mixins_1.transition)('opacity 0.1s'), function (props) { return props.invert ?
|
|
47
|
-
var position = _a.position;
|
|
48
|
-
return (0, util_1.positionTooltip)(position);
|
|
45
|
+
return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["display:'visible'; z-index: 5000000;"], ["display:'visible'; z-index: 5000000;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["display:'none'; z-index: -5;"], ["display:'none'; z-index: -5;"])));
|
|
46
|
+
}, (0, mixins_1.transition)('opacity 0.1s'), function (props) { return props.invert ? greyColor10 : greyColor100; }, function (props) { return props.invert ? greyColor100 : white; }, greyColor15, function (props) { return !props.fixPos ? 'fixed' : 'absolute'; }, function (props) { var _a; return (_a = props.fixPos) === null || _a === void 0 ? void 0 : _a.x; }, function (props) { var _a; return (_a = props.fixPos) === null || _a === void 0 ? void 0 : _a.y; }, function (_a) {
|
|
47
|
+
var position = _a.position, fixPos = _a.fixPos;
|
|
48
|
+
return (0, util_1.positionTooltip)(position, fixPos);
|
|
49
49
|
});
|
|
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
|
|
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 ", "
|
|
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 /* background : ", "; */\n /* color : ", "; */\n /* border-radius : ", "; */\n /* border-radius: 2px; */\n"], ["\n border: none;\n background: inherit;\n font-size: inherit;\n /* color: inherit; */\n cursor: inherit;\n /* background : ", "; */\n /* color : ", "; */\n /* border-radius : ", "; */\n /* border-radius: 2px; */\n"])), function (props) { return props.isFocused ? greyColor100 : 'none'; }, function (props) { return props.isFocused ? 'white' : 'inherit'; }, function (props) { return props.isFocused ? '50%' : '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) {
|
|
52
52
|
var position = _a.position;
|
|
53
53
|
return clipPaths[position];
|
|
54
54
|
}, function (_a) {
|
|
55
55
|
var position = _a.position;
|
|
56
56
|
return (0, util_1.positionArrowBorder)(position);
|
|
57
57
|
});
|
|
58
|
-
exports.StyledArrow = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject([" // the the white part\n background-color: ", ";\n color: ", ";\n display:inline-block;\n width: 0.85rem;\n height: 0.85rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "
|
|
58
|
+
exports.StyledArrow = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject([" // the the white part\n background-color: ", ";\n 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 color: ", ";\n display:inline-block;\n width: 0.85rem;\n height: 0.85rem;\n position: absolute;\n clip-path: polygon(", ");\n ", ";\n"])), function (props) { return props.invert ? greyColor10 : greyColor100; }, function (props) { return props.invert ? greyColor100 : white; }, function (_a) {
|
|
59
59
|
var position = _a.position;
|
|
60
60
|
return clipPaths[position];
|
|
61
61
|
}, function (_a) {
|
|
62
62
|
var position = _a.position;
|
|
63
63
|
return (0, util_1.positionArrow)(position);
|
|
64
64
|
});
|
|
65
|
-
|
|
65
|
+
exports.StyledIconButton = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border: none; \n outline: none; \n cursor: pointer;\n"], ["\n background-color: ", ";\n border: none; \n outline: none; \n cursor: pointer;\n"])), themes_1.colors.none);
|
|
66
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -6,16 +6,28 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
7
|
exports.positionArrow = exports.positionArrowBorder = exports.positionTooltip = void 0;
|
|
8
8
|
var styled_components_1 = require("styled-components");
|
|
9
|
-
var positionTooltip = function (position) {
|
|
9
|
+
var positionTooltip = function (position, fixPos) {
|
|
10
10
|
switch (position) {
|
|
11
11
|
case 'top':
|
|
12
|
-
|
|
12
|
+
if (fixPos) {
|
|
13
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n top: ", "px;\n left: ", "px;\n transform: translateX(-50%);\n "], ["\n position: fixed;\n top: ", "px;\n left: ", "px;\n transform: translateX(-50%);\n "])), fixPos.y - 50, fixPos.x + 10);
|
|
14
|
+
}
|
|
15
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n bottom: calc(100% + 8.5px);\n left: 50%;\n transform: translateX(-50%);\n "], ["\n position: absolute;\n bottom: calc(100% + 8.5px);\n left: 50%;\n transform: translateX(-50%);\n "])));
|
|
13
16
|
case 'bottom':
|
|
14
|
-
|
|
17
|
+
if (fixPos) {
|
|
18
|
+
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: fixed;\n top: ", "px;\n left: ", "px;\n transform: translateX(-50%);\n "], ["\n position: fixed;\n top: ", "px;\n left: ", "px;\n transform: translateX(-50%);\n "])), fixPos.y + 30, fixPos.x + 12);
|
|
19
|
+
}
|
|
20
|
+
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n top: calc(100% + 8.5px);\n left: 50%;\n transform: translateX(-50%);\n "], ["\n position: absolute;\n top: calc(100% + 8.5px);\n left: 50%;\n transform: translateX(-50%);\n "])));
|
|
15
21
|
case 'left':
|
|
16
|
-
|
|
22
|
+
if (fixPos) {
|
|
23
|
+
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: fixed;\n top: ", "px;\n left: ", "px;\n transform: translateY(-50%);\n "], ["\n position: fixed;\n top: ", "px;\n left: ", "px;\n transform: translateY(-50%);\n "])), fixPos.y + 8.5, fixPos.x - 122.5);
|
|
24
|
+
}
|
|
25
|
+
return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n right: calc(100% + 8.5px);\n top: 50%;\n transform: translateY(-50%);\n "], ["\n position: absolute;\n right: calc(100% + 8.5px);\n top: 50%;\n transform: translateY(-50%);\n "])));
|
|
17
26
|
case 'right':
|
|
18
|
-
|
|
27
|
+
if (fixPos) {
|
|
28
|
+
return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: fixed;\n top: ", "px;\n left: ", "px;\n transform: translateY(-50%);\n "], ["\n position: fixed;\n top: ", "px;\n left: ", "px;\n transform: translateY(-50%);\n "])), fixPos.y + 8.5, fixPos.x + 30);
|
|
29
|
+
}
|
|
30
|
+
return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n left: calc(100% + 8.5px);\n top: 50%;\n transform: translateY(-50%);\n "], ["\n position: absolute;\n left: calc(100% + 8.5px);\n top: 50%;\n transform: translateY(-50%);\n "])));
|
|
19
31
|
}
|
|
20
32
|
};
|
|
21
33
|
exports.positionTooltip = positionTooltip;
|
|
@@ -23,10 +35,10 @@ var positionArrowBorder = function (position) {
|
|
|
23
35
|
switch (position) {
|
|
24
36
|
case 'top':
|
|
25
37
|
case 'bottom':
|
|
26
|
-
return (0, styled_components_1.css)(
|
|
38
|
+
return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __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%');
|
|
27
39
|
case 'left':
|
|
28
40
|
case 'right':
|
|
29
|
-
return (0, styled_components_1.css)(
|
|
41
|
+
return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __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%');
|
|
30
42
|
}
|
|
31
43
|
};
|
|
32
44
|
exports.positionArrowBorder = positionArrowBorder;
|
|
@@ -34,11 +46,11 @@ var positionArrow = function (position) {
|
|
|
34
46
|
switch (position) {
|
|
35
47
|
case 'top':
|
|
36
48
|
case 'bottom':
|
|
37
|
-
return (0, styled_components_1.css)(
|
|
49
|
+
return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", ";\n left: 8%;\n "], ["\n ", ";\n left: 8%;\n "])), position + ': -2%');
|
|
38
50
|
case 'left':
|
|
39
51
|
case 'right':
|
|
40
|
-
return (0, styled_components_1.css)(
|
|
52
|
+
return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", ";\n top: 8%;\n "], ["\n ", ";\n top: 8%;\n "])), position + ': -2%');
|
|
41
53
|
}
|
|
42
54
|
};
|
|
43
55
|
exports.positionArrow = positionArrow;
|
|
44
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
56
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
package/dist/icons/index.d.ts
CHANGED
|
@@ -98,6 +98,7 @@ export namespace icons {
|
|
|
98
98
|
export { KenyaFlag };
|
|
99
99
|
export { LightbulbFilament };
|
|
100
100
|
export { ModalBulbIcon };
|
|
101
|
+
export { Keyboard };
|
|
101
102
|
}
|
|
102
103
|
import { PencilSimple } from "phosphor-react";
|
|
103
104
|
import { PencilLine } from "phosphor-react";
|
|
@@ -198,3 +199,4 @@ import { IndiaFlag } from "./custom";
|
|
|
198
199
|
import { KenyaFlag } from "./custom";
|
|
199
200
|
import { LightbulbFilament } from "phosphor-react";
|
|
200
201
|
import { ModalBulbIcon } from "./custom";
|
|
202
|
+
import { Keyboard } from "phosphor-react";
|
package/dist/icons/index.js
CHANGED
|
@@ -9,7 +9,7 @@ var react_1 = require("react");
|
|
|
9
9
|
* @returns scrollContainerRef: reference to the scrollable element. You need to pass this reference to the ref attribute of your scrollable element in your component.
|
|
10
10
|
* scrollX: The current scroll position in pixels, from the left side of the content.
|
|
11
11
|
* scrollIsAtEnd: A boolean value that indicates whether the scroll bar is at the end of the content.
|
|
12
|
-
* slide (shift: string): A function that shifts the scroll position by shifting pixels by
|
|
12
|
+
* slide (shift: string): A function that shifts the scroll position by shifting pixels by direction (left/right) string provided.
|
|
13
13
|
* checkScrollPosition: A function that updates the scrollX and scrollIsAtEnd values based on the current scroll position.
|
|
14
14
|
*/
|
|
15
15
|
var useScrollBar = function () {
|
|
@@ -18,8 +18,9 @@ var useScrollBar = function () {
|
|
|
18
18
|
var scrollContainerRef = (0, react_1.useRef)(null);
|
|
19
19
|
var slide = function (direction) {
|
|
20
20
|
var _a = scrollContainerRef.current, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth, scrollLeft = _a.scrollLeft;
|
|
21
|
+
var containerWidth = scrollContainerRef.current.parentNode.getBoundingClientRect().width;
|
|
21
22
|
if (direction === "left") {
|
|
22
|
-
var newScrollLeft = Math.max(scrollLeft -
|
|
23
|
+
var newScrollLeft = Math.max(scrollLeft - containerWidth, 0); // // ensures that the content is always visible within the scrollable element and no part of it is hidden.
|
|
23
24
|
if (scrollLeft === newScrollLeft) {
|
|
24
25
|
setScrollIsAtEnd(true);
|
|
25
26
|
}
|
|
@@ -29,7 +30,7 @@ var useScrollBar = function () {
|
|
|
29
30
|
});
|
|
30
31
|
}
|
|
31
32
|
else if (direction === "right") {
|
|
32
|
-
var newScrollLeft = Math.min(scrollLeft +
|
|
33
|
+
var newScrollLeft = Math.min(scrollLeft + containerWidth, scrollWidth - offsetWidth); // // ensures that the content is always visible within the scrollable element and no part of it is hidden.
|
|
33
34
|
if (scrollLeft === newScrollLeft) {
|
|
34
35
|
setScrollIsAtEnd(true);
|
|
35
36
|
}
|
|
@@ -43,10 +43,11 @@ var useScroll_1 = require("./customHooks/useScroll");
|
|
|
43
43
|
*
|
|
44
44
|
*/
|
|
45
45
|
var usePopOutOfOverflowHiddenParent = function (popOutOfOverflowHiddenParent) {
|
|
46
|
+
var enabled = popOutOfOverflowHiddenParent; // is either true or falsw
|
|
46
47
|
var trackerRef = (0, react_1.useRef)(null);
|
|
47
48
|
var _a = (0, react_1.useState)(undefined), fixPos = _a[0], setFixPos = _a[1];
|
|
48
49
|
var getBoundingClientRect = function () { var _a; return (_a = trackerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); };
|
|
49
|
-
var applyFixedPos = function () { return setFixPos(getBoundingClientRect()); };
|
|
50
|
+
var applyFixedPos = function () { return enabled && setFixPos(getBoundingClientRect()); };
|
|
50
51
|
var updateFixedPos = function (e) {
|
|
51
52
|
/**
|
|
52
53
|
* only if popOut... prop is enabled, AND
|
|
@@ -56,8 +57,8 @@ var usePopOutOfOverflowHiddenParent = function (popOutOfOverflowHiddenParent) {
|
|
|
56
57
|
if (popOutOfOverflowHiddenParent)
|
|
57
58
|
setFixPos(function (prev) { return prev && getBoundingClientRect(); });
|
|
58
59
|
};
|
|
60
|
+
var removeFixedPos = function () { return enabled && setFixPos(undefined); };
|
|
59
61
|
(0, useScroll_1.useScroll)(updateFixedPos, { noThrottle: true, detectScrollInAllDivs: true });
|
|
60
|
-
var removeFixedPos = function () { return setFixPos(undefined); };
|
|
61
62
|
return ({ trackerRef: trackerRef, applyFixedPos: applyFixedPos, removeFixedPos: removeFixedPos, fixPos: fixPos });
|
|
62
63
|
};
|
|
63
64
|
exports.usePopOutOfOverflowHiddenParent = usePopOutOfOverflowHiddenParent;
|