oolib 2.205.0 → 2.205.2
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/ActionMenu/index.js +17 -1
- package/dist/components/ActionMenu/styled.js +1 -1
- package/dist/components/Breadcrumbs/index.js +6 -7
- package/dist/components/Hints/styled.js +1 -1
- package/dist/utils/customHooks/useHandleClickOutside.js +5 -4
- package/dist/v2/components/Hints/styled.js +1 -1
- package/package.json +1 -1
|
@@ -79,7 +79,23 @@ var ActionMenu = function (_a) {
|
|
|
79
79
|
var _g = (0, react_1.useState)(false), showActions = _g[0], setShowActions = _g[1];
|
|
80
80
|
(0, useHandleClickOutside_1.useHandleClickOutside)(popOutOfOverflowHiddenParent
|
|
81
81
|
? [actionMenuRef, optionsWrapperRef]
|
|
82
|
-
: actionMenuRef, setShowActions
|
|
82
|
+
: actionMenuRef, setShowActions, {
|
|
83
|
+
/**
|
|
84
|
+
* what this does is, it helps this hook capture the mousedown event at the
|
|
85
|
+
* time of click itself, rather than waiting for it to bubble up the the
|
|
86
|
+
* document listener level.
|
|
87
|
+
*
|
|
88
|
+
* We need this here because, actionmenus have stopPropagation on its button
|
|
89
|
+
* which helps trigger table row clicks if the action menu is on a table for
|
|
90
|
+
* example. But this also stops other action menus from closing if another
|
|
91
|
+
* action menu is opened
|
|
92
|
+
*
|
|
93
|
+
* this capture: true, gives up both the above functionalities without ruining
|
|
94
|
+
* one or the other
|
|
95
|
+
*
|
|
96
|
+
*/
|
|
97
|
+
capture: true
|
|
98
|
+
});
|
|
83
99
|
var getOpsRect = function () { var _a; return (_a = optionsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); };
|
|
84
100
|
var ButtonComp = ButtonComps[_ButtonComp];
|
|
85
101
|
var buttonSize = M ? { M: true } : {};
|
|
@@ -62,7 +62,7 @@ exports.StyledActionMenuTracker = styled_components_1.default.div(templateObject
|
|
|
62
62
|
return storybookPreview && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), themes_1.colors.red);
|
|
63
63
|
});
|
|
64
64
|
var delayVisibility = (0, styled_components_1.keyframes)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n 0% { overflow: hidden; }\n 100% { overflow: visible; }\n"], ["\n 0% { overflow: hidden; }\n 100% { overflow: visible; }\n"])));
|
|
65
|
-
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n\n z-index:
|
|
65
|
+
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n\n z-index: 10001;\n\n ", ";\n /* overflow-y: hidden; */\n /* Conditionally setting overflow to visible once the showActions is true with delay to keep actionMenu animation smooth, reason - to avoid hiding content on the menu option like tooltip*/\n ", "\n width: ", ";\n height: ", ";\n"], ["\n ", "\n\n z-index: 10001;\n\n ", ";\n /* overflow-y: hidden; */\n /* Conditionally setting overflow to visible once the showActions is true with delay to keep actionMenu animation smooth, reason - to avoid hiding content on the menu option like tooltip*/\n ", "\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
66
66
|
var fixPos = _a.fixPos, align = _a.align;
|
|
67
67
|
return fixPos
|
|
68
68
|
? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: fixed;\n top: ", "px;\n left: ", "px;\n z-index: 1000;\n ", "\n "], ["\n position: fixed;\n top: ", "px;\n left: ", "px;\n z-index: 1000;\n ", "\n "])), fixPos.y, fixPos.x, function (_a) {
|
|
@@ -36,12 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
exports.Breadcrumbs = void 0;
|
|
37
37
|
var react_1 = __importStar(require("react"));
|
|
38
38
|
var index_styled_1 = require("./index.styled");
|
|
39
|
-
var Typo_1 = require("../Typo");
|
|
40
39
|
var icons_1 = require("../../icons");
|
|
41
|
-
var themes_1 = require("../../themes");
|
|
42
40
|
var mixins_1 = require("../../themes/mixins");
|
|
41
|
+
var Typo2_1 = require("../../v2/components/Typo2");
|
|
42
|
+
var __1 = require("../..");
|
|
43
43
|
var ArrowLeft = icons_1.icons.ArrowLeft;
|
|
44
|
-
var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100, greyColor50 = themes_1.colors.greyColor50;
|
|
45
44
|
/**
|
|
46
45
|
* @component Renders a Breadcrumbs component based on the provided links and invert flag.
|
|
47
46
|
*
|
|
@@ -75,7 +74,7 @@ var Breadcrumbs = function (_a) {
|
|
|
75
74
|
return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: link.to, invert: invert, key: ind, style: ind === linksDisplayed_1.length - 1
|
|
76
75
|
? {
|
|
77
76
|
pointerEvents: 'none',
|
|
78
|
-
color:
|
|
77
|
+
color: __1.colors2.grey50,
|
|
79
78
|
width: !beConcise
|
|
80
79
|
? 'auto'
|
|
81
80
|
: (function () {
|
|
@@ -87,12 +86,12 @@ var Breadcrumbs = function (_a) {
|
|
|
87
86
|
})(),
|
|
88
87
|
}
|
|
89
88
|
: {} },
|
|
90
|
-
react_1.default.createElement(
|
|
89
|
+
react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, link.display)));
|
|
91
90
|
})));
|
|
92
91
|
}
|
|
93
92
|
return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer },
|
|
94
93
|
react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: (links[links.length - 2] || links[0]).to, invert: invert },
|
|
95
|
-
react_1.default.createElement(ArrowLeft, { size: 14,
|
|
96
|
-
react_1.default.createElement(
|
|
94
|
+
react_1.default.createElement(ArrowLeft, { size: 14, color: invert ? __1.colors2.white : __1.colors2.grey80 }),
|
|
95
|
+
react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { invert: invert }, "Back"))));
|
|
97
96
|
};
|
|
98
97
|
exports.Breadcrumbs = Breadcrumbs;
|
|
@@ -35,7 +35,7 @@ exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (te
|
|
|
35
35
|
exports.StyledLightBoxHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 4rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-radius: 2px;\n gap: 1rem;\n\n padding: 1rem 1.5rem;\n"], ["\n height: 4rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-radius: 2px;\n gap: 1rem;\n\n padding: 1rem 1.5rem;\n"])));
|
|
36
36
|
exports.StyledLightBoxContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0.5rem 2rem 2rem 1.5rem;\n overflow-y: auto;\n"], ["\n padding: 0.5rem 2rem 2rem 1.5rem;\n overflow-y: auto;\n"])));
|
|
37
37
|
exports.StyledLightBoxList = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 0;\n li {\n list-style-type: none;\n padding: 0.5rem 0;\n display: flex;\n gap: 1rem;\n /* align-items: center; */\n /* ::before {\n content: \"\";\n margin-top: 0.5rem;\n flex: 0 0 .5rem;\n width: .5rem;\n padding: 0%.5r;\n height: .5rem;\n background-color: ", ";\n border-radius: 50%;\n flex-shrink: 0;\n } */\n }\n"], ["\n padding: 0;\n li {\n list-style-type: none;\n padding: 0.5rem 0;\n display: flex;\n gap: 1rem;\n /* align-items: center; */\n /* ::before {\n content: \"\";\n margin-top: 0.5rem;\n flex: 0 0 .5rem;\n width: .5rem;\n padding: 0%.5r;\n height: .5rem;\n background-color: ", ";\n border-radius: 50%;\n flex-shrink: 0;\n } */\n }\n"])), greyColor100);
|
|
38
|
-
exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n\n width: 10px;\n height: 10px;\n border-style: solid;\n\n border-width: 1px;\n border-color: ", " ", " transparent transparent;\n /* transform:rotate(-45deg); */\n z-index:
|
|
38
|
+
exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n\n width: 10px;\n height: 10px;\n border-style: solid;\n\n border-width: 1px;\n border-color: ", " ", " transparent transparent;\n /* transform:rotate(-45deg); */\n z-index: 10001;\n background-color: white;\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n transform: ", ";\n\n /* position:absolute; */\n /* top:.7rem; */\n /* left:-2rem; */\n /* transform :rotate(90deg); */\n"], ["\n position: absolute;\n\n width: 10px;\n height: 10px;\n border-style: solid;\n\n border-width: 1px;\n border-color: ", " ", " transparent transparent;\n /* transform:rotate(-45deg); */\n z-index: 10001;\n background-color: white;\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n transform: ", ";\n\n /* position:absolute; */\n /* top:.7rem; */\n /* left:-2rem; */\n /* transform :rotate(90deg); */\n"])), greyColor15, greyColor15, function (_a) {
|
|
39
39
|
var top = _a.style.top;
|
|
40
40
|
return top;
|
|
41
41
|
}, function (_a) {
|
|
@@ -11,18 +11,19 @@ var toArray_1 = require("../toArray");
|
|
|
11
11
|
*/
|
|
12
12
|
var useHandleClickOutside = function (ref, setShowOptions, options) {
|
|
13
13
|
if (options === void 0) { options = {}; }
|
|
14
|
-
var _a = options.enabled, enabled = _a === void 0 ? true : _a;
|
|
14
|
+
var _a = options.enabled, enabled = _a === void 0 ? true : _a, _b = options.capture, capture = _b === void 0 ? false : _b;
|
|
15
15
|
var handleClickOutside = function (event) {
|
|
16
16
|
if (!enabled)
|
|
17
17
|
return;
|
|
18
18
|
if ((0, toArray_1.toArray)(ref).every(function (refD) { return refD.current && !refD.current.contains(event.target); })) {
|
|
19
|
-
//clicked outside
|
|
19
|
+
//clicked outside
|
|
20
20
|
setShowOptions(false);
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
(0, react_1.useEffect)(function () {
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
// Use capture: true to listen during capture phase (before stopPropagation) usecase: ActionMenu
|
|
25
|
+
document.addEventListener('mousedown', handleClickOutside, { capture: capture }); //its very important for this to be mousedown. 'click' acts unpredictable
|
|
26
|
+
return function () { return document.removeEventListener('mousedown', handleClickOutside, { capture: capture }); };
|
|
26
27
|
}, [enabled]);
|
|
27
28
|
};
|
|
28
29
|
exports.useHandleClickOutside = useHandleClickOutside;
|
|
@@ -38,7 +38,7 @@ exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (te
|
|
|
38
38
|
exports.StyledLightBoxHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 4rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-radius: 2px;\n gap: 1rem;\n\n padding: 1rem 1.5rem;\n"], ["\n height: 4rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-radius: 2px;\n gap: 1rem;\n\n padding: 1rem 1.5rem;\n"])));
|
|
39
39
|
exports.StyledLightBoxContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0.5rem 2rem 2rem 1.5rem;\n overflow-y: auto;\n"], ["\n padding: 0.5rem 2rem 2rem 1.5rem;\n overflow-y: auto;\n"])));
|
|
40
40
|
exports.StyledLightBoxList = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 0;\n li {\n list-style-type: none;\n padding: 0.5rem 0;\n display: flex;\n gap: 1rem;\n /* align-items: center; */\n /* ::before {\n content: \"\";\n margin-top: 0.5rem;\n flex: 0 0 .5rem;\n width: .5rem;\n padding: 0%.5r;\n height: .5rem;\n background-color: ", ";\n border-radius: 50%;\n flex-shrink: 0;\n } */\n }\n"], ["\n padding: 0;\n li {\n list-style-type: none;\n padding: 0.5rem 0;\n display: flex;\n gap: 1rem;\n /* align-items: center; */\n /* ::before {\n content: \"\";\n margin-top: 0.5rem;\n flex: 0 0 .5rem;\n width: .5rem;\n padding: 0%.5r;\n height: .5rem;\n background-color: ", ";\n border-radius: 50%;\n flex-shrink: 0;\n } */\n }\n"])), black);
|
|
41
|
-
exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n\n width: 10px;\n height: 10px;\n border-style: solid;\n\n border-width: 1px;\n border-color: ", " ", " transparent transparent;\n /* transform:rotate(-45deg); */\n z-index:
|
|
41
|
+
exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n\n width: 10px;\n height: 10px;\n border-style: solid;\n\n border-width: 1px;\n border-color: ", " ", " transparent transparent;\n /* transform:rotate(-45deg); */\n z-index: 10001;\n background-color: white;\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n transform: ", ";\n\n /* position:absolute; */\n /* top:.7rem; */\n /* left:-2rem; */\n /* transform :rotate(90deg); */\n"], ["\n position: absolute;\n\n width: 10px;\n height: 10px;\n border-style: solid;\n\n border-width: 1px;\n border-color: ", " ", " transparent transparent;\n /* transform:rotate(-45deg); */\n z-index: 10001;\n background-color: white;\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n transform: ", ";\n\n /* position:absolute; */\n /* top:.7rem; */\n /* left:-2rem; */\n /* transform :rotate(90deg); */\n"])), grey20, grey20, function (_a) {
|
|
42
42
|
var top = _a.style.top;
|
|
43
43
|
return top;
|
|
44
44
|
}, function (_a) {
|