oolib 2.36.0 → 2.37.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.
Files changed (8) hide show
  1. package/dist/components/BlockLabel/index.js +31 -4
  2. package/dist/components/BlockLabel/index.styled.d.ts +1 -0
  3. package/dist/components/BlockLabel/index.styled.js +3 -2
  4. package/dist/components/Tooltip/index.d.ts +3 -1
  5. package/dist/components/Tooltip/index.js +14 -27
  6. package/dist/components/Tooltip/styled.js +5 -5
  7. package/dist/index.js +1 -1
  8. package/package.json +1 -1
package/dist/components/BlockLabel/index.js CHANGED
@@ -1,10 +1,33 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
2
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
27
  };
5
28
  Object.defineProperty(exports, "__esModule", { value: true });
6
29
  exports.BlockLabel = void 0;
7
- var react_1 = __importDefault(require("react"));
30
+ var react_1 = __importStar(require("react"));
8
31
  var Typo_1 = require("../Typo");
9
32
  var InlineAlert_1 = require("../InlineAlert");
10
33
  var index_styled_1 = require("./index.styled");
@@ -15,7 +38,7 @@ var Tooltip_1 = require("../Tooltip");
15
38
  var phosphor_react_1 = require("phosphor-react");
16
39
  var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
17
40
  var BlockLabel = function (props) {
18
- var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, _a = props.hintsTitle, hintsTitle = _a === void 0 ? "Hints" : _a, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip;
41
+ var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, _a = props.hintsTitle, hintsTitle = _a === void 0 ? "Hints" : _a, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip, debugTooltip = props.debugTooltip;
19
42
  var shouldCompRender = label ||
20
43
  (!readOnly &&
21
44
  (sublabel ||
@@ -29,6 +52,7 @@ var BlockLabel = function (props) {
29
52
  var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 //this first condition seems like a proper hack..
30
53
  ? "danger"
31
54
  : errorMsgs[0].type || "danger";
55
+ var _b = (0, react_1.useState)(false), tooltipClicked = _b[0], setTooltipClicked = _b[1];
32
56
  return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
33
57
  react_1.default.createElement("div", { style: { display: "flex", gap: "1rem", alignItems: "center" } },
34
58
  (label || inputOnlyLabel) && (react_1.default.createElement(Typo_1.SANS_3, { invert: invert, semibold: true, capitalize: true }, label || inputOnlyLabel)),
@@ -36,8 +60,11 @@ var BlockLabel = function (props) {
36
60
  optional && !hideOptionalLabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)")),
37
61
  !readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null,
38
62
  infoTooltip &&
39
- react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || 'right' },
40
- react_1.default.createElement(phosphor_react_1.Info, { size: 18 }))),
63
+ react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || 'right', invert: invert, debug: debugTooltip },
64
+ react_1.default.createElement(index_styled_1.StyledInfoTooltipbutton, { onClick: function () { return setTooltipClicked(true); }, onBlur: function () { return setTooltipClicked(false); } }, !tooltipClicked ?
65
+ react_1.default.createElement(phosphor_react_1.Info, { size: 18, style: { color: invert && 'white' } })
66
+ :
67
+ react_1.default.createElement(phosphor_react_1.Info, { size: 18, weight: "fill", style: { color: invert && 'white' } })))),
41
68
  !readOnly &&
42
69
  sublabel &&
43
70
  (0, toArray_1.toArray)(sublabel).map(function (subL) { return (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, subL)); }))));
package/dist/components/BlockLabel/index.styled.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export const StyledBlockLabel: any;
2
+ export const StyledInfoTooltipbutton: any;
package/dist/components/BlockLabel/index.styled.js CHANGED
@@ -7,7 +7,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.StyledBlockLabel = void 0;
10
+ exports.StyledInfoTooltipbutton = exports.StyledBlockLabel = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 0rem;\n margin-bottom: 1rem;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 0rem;\n margin-bottom: 1rem;\n position: relative;\n"])));
13
- var templateObject_1;
13
+ exports.StyledInfoTooltipbutton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: none;\n background: none;\n outline: none;\n"], ["\n border: none;\n background: none;\n outline: none;\n"])));
14
+ var templateObject_1, templateObject_2;
package/dist/components/Tooltip/index.d.ts CHANGED
@@ -1,7 +1,9 @@
1
- export function Tooltip({ text, position, style, children, popOutOfOverflowHiddenParent }: {
1
+ export function Tooltip({ text, position, style, children, popOutOfOverflowHiddenParent, invert, debug }: {
2
2
  text: any;
3
3
  position?: string;
4
4
  style: any;
5
5
  children: any;
6
6
  popOutOfOverflowHiddenParent?: boolean;
7
+ invert?: boolean;
8
+ debug?: boolean;
7
9
  }): any;
package/dist/components/Tooltip/index.js CHANGED
@@ -29,47 +29,34 @@ var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflow
29
29
  var Typo_1 = require("../Typo");
30
30
  var styled_1 = require("./styled");
31
31
  var Tooltip = function (_a) {
32
- var text = _a.text, _b = _a.position, position = _b === void 0 ? 'top' : _b, style = _a.style, children = _a.children, _c = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _c === void 0 ? true : _c;
33
- var _d = (0, react_1.useState)(false), isHovered = _d[0], setIsHovered = _d[1];
34
- var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
35
- var _f = (0, react_1.useState)(false), isClicked = _f[0], setIsClicked = _f[1];
36
- var _g = (0, react_1.useState)(false), isTooltipOpen = _g[0], setIsTooltipOpen = _g[1];
32
+ var text = _a.text, _b = _a.position, position = _b === void 0 ? 'top' : _b, style = _a.style, children = _a.children, _c = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _c === void 0 ? true : _c, _d = _a.invert, invert = _d === void 0 ? false : _d, _e = _a.debug, debug = _e === void 0 ? false : _e;
33
+ var _f = (0, react_1.useState)(debug ? true : false), isClicked = _f[0], setIsClicked = _f[1];
34
+ var _g = (0, react_1.useState)(debug ? true : false), showTooltip = _g[0], setShowTooltip = _g[1];
37
35
  var targetRef = (0, react_1.useRef)(null);
38
36
  var _h = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), trackerRef = _h.trackerRef, applyFixedPos = _h.applyFixedPos, removeFixedPos = _h.removeFixedPos;
39
37
  (0, react_1.useEffect)(function () {
40
- if (isHovered || isFocused) {
38
+ if (showTooltip) {
41
39
  applyFixedPos();
42
40
  }
43
41
  else {
44
42
  removeFixedPos();
45
43
  }
46
- }, [isHovered, isFocused]);
47
- var ShowTooltip = function () {
48
- return (react_1.default.createElement(styled_1.StyledTooltip, { ref: trackerRef, isOpen: isTooltipOpen, position: position, show: isHovered, style: style },
49
- react_1.default.createElement(Typo_1.SANS_2, null, text),
50
- react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
51
- react_1.default.createElement(styled_1.StyledArrow, { position: position }))));
52
- };
44
+ }, [showTooltip]);
53
45
  return (react_1.default.createElement(styled_1.StyledWrapper, null,
54
46
  react_1.default.createElement(styled_1.StyledTooltipTarget, { onMouseEnter: function () {
55
47
  if (!isClicked) {
56
- setIsHovered(true);
48
+ setShowTooltip(true);
57
49
  }
58
50
  }, onMouseLeave: function () {
59
51
  if (!isClicked) {
60
- setIsHovered(false);
61
- }
62
- }, onClick: function () {
63
- if (isClicked) {
64
- setIsTooltipOpen(false);
52
+ setShowTooltip(false);
65
53
  }
66
- else {
67
- setIsTooltipOpen(true);
68
- }
69
- // setIsClicked(!isClicked);
70
- // setIsHovered(!isHovered);
71
- }, onFocus: function () { return setIsFocused(true); }, onBlur: function () { setIsFocused(false), setIsClicked(false); }, ref: targetRef, isFocused: isFocused, tabIndex: 0 }, children),
72
- isHovered && (react_1.default.createElement(ShowTooltip, null)),
73
- isFocused && (react_1.default.createElement(ShowTooltip, null))));
54
+ }, onClick: function () { setIsClicked(true), setShowTooltip(true); }, onBlur: function () { setIsClicked(false), setShowTooltip(false); }, ref: targetRef,
55
+ // isFocused={isFocused}
56
+ tabIndex: 0 }, children),
57
+ showTooltip && (react_1.default.createElement(styled_1.StyledTooltip, { ref: trackerRef, isOpen: showTooltip, position: position, show: showTooltip, style: style, invert: invert },
58
+ react_1.default.createElement(Typo_1.SANS_2, null, text),
59
+ react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
60
+ react_1.default.createElement(styled_1.StyledArrow, { position: position, invert: invert }))))));
74
61
  };
75
62
  exports.Tooltip = Tooltip;
package/dist/components/Tooltip/styled.js CHANGED
@@ -33,21 +33,21 @@ var themes_1 = require("../../themes");
33
33
  var mixins_1 = require("../../themes/mixins");
34
34
  var util_1 = require("./util");
35
35
  exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative; // made this wrapper with styled.component to ensure its\n width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n text-align: left;\n cursor: pointer;\n"], ["\n position: relative; // made this wrapper with styled.component to ensure its\n width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n text-align: left;\n cursor: pointer;\n"])));
36
- var greyColor15 = themes_1.colors.greyColor15, white = themes_1.colors.white;
36
+ var greyColor15 = themes_1.colors.greyColor15, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10;
37
37
  var clipPaths = {
38
38
  top: "0% 0%, 47% 65.4%, 52% 65.4%, 100% 0",
39
39
  bottom: '47% 34.6%, 50% 34.6%, 100% 100%, 0% 100%',
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\n padding: 0.4rem 1rem;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 2px;\n position: absolute;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap:break-word\n"], ["\n\n ", ";\n ", "\n\n padding: 0.4rem 1rem;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 2px;\n position: absolute;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap:break-word\n"])), function (_a) {
43
+ exports.StyledTooltip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n ", ";\n ", "\n\n padding: 0.4rem 1rem;\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: 5px;\n position: absolute;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap:break-word\n"], ["\n\n ", ";\n ", "\n\n padding: 0.4rem 1rem;\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: 5px;\n position: absolute;\n ", "\n width: max-content;\n max-width: 20rem;\n word-wrap:break-word\n"])), function (_a) {
44
44
  var show = _a.show;
45
45
  return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["display:'visible'; z-index: 5000;"], ["display:'visible'; z-index: 5000;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["display:'none'; z-index: -5;"], ["display:'none'; z-index: -5;"])));
46
- }, (0, mixins_1.transition)('opacity 0.1s'), white, greyColor15, function (_a) {
46
+ }, (0, mixins_1.transition)('opacity 0.1s'), function (props) { return props.invert ? greyColor100 : greyColor10; }, function (props) { return props.invert ? white : greyColor100; }, greyColor15, function (_a) {
47
47
  var position = _a.position;
48
48
  return (0, util_1.positionTooltip)(position);
49
49
  });
50
- exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: none;\n background: inherit;\n font-size: inherit;\n color: inherit;\n cursor: inherit;\n display: flex;\n outline : ", ";\n border-radius: 2px;\n"], ["\n border: none;\n background: inherit;\n font-size: inherit;\n color: inherit;\n cursor: inherit;\n display: flex;\n outline : ", ";\n border-radius: 2px;\n"])), function (props) { return props.isFocused ? '2px solid black !important' : 'none'; });
50
+ exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: none;\n background: inherit;\n font-size: inherit;\n /* color: inherit; */\n cursor: inherit;\n display: flex;\n /* background : ", "; */\n /* color : ", "; */\n /* border-radius : ", "; */\n /* border-radius: 2px; */\n"], ["\n border: none;\n background: inherit;\n font-size: inherit;\n /* color: inherit; */\n cursor: inherit;\n display: flex;\n /* background : ", "; */\n /* color : ", "; */\n /* border-radius : ", "; */\n /* border-radius: 2px; */\n"])), function (props) { return props.isFocused ? greyColor100 : 'none'; }, function (props) { return props.isFocused ? 'white' : 'inherit'; }, function (props) { return props.isFocused ? '50%' : 'none'; });
51
51
  exports.StyledArrowOutline = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __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) {
52
52
  var position = _a.position;
53
53
  return clipPaths[position];
@@ -55,7 +55,7 @@ exports.StyledArrowOutline = styled_components_1.default.span(templateObject_6 |
55
55
  var position = _a.position;
56
56
  return (0, util_1.positionArrowBorder)(position);
57
57
  });
58
- exports.StyledArrow = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject([" // the the white part\n background-color: ", ";\n display:inline-block;\n width: 0.85rem;\n height: 0.85rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "\n"], [" // the the white part\n background-color: ", ";\n display:inline-block;\n width: 0.85rem;\n height: 0.85rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "\n"])), white, function (_a) {
58
+ exports.StyledArrow = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject([" // the the white part\n background-color: ", ";\n color: ", ";\n display:inline-block;\n width: 0.85rem;\n height: 0.85rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "\n"], [" // the the white part\n background-color: ", ";\n color: ", ";\n display:inline-block;\n width: 0.85rem;\n height: 0.85rem;\n position: absolute;\n clip-path: polygon(", ");\n ", "\n"])), function (props) { return props.invert ? greyColor100 : greyColor10; }, function (props) { return props.invert ? white : greyColor100; }, function (_a) {
59
59
  var position = _a.position;
60
60
  return clipPaths[position];
61
61
  }, function (_a) {
package/dist/index.js CHANGED
@@ -69,7 +69,7 @@ var ModalLarge_1 = require("./components/Modals/ModalLarge");
69
69
  Object.defineProperty(exports, "ModalLarge", { enumerable: true, get: function () { return ModalLarge_1.ModalLarge; } });
70
70
  var ModalSmall_1 = require("./components/Modals/ModalSmall");
71
71
  Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
72
- // context
72
+ //// context
73
73
  var contextApi_1 = require("./components/Hints/contextApi");
74
74
  Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });
75
75
  // export this
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.36.0",
3
+ "version": "2.37.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",