oolib 2.12.0 → 2.12.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 +6 -2
- package/dist/components/ActionMenu/utils.d.ts +1 -0
- package/dist/components/ActionMenu/utils.js +21 -0
- package/dist/components/Tooltip/index.js +1 -1
- package/dist/components/Tooltip/styled.js +1 -1
- package/dist/globalStyles/index.js +2 -2
- package/package.json +1 -1
|
@@ -38,11 +38,13 @@ exports.ActionMenu = void 0;
|
|
|
38
38
|
var react_1 = __importStar(require("react"));
|
|
39
39
|
var Buttons_1 = require("../Buttons");
|
|
40
40
|
var Typo_1 = require("../Typo");
|
|
41
|
+
var utils_1 = require("./utils");
|
|
41
42
|
var styled_1 = require("./styled");
|
|
42
43
|
var ActionMenu = function (_a) {
|
|
43
44
|
var icon = _a.icon, invert = _a.invert, actions = _a.actions, _b = _a.align, align = _b === void 0 ? 'left' : _b, buttonText = _a.buttonText, sideEffect = _a.sideEffect;
|
|
44
45
|
var actionMenuRef = (0, react_1.useRef)(null);
|
|
45
46
|
var _c = (0, react_1.useState)(false), showActions = _c[0], setShowActions = _c[1];
|
|
47
|
+
(0, utils_1.useTrackFocus)(actionMenuRef, setShowActions);
|
|
46
48
|
(0, react_1.useEffect)(function () {
|
|
47
49
|
// if you want this click to trigger a sideeffect in parent.
|
|
48
50
|
//e.g in table elem we set table overflow to unset when action menu is open
|
|
@@ -56,8 +58,10 @@ var ActionMenu = function (_a) {
|
|
|
56
58
|
setShowActions(!showActions);
|
|
57
59
|
} }),
|
|
58
60
|
react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({ unfolded: showActions }, { align: align, invert: invert }), actions.map(function (action) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
var ActionButton = action.buttonComp || styled_1.StyledActionBtn;
|
|
62
|
+
react_1.default.createElement(ActionButton, __assign({}, action.props, { onClick: function (ev) {
|
|
63
|
+
action.onClick && action.onClick(ev);
|
|
64
|
+
setShowActions(false);
|
|
61
65
|
}, key: action.display, invert: invert }),
|
|
62
66
|
react_1.default.createElement(Typo_1.SANS_2, null, action.display));
|
|
63
67
|
}))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function useTrackFocus(ref: any, setShowOptions: any, options?: {}): void;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useTrackFocus = void 0;
|
|
4
|
+
var react_1 = require("react");
|
|
5
|
+
var useTrackFocus = function (ref, setShowOptions, options) {
|
|
6
|
+
if (options === void 0) { options = {}; }
|
|
7
|
+
var _a = options.enabled, enabled = _a === void 0 ? true : _a;
|
|
8
|
+
var handleClickOutside = function (event) {
|
|
9
|
+
if (!enabled)
|
|
10
|
+
return;
|
|
11
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
12
|
+
//clicked outside editor
|
|
13
|
+
setShowOptions(false);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
(0, react_1.useEffect)(function () {
|
|
17
|
+
document.addEventListener('mousedown', handleClickOutside); //its very important for this to be mousedown. 'click' acts unpredictable
|
|
18
|
+
return function () { return document.removeEventListener('mousedown', handleClickOutside); };
|
|
19
|
+
}, [enabled]);
|
|
20
|
+
};
|
|
21
|
+
exports.useTrackFocus = useTrackFocus;
|
|
@@ -33,7 +33,7 @@ var Tooltip = function (_a) {
|
|
|
33
33
|
return (react_1.default.createElement(styled_1.StyledWrapper, { onMouseEnter: function () { return setShowTooltip(true); }, onMouseLeave: function () { return setShowTooltip(false); } },
|
|
34
34
|
children,
|
|
35
35
|
react_1.default.createElement(styled_1.StyledTooltip, { position: position, show: showTooltip, style: style },
|
|
36
|
-
react_1.default.createElement(Typo_1.SANS_2,
|
|
36
|
+
react_1.default.createElement(Typo_1.SANS_2, null, text),
|
|
37
37
|
react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
|
|
38
38
|
react_1.default.createElement(styled_1.StyledArrow, { position: position })))));
|
|
39
39
|
};
|
|
@@ -40,7 +40,7 @@ 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.StyledTooltip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n ", "\n\n padding:
|
|
43
|
+
exports.StyledTooltip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n ", "\n\n padding: 0.4rem 1rem;\n white-space: nowrap;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 2px;\n position: absolute;\n ", "\n\n \n"], ["\n ", ";\n ", "\n\n padding: 0.4rem 1rem;\n white-space: nowrap;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 2px;\n position: absolute;\n ", "\n\n \n"])), function (_a) {
|
|
44
44
|
var show = _a.show;
|
|
45
45
|
return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["opacity:1; z-index: 5;"], ["opacity:1; z-index: 5;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["opacity:0; z-index: -5;"], ["opacity:0; z-index: -5;"])));
|
|
46
46
|
}, (0, mixins_1.transition)('opacity', 0.1), white, greyColor15, function (_a) {
|
|
@@ -8,8 +8,8 @@ exports.GlobalStyles = void 0;
|
|
|
8
8
|
var styled_components_1 = require("styled-components");
|
|
9
9
|
var themes_1 = require("../themes");
|
|
10
10
|
var normalize_1 = require("./normalize");
|
|
11
|
-
require("../assets/fonts/style.css");
|
|
12
11
|
var mixins_1 = require("../themes/mixins");
|
|
12
|
+
require("../assets/fonts/style.css");
|
|
13
13
|
var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
|
|
14
|
-
exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n
|
|
14
|
+
exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n/*::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for vertical bars \n}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.4rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n", "{\n ::-webkit-scrollbar { \n width: 1rem;\n height: 0.7rem;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 0.5rem;\n }\n}*/\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n/*::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for vertical bars \n}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.4rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n", "{\n ::-webkit-scrollbar { \n width: 1rem;\n height: 0.7rem;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 0.5rem;\n }\n}*/\n \n"])), normalize_1.normalize, greyColor100, greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif, greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md'));
|
|
15
15
|
var templateObject_1;
|