oolib 2.128.4 → 2.129.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/ActionMenu/index.d.ts +6 -0
- package/dist/components/ActionMenu/index.js +12 -10
- package/dist/components/ActionMenu/styled.js +16 -11
- package/dist/components/RadioListMultiQuestion/styled.js +1 -1
- package/dist/components/Tooltip/styled.js +2 -2
- package/dist/stories/ActionMenu.stories.d.ts +1 -0
- package/dist/stories/ActionMenu.stories.js +5 -4
- package/package.json +1 -1
|
@@ -9,6 +9,12 @@ export interface ActionItem {
|
|
|
9
9
|
message?: string;
|
|
10
10
|
onConfirm?: () => void;
|
|
11
11
|
};
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
infoTooltip?: {
|
|
14
|
+
text?: string;
|
|
15
|
+
popOutOfOverflowHiddenParent?: boolean;
|
|
16
|
+
position?: "top" | "bottom" | "left" | "right";
|
|
17
|
+
};
|
|
12
18
|
}
|
|
13
19
|
export interface CustomSelectCompProps {
|
|
14
20
|
active: boolean;
|
|
@@ -44,6 +44,7 @@ var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflow
|
|
|
44
44
|
var styled_1 = require("./styled");
|
|
45
45
|
var ModalConfirmAction_1 = require("../Modals/derivedComps/ModalConfirmAction");
|
|
46
46
|
var react_dom_1 = require("react-dom");
|
|
47
|
+
var Tooltip_1 = require("../Tooltip");
|
|
47
48
|
/**
|
|
48
49
|
* @component Renders an action menu component with customizable text and styling.
|
|
49
50
|
*
|
|
@@ -97,16 +98,17 @@ var ActionMenu = function (_a) {
|
|
|
97
98
|
var _a, _b;
|
|
98
99
|
return (react_1.default.createElement(styled_1.StyledActionsDropMenu, { id: "dropmenu", align: align, invert: invert, optionsHeight: (_a = getOpsRect()) === null || _a === void 0 ? void 0 : _a.height, optionsWidth: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.width, showActions: showActions, fixPos: fixPos },
|
|
99
100
|
react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
101
|
+
var _a, _b, _c;
|
|
102
|
+
var optionContent = (react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {
|
|
103
|
+
var _a;
|
|
104
|
+
e.preventDefault();
|
|
105
|
+
e.stopPropagation();
|
|
106
|
+
!action.disabled && ((_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e));
|
|
107
|
+
setShowActions(false);
|
|
108
|
+
}, key: action.display, invert: invert }),
|
|
109
|
+
action.icon && genOptionIcon(action.icon),
|
|
110
|
+
react_1.default.createElement(Typo_1.SANS_2, null, action.display)));
|
|
111
|
+
return (react_1.default.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction, { key: action.display }), action.infoTooltip ? (react_1.default.createElement(Tooltip_1.Tooltip, { text: ((_a = action.infoTooltip) === null || _a === void 0 ? void 0 : _a.text) || undefined, popOutOfOverflowHiddenParent: ((_b = action.infoTooltip) === null || _b === void 0 ? void 0 : _b.popOutOfOverflowHiddenParent) || false, position: ((_c = action.infoTooltip) === null || _c === void 0 ? void 0 : _c.position) || "left" }, optionContent)) : (optionContent)));
|
|
110
112
|
}))));
|
|
111
113
|
};
|
|
112
114
|
return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
|
|
@@ -51,46 +51,51 @@ exports.StyledActionMenuTracker = styled_components_1.default.div(templateObject
|
|
|
51
51
|
var storybookPreview = _a.storybookPreview;
|
|
52
52
|
return storybookPreview && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), themes_1.colors.red);
|
|
53
53
|
});
|
|
54
|
-
|
|
54
|
+
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"])));
|
|
55
|
+
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n\n z-index: 1001;\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: 1001;\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) {
|
|
55
56
|
var fixPos = _a.fixPos, align = _a.align;
|
|
56
57
|
return fixPos
|
|
57
|
-
? (0, styled_components_1.css)(
|
|
58
|
+
? (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) {
|
|
58
59
|
var align = _a.align;
|
|
59
60
|
switch (align) {
|
|
60
61
|
case "center":
|
|
61
|
-
return (0, styled_components_1.css)(
|
|
62
|
+
return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n transform: translate(-50%, 0);\n "], ["\n transform: translate(-50%, 0);\n "])));
|
|
62
63
|
case "right":
|
|
63
|
-
return (0, styled_components_1.css)(
|
|
64
|
+
return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n transform: translate(-100%, 0);\n "], ["\n transform: translate(-100%, 0);\n "])));
|
|
64
65
|
}
|
|
65
|
-
}) : (0, styled_components_1.css)(
|
|
66
|
+
}) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n position: absolute;\n bottom: 0;\n transform: translateY(100%);\n transform-origin: left top;\n ", "\n "], ["\n position: absolute;\n bottom: 0;\n transform: translateY(100%);\n transform-origin: left top;\n ", "\n "])), function (_a) {
|
|
66
67
|
var align = _a.align;
|
|
67
68
|
return align === "center"
|
|
68
|
-
? (0, styled_components_1.css)(
|
|
69
|
+
? (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n left: 1.5rem;\n transform: translate(-50%, 100%);\n "], ["\n left: 1.5rem;\n transform: translate(-50%, 100%);\n "]))) : (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", ": ", "px;\n "], ["\n ", ": ", "px;\n "])), align, 0 - offset);
|
|
69
70
|
});
|
|
70
71
|
}, (0, mixins_1.transition)("height"), function (_a) {
|
|
72
|
+
var showActions = _a.showActions;
|
|
73
|
+
return showActions
|
|
74
|
+
? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n animation: ", " 1s forwards;\n "], ["\n animation: ", " 1s forwards;\n "])), delayVisibility) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n overflow: hidden;\n "], ["\n overflow: hidden;\n "])));
|
|
75
|
+
}, function (_a) {
|
|
71
76
|
var optionsWidth = _a.optionsWidth;
|
|
72
77
|
return (optionsWidth ? "".concat(optionsWidth + offset * 2, "px") : "auto");
|
|
73
78
|
}, function (_a) {
|
|
74
79
|
var showActions = _a.showActions, optionsHeight = _a.optionsHeight;
|
|
75
80
|
return showActions ? "".concat(optionsHeight ? optionsHeight + pointerHeight + offset : "auto", "px") : "0";
|
|
76
81
|
});
|
|
77
|
-
exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(
|
|
82
|
+
exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n position: absolute;\n bottom: 10px;\n padding: 0.6rem 0;\n ", "\n margin: 0 ", "px;\n\n //pointer outline\n &::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n\n border: 1rem solid transparent;\n border-bottom: 1rem solid\n ", ";\n }\n\n //pointer fill\n &::before {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n ", "\n border: 0.85rem solid transparent;\n border-bottom: 0.85rem solid\n ", ";\n z-index: 1;\n }\n"], ["\n position: absolute;\n bottom: 10px;\n padding: 0.6rem 0;\n ", "\n margin: 0 ", "px;\n\n //pointer outline\n &::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n\n border: 1rem solid transparent;\n border-bottom: 1rem solid\n ", ";\n }\n\n //pointer fill\n &::before {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n ", "\n border: 0.85rem solid transparent;\n border-bottom: 0.85rem solid\n ", ";\n z-index: 1;\n }\n"])), globalVariables_1.globalLightboxStyle, offset, function (_a) {
|
|
78
83
|
var align = _a.align;
|
|
79
84
|
return align === "center"
|
|
80
|
-
? (0, styled_components_1.css)(
|
|
85
|
+
? (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n left: 50%;\n transform: translateX(-50%);\n "], ["\n left: 50%;\n transform: translateX(-50%);\n "]))) : (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n ", ": 0.5rem;\n "], ["\n ", ": 0.5rem;\n "])), align);
|
|
81
86
|
}, function (_a) {
|
|
82
87
|
var invert = _a.invert;
|
|
83
88
|
return (invert ? greyColor70 : greyColor5);
|
|
84
89
|
}, function (_a) {
|
|
85
90
|
var align = _a.align;
|
|
86
91
|
return align === "center"
|
|
87
|
-
? (0, styled_components_1.css)(
|
|
92
|
+
? (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n left: 50%;\n transform: translateX(-50%);\n "], ["\n left: 50%;\n transform: translateX(-50%);\n "]))) : (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", ": 0.65rem;\n "], ["\n ", ": 0.65rem;\n "])), align);
|
|
88
93
|
}, function (_a) {
|
|
89
94
|
var invert = _a.invert;
|
|
90
95
|
return (invert ? greyColor80 : white);
|
|
91
96
|
});
|
|
92
|
-
exports.StyledOption = styled_components_1.default.button(
|
|
97
|
+
exports.StyledOption = styled_components_1.default.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n white-space: nowrap;\n border: none;\n cursor: pointer;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n padding: 0.25rem 1.2rem;\n background-color: transparent;\n color: ", ";\n ", ";\n ", "\n"], ["\n white-space: nowrap;\n border: none;\n cursor: pointer;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n padding: 0.25rem 1.2rem;\n background-color: transparent;\n color: ", ";\n ", ";\n ", "\n"])), function (_a) {
|
|
93
98
|
var invert = _a.invert;
|
|
94
99
|
return (invert ? white : greyColor100);
|
|
95
100
|
}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalHoverOnWhiteBG);
|
|
96
|
-
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, templateObject_18, templateObject_19;
|
|
101
|
+
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, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
|
|
@@ -16,7 +16,7 @@ var greyColor10 = colors_1.colors.greyColor10, greyColor3 = colors_1.colors.grey
|
|
|
16
16
|
exports.StyledTable = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-collapse: collapse;\n border-spacing: 0;\n"], ["\n border: 1px solid ", ";\n border-collapse: collapse;\n border-spacing: 0;\n"])), greyColor10);
|
|
17
17
|
exports.StyledTableTh = styled_components_1.default.th(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n min-width: 85px;\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n"], ["\n border-bottom: 1px solid ", ";\n min-width: 85px;\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n"])), greyColor10, greyColor10, greyColor10);
|
|
18
18
|
exports.StyledElem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex; \n justify-content: center; \n padding: 1rem\n"], ["\n display: flex; \n justify-content: center; \n padding: 1rem\n"])));
|
|
19
|
-
exports.StyledTableRow = styled_components_1.default.tr(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n ", ";\n \n &:hover {\n background-color: ", ";\n }
|
|
19
|
+
exports.StyledTableRow = styled_components_1.default.tr(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n ", ";\n \n /* &:hover {\n background-color: ", ";\n } */\n"], ["\n background-color: ", ";\n ", ";\n \n /* &:hover {\n background-color: ", ";\n } */\n"])), function (_a) {
|
|
20
20
|
var index = _a.index;
|
|
21
21
|
return index % 2 === 0 ? greyColor3 : 'white';
|
|
22
22
|
}, (0, mixins_1.transition)("background-color"), (0, utilsOolib_1.getPrimaryColor10)(colors_1.colors));
|
|
@@ -19,12 +19,12 @@ var clipPaths = {
|
|
|
19
19
|
right: '100% 0%, 50% 47%, 50% 52%, 100% 100%',
|
|
20
20
|
left: '0% 0%, 50% 47%, 50% 52%, 0% 100%',
|
|
21
21
|
};
|
|
22
|
-
exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n text-align: left;\n cursor: pointer;\n"], ["\n position: relative;\n width: fit-content;\n text-align: left;\n cursor: pointer;\n"])));
|
|
22
|
+
exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n text-align: left;\n cursor: pointer;\n width: 100%;\n"], ["\n position: relative;\n width: fit-content;\n text-align: left;\n cursor: pointer;\n width: 100%;\n"])));
|
|
23
23
|
exports.StyledTooltipBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: ", ";\n z-index: ", ";\n ", "\n\n padding: 1rem;\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: 5px;\n z-index: 50000000;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap: break-word;\n"], ["\n display: ", ";\n z-index: ", ";\n ", "\n\n padding: 1rem;\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: 5px;\n z-index: 50000000;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap: break-word;\n"])), function (props) { return (props.show ? "block" : "none"); }, function (props) { return (props.show ? 5000000 : -5); }, (0, mixins_1.transition)("opacity 0.1s"), function (props) { return (props.invert ? greyColor10 : greyColor100); }, function (props) { return (props.invert ? greyColor100 : white); }, greyColor15, function (_a) {
|
|
24
24
|
var position = _a.position, fixPos = _a.fixPos;
|
|
25
25
|
return (0, util_1.positionTooltip)({ position: position, fixPos: fixPos });
|
|
26
26
|
});
|
|
27
|
-
exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: none;\n background: inherit;\n font-size: inherit;\n"], ["\n border: none;\n background: inherit;\n font-size: inherit;\n"])));
|
|
27
|
+
exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: none;\n background: inherit;\n font-size: inherit;\n width: 100%;\n"], ["\n border: none;\n background: inherit;\n font-size: inherit;\n width: 100%;\n"])));
|
|
28
28
|
exports.StyledArrowOutline = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __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) {
|
|
29
29
|
var position = _a.position;
|
|
30
30
|
return clipPaths[position];
|
|
@@ -109,6 +109,7 @@ exports.default = {
|
|
|
109
109
|
invert: false,
|
|
110
110
|
align: 'right',
|
|
111
111
|
popOutOfOverflowHiddenParent: false, // dev
|
|
112
|
+
tooltip: false,
|
|
112
113
|
},
|
|
113
114
|
parameters: {
|
|
114
115
|
docs: {
|
|
@@ -118,16 +119,16 @@ exports.default = {
|
|
|
118
119
|
};
|
|
119
120
|
var ActionMenu = function (args) {
|
|
120
121
|
args.actions = [
|
|
121
|
-
__assign({ display: args.action1 }, (args.optionIcon1 ? { icon: args.optionIcon1 } : {})),
|
|
122
|
-
__assign({ display: args.action2 }, (args.optionIcon2 ? { icon: args.optionIcon2 } : {})),
|
|
123
|
-
__assign({ display: args.action3 }, (args.optionIcon3 ? { icon: args.optionIcon3 } : {})),
|
|
122
|
+
__assign({ display: args.action1 }, (args.optionIcon1 ? { icon: args.optionIcon1, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
|
|
123
|
+
__assign({ display: args.action2 }, (args.optionIcon2 ? { icon: args.optionIcon2, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
|
|
124
|
+
__assign({ display: args.action3 }, (args.optionIcon3 ? { icon: args.optionIcon3, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
|
|
124
125
|
];
|
|
125
126
|
args.M = args.buttonSize === 'M';
|
|
126
127
|
return (react_1.default.createElement("div", { style: args.popOutOfOverflowHiddenParent
|
|
127
128
|
? { border: '2px solid lightgrey', height: '90vh', overflow: 'scroll' }
|
|
128
129
|
: {} },
|
|
129
130
|
react_1.default.createElement("div", { style: { height: '1000px' } },
|
|
130
|
-
react_1.default.createElement("div", { style: __assign({ padding: '4rem
|
|
131
|
+
react_1.default.createElement("div", { style: __assign({ padding: '4rem 40rem', background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.white }, (args.popOutOfOverflowHiddenParent
|
|
131
132
|
? {
|
|
132
133
|
background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.greyColor5,
|
|
133
134
|
height: '50px',
|