oolib 2.204.1 → 2.205.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/ActionMenu/index.js +17 -1
- package/dist/components/ActionMenu/styled.js +1 -1
- package/dist/components/Hints/styled.js +1 -1
- package/dist/stories/v2/components/HomeCover.stories.js +9 -6
- package/dist/utils/customHooks/useHandleClickOutside.js +5 -4
- package/dist/v2/components/Hints/styled.js +1 -1
- package/dist/v2/components/HomeCover/index.d.ts +2 -1
- package/dist/v2/components/HomeCover/index.js +4 -3
- package/dist/v2/components/HomeCover/styled.js +2 -2
- 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) {
|
|
@@ -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) {
|
|
@@ -47,6 +47,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
47
47
|
exports.HomeCover_Mobile_ = exports.HomeCover_ = void 0;
|
|
48
48
|
var react_1 = __importStar(require("react"));
|
|
49
49
|
var HomeCover_1 = require("../../../v2/components/HomeCover");
|
|
50
|
+
var Paddings_1 = require("../../../components/Paddings");
|
|
50
51
|
exports.default = {
|
|
51
52
|
title: "Oolib V 2.0/components/HomeCover",
|
|
52
53
|
argTypes: {
|
|
@@ -83,10 +84,10 @@ exports.default = {
|
|
|
83
84
|
variant: "Default",
|
|
84
85
|
CTALink: '#',
|
|
85
86
|
coverImagesConfig: [
|
|
86
|
-
"https://
|
|
87
|
-
"https://
|
|
88
|
-
"https://
|
|
89
|
-
"https://
|
|
87
|
+
"https://images.unsplash.com/photo-1682686578707-140b042e8f19?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxfHx8ZW58MHx8fHx8",
|
|
88
|
+
"https://images.unsplash.com/photo-1735657090736-0c8484323c90?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw3fHx8ZW58MHx8fHx8",
|
|
89
|
+
"https://images.unsplash.com/photo-1683009427500-71296178737f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwzMXx8fGVufDB8fHx8fA%3D%3D",
|
|
90
|
+
"https://images.unsplash.com/photo-1753191326444-f00046939b59?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0M3x8fGVufDB8fHx8fA%3D%3D",
|
|
90
91
|
],
|
|
91
92
|
},
|
|
92
93
|
};
|
|
@@ -97,11 +98,13 @@ var HomeCover_ = function (args) {
|
|
|
97
98
|
element[0].style.padding = '0';
|
|
98
99
|
}
|
|
99
100
|
}, []);
|
|
100
|
-
return react_1.default.createElement(
|
|
101
|
+
return (react_1.default.createElement(Paddings_1.PaddingTopBottom10, { style: { margin: '0 1rem' } },
|
|
102
|
+
react_1.default.createElement(HomeCover_1.HomeCover, __assign({}, args))));
|
|
101
103
|
};
|
|
102
104
|
exports.HomeCover_ = HomeCover_;
|
|
103
105
|
var HomeCover_Mobile_ = function (args) {
|
|
104
|
-
return (react_1.default.createElement(
|
|
106
|
+
return (react_1.default.createElement(Paddings_1.PaddingTopBottom10, { style: { margin: '0 1rem' } },
|
|
107
|
+
react_1.default.createElement(HomeCover_1.HomeCover, __assign({}, args))));
|
|
105
108
|
};
|
|
106
109
|
exports.HomeCover_Mobile_ = HomeCover_Mobile_;
|
|
107
110
|
exports.HomeCover_Mobile_.parameters = {
|
|
@@ -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) {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
export function HomeCover({ title, desc, CTALink, coverImagesConfig, variant, }: {
|
|
1
|
+
export function HomeCover({ title, desc, CTALink, coverImagesConfig, variant, style }: {
|
|
2
2
|
title: any;
|
|
3
3
|
desc: any;
|
|
4
4
|
CTALink: any;
|
|
5
5
|
coverImagesConfig: any;
|
|
6
6
|
variant?: string;
|
|
7
|
+
style: any;
|
|
7
8
|
}): React.JSX.Element;
|
|
8
9
|
import React from "react";
|
|
@@ -20,7 +20,8 @@ var HomeCover = function (_a) {
|
|
|
20
20
|
// subtitle,
|
|
21
21
|
desc = _a.desc, CTALink = _a.CTALink,
|
|
22
22
|
// customComp,
|
|
23
|
-
coverImagesConfig = _a.coverImagesConfig, _b = _a.variant, variant = _b === void 0 ? "default" : _b
|
|
23
|
+
coverImagesConfig = _a.coverImagesConfig, _b = _a.variant, variant = _b === void 0 ? "default" : _b, //alt = 'small'
|
|
24
|
+
style = _a.style;
|
|
24
25
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
25
26
|
var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
|
|
26
27
|
var navigate = (0, react_router_dom_1.useNavigate)();
|
|
@@ -28,7 +29,7 @@ var HomeCover = function (_a) {
|
|
|
28
29
|
var _CoverImages = coverImagesConfig.every(function (c) { return typeof c === "string"; })
|
|
29
30
|
? coverImagesConfig
|
|
30
31
|
: coverImagesConfig.map(function (c) { return c.publicUrl; });
|
|
31
|
-
var deskTop = react_1.default.createElement(styled_1.StyledHomeCover, { variant: variant },
|
|
32
|
+
var deskTop = react_1.default.createElement(styled_1.StyledHomeCover, { variant: variant, style: style },
|
|
32
33
|
react_1.default.createElement(WrapperContentSection_1.WrapperContentSection, { theme: theme },
|
|
33
34
|
react_1.default.createElement("div", { style: { position: "relative", height: '100%', borderRadius: '1rem', display: 'flex', alignItems: 'center', padding: '1.6rem' } },
|
|
34
35
|
react_1.default.createElement("div", null,
|
|
@@ -36,7 +37,7 @@ var HomeCover = function (_a) {
|
|
|
36
37
|
react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_DF, { style: { color: themes_1.colors.grey80, marginTop: "0.8rem" } }, desc)),
|
|
37
38
|
CTALink && react_1.default.createElement(Buttons_1.ButtonTertiary, { style: { position: "absolute", bottom: "1.6rem", left: "1.6rem" }, iconSize: "S", icon: (CTALink === null || CTALink === void 0 ? void 0 : CTALink.icon) || "ArrowRight", onClick: function () { return navigate((CTALink === null || CTALink === void 0 ? void 0 : CTALink.url) || CTALink); } }, CTALink === null || CTALink === void 0 ? void 0 : CTALink.text))),
|
|
38
39
|
react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages, theme: theme }));
|
|
39
|
-
var mobile = react_1.default.createElement(styled_1.StyledMobileHomeCover, { id: "StyledMobileHomeCover", theme: theme, variant: variant },
|
|
40
|
+
var mobile = react_1.default.createElement(styled_1.StyledMobileHomeCover, { id: "StyledMobileHomeCover", theme: theme, variant: variant, style: style },
|
|
40
41
|
react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages, isDesktop: false, theme: theme }),
|
|
41
42
|
react_1.default.createElement(styled_1.StyledMobileContentWrapper, null,
|
|
42
43
|
react_1.default.createElement("div", { style: { alignContent: "end", height: '100%', gap: "1.6rem" } },
|
|
@@ -9,8 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.StyledMobileContentWrapper = exports.StyledMobileHomeCover = exports.StyledHomeCover = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.StyledHomeCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
13
|
-
exports.StyledMobileHomeCover = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
12
|
+
exports.StyledHomeCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 40rem;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 0.8rem;\n"], ["\n height: 40rem;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 0.8rem;\n"])));
|
|
13
|
+
exports.StyledMobileHomeCover = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n height: ", ";\n border-radius: 1.6rem;\n position: relative;\n"], ["\n display: flex;\n height: ", ";\n border-radius: 1.6rem;\n position: relative;\n"])), function (_a) {
|
|
14
14
|
var variant = _a.variant;
|
|
15
15
|
return variant === "small" ? "55svh" : "70svh";
|
|
16
16
|
});
|