oolib 2.130.0 → 2.131.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.js +2 -2
- package/dist/components/ActionMenu/styled.d.ts +1 -0
- package/dist/components/ActionMenu/styled.js +6 -3
- package/dist/components/Tooltip/styled.js +1 -1
- package/dist/globalStyles/globalVariables.js +1 -1
- package/dist/stories/ActionMenu.stories.js +4 -3
- package/package.json +1 -1
|
@@ -99,7 +99,7 @@ var ActionMenu = function (_a) {
|
|
|
99
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 },
|
|
100
100
|
react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
|
|
101
101
|
var _a, _b, _c;
|
|
102
|
-
var optionContent = (react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {
|
|
102
|
+
var optionContent = (react_1.default.createElement(styled_1.StyledOption, __assign({ disabled: action.disabled }, action, { onClick: function (e) {
|
|
103
103
|
var _a;
|
|
104
104
|
e.preventDefault();
|
|
105
105
|
e.stopPropagation();
|
|
@@ -108,7 +108,7 @@ var ActionMenu = function (_a) {
|
|
|
108
108
|
}, key: action.display, invert: invert }),
|
|
109
109
|
action.icon && genOptionIcon(action.icon),
|
|
110
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)));
|
|
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", invert: invert }, optionContent)) : (optionContent)));
|
|
112
112
|
}))));
|
|
113
113
|
};
|
|
114
114
|
return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
|
|
@@ -21,5 +21,6 @@ export declare const StyledActionMenuOpsWrapper: import("styled-components").Sty
|
|
|
21
21
|
}, never>;
|
|
22
22
|
export declare const StyledOption: import("styled-components").StyledComponent<"button", any, {
|
|
23
23
|
invert?: boolean;
|
|
24
|
+
disabled?: boolean;
|
|
24
25
|
}, never>;
|
|
25
26
|
export {};
|
|
@@ -94,8 +94,11 @@ exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(templateObj
|
|
|
94
94
|
var invert = _a.invert;
|
|
95
95
|
return (invert ? greyColor80 : white);
|
|
96
96
|
});
|
|
97
|
-
exports.StyledOption = styled_components_1.default.button(
|
|
97
|
+
exports.StyledOption = styled_components_1.default.button(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n white-space: nowrap;\n border: none;\n \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\n"], ["\n white-space: nowrap;\n border: none;\n \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\n"])), function (_a) {
|
|
98
98
|
var invert = _a.invert;
|
|
99
99
|
return (invert ? white : greyColor100);
|
|
100
|
-
}, (0, mixins_1.transition)("background-color"),
|
|
101
|
-
var
|
|
100
|
+
}, (0, mixins_1.transition)("background-color"), function (_a) {
|
|
101
|
+
var disabled = _a.disabled, invert = _a.invert;
|
|
102
|
+
return disabled ? (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject([" \n pointer-events: none;\n color: ", "\n "], [" \n pointer-events: none;\n color: ", "\n "])), themes_1.colors.greyColor40) : (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject([" \n cursor: pointer;\n ", ""], [" \n cursor: pointer;\n ", ""])), globalVariables_1.globalHoverOnWhiteBG);
|
|
103
|
+
});
|
|
104
|
+
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, templateObject_23, templateObject_24;
|
|
@@ -19,7 +19,7 @@ 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 width:
|
|
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: inherit;\n"], ["\n position: relative;\n width: fit-content;\n text-align: left;\n cursor: pointer;\n width: inherit;\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 });
|
|
@@ -31,6 +31,6 @@ exports.globalLightboxStyle = (0, styled_components_1.css)(templateObject_4 || (
|
|
|
31
31
|
}, mixins_1.boxShadow1);
|
|
32
32
|
exports.globalHoverOnWhiteBG = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n &:hover {\n background-color: ", ";\n }\n"], ["\n ", ";\n &:hover {\n background-color: ", ";\n }\n"])), (0, mixins_1.transition)('background-color'), function (_a) {
|
|
33
33
|
var invert = _a.invert;
|
|
34
|
-
return invert ? themes_1.colors.
|
|
34
|
+
return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor5;
|
|
35
35
|
});
|
|
36
36
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -120,15 +120,16 @@ exports.default = {
|
|
|
120
120
|
var ActionMenu = function (args) {
|
|
121
121
|
args.actions = [
|
|
122
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" } } : {})),
|
|
123
|
+
__assign({ display: args.action2 }, (args.optionIcon2 ? { icon: args.optionIcon2, disabled: true, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
|
|
124
124
|
__assign({ display: args.action3 }, (args.optionIcon3 ? { icon: args.optionIcon3, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
|
|
125
125
|
];
|
|
126
126
|
args.M = args.buttonSize === 'M';
|
|
127
|
+
console.log({ nfaknjfasfs: args.invert });
|
|
127
128
|
return (react_1.default.createElement("div", { style: args.popOutOfOverflowHiddenParent
|
|
128
129
|
? { border: '2px solid lightgrey', height: '90vh', overflow: 'scroll' }
|
|
129
130
|
: {} },
|
|
130
131
|
react_1.default.createElement("div", { style: { height: '1000px' } },
|
|
131
|
-
react_1.default.createElement("div", { style: __assign({ padding: '
|
|
132
|
+
react_1.default.createElement("div", { style: __assign({ padding: '10rem 40rem', background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.white }, (args.popOutOfOverflowHiddenParent
|
|
132
133
|
? {
|
|
133
134
|
background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.greyColor5,
|
|
134
135
|
height: '50px',
|
|
@@ -136,6 +137,6 @@ var ActionMenu = function (args) {
|
|
|
136
137
|
overflow: "hidden"
|
|
137
138
|
}
|
|
138
139
|
: {})) },
|
|
139
|
-
react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: args.actions })))));
|
|
140
|
+
react_1.default.createElement(ActionMenu_1.ActionMenu, __assign({ actions: args.actions }, args))))));
|
|
140
141
|
};
|
|
141
142
|
exports.ActionMenu = ActionMenu;
|