akeneo-design-system 0.1.218 → 0.1.220

package/lib/components/SectionTitle/SectionTitle.js

@@ -76,11 +76,7 @@ var SectionTitle = function (_a) {
             });
         }
         if ((0, react_1.isValidElement)(child) && child.type === components_1.Button) {
-            return (0, react_1.cloneElement)(child, {
-                level: 'tertiary',
-                size: 'small',
-                ghost: true,
-            });
+            return (0, react_1.cloneElement)(child, __assign({ level: 'tertiary', size: 'small', ghost: true }, child.props));
         }
         return child;
     });

package/lib/components/SectionTitle/SectionTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionTitle.js","sourceRoot":"","sources":["../../../src/components/SectionTitle/SectionTitle.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SectionTitle.js","sourceRoot":"","sources":["../../../src/components/SectionTitle/SectionTitle.tsx"],"names":[],"mappings":"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"}

package/lib/components/Tooltip/Tooltip.d.ts

@@ -1,9 +1,11 @@
-import React from 'react';
-declare const Tooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "width" | "direction" | "children" | "zIndex" | "iconSize"> & {
-    direction?: "left" | "right" | "bottom" | "top" | undefined;
-    zIndex?: number | undefined;
-    iconSize?: number | undefined;
-    children: React.ReactNode;
-    width?: number | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+import { HTMLAttributes, ReactNode } from 'react';
+import { Override } from '../../shared';
+declare type Direction = 'top' | 'right' | 'bottom' | 'left';
+declare type TooltipProps = Override<HTMLAttributes<HTMLDivElement>, {
+    direction?: Direction;
+    iconSize?: number;
+    children: ReactNode;
+    width?: number;
+}>;
+declare const Tooltip: ({ direction, iconSize, width, children, ...rest }: TooltipProps) => JSX.Element;
 export { Tooltip };

package/lib/components/Tooltip/Tooltip.js

@@ -50,6 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var icons_1 = require("../../icons");
 var theme_1 = require("../../theme");
@@ -62,36 +63,67 @@ var TooltipContainer = styled_components_1.default.div(templateObject_1 || (temp
     var size = _a.size;
     return size + TooltipIconMargin * 2;
 });
-var TooltipIcon = (0, styled_components_1.default)(icons_1.HelpPlainIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", "px;\n"], ["\n  margin: ", "px;\n"])), TooltipIconMargin);
-var TooltipContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 4px;\n  left: 50%;\n  padding: 10px;\n  width: ", "px;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n  font-size: ", ";\n  line-height: 1;\n  text-transform: none;\n  z-index: ", ";\n  box-shadow: 0 0 16px rgba(89, 146, 199, 0.25);\n\n  ", "\n"], ["\n  position: absolute;\n  border-radius: 4px;\n  left: 50%;\n  padding: 10px;\n  width: ", "px;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n  font-size: ", ";\n  line-height: 1;\n  text-transform: none;\n  z-index: ", ";\n  box-shadow: 0 0 16px rgba(89, 146, 199, 0.25);\n\n  ", "\n"])), function (_a) {
+var TooltipIcon = (0, styled_components_1.default)(icons_1.HelpPlainIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", "px;\n  color: ", ";\n"], ["\n  margin: ", "px;\n  color: ", ";\n"])), TooltipIconMargin, (0, theme_1.getColor)('blue', 100));
+var TooltipContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  position: fixed;\n  z-index: 1901;\n  border-radius: 4px;\n  padding: 10px;\n  width: ", "px;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n  font-size: ", ";\n  line-height: 1;\n  text-transform: none;\n  box-shadow: 0 0 16px rgba(89, 146, 199, 0.25);\n  top: ", "px;\n  left: ", "px;\n  opacity: ", ";\n"], ["\n  ", "\n  position: fixed;\n  z-index: 1901;\n  border-radius: 4px;\n  padding: 10px;\n  width: ", "px;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n  font-size: ", ";\n  line-height: 1;\n  text-transform: none;\n  box-shadow: 0 0 16px rgba(89, 146, 199, 0.25);\n  top: ", "px;\n  left: ", "px;\n  opacity: ", ";\n"])), theme_1.CommonStyle, function (_a) {
     var width = _a.width;
     return width;
 }, (0, theme_1.getColor)('grey', 120), (0, theme_1.getColor)('blue', 10), (0, theme_1.getColor)('blue', 40), (0, theme_1.getFontSize)('default'), function (_a) {
-    var zIndex = _a.zIndex;
-    return zIndex;
+    var top = _a.top;
+    return top;
 }, function (_a) {
-    var direction = _a.direction;
+    var left = _a.left;
+    return left;
+}, function (_a) {
+    var top = _a.top, left = _a.left;
+    return (-1 === top && -1 === left ? 0 : 1);
+});
+var computePosition = function (direction, parentRef, elementRef) {
+    if (undefined === parentRef ||
+        undefined === elementRef ||
+        null === parentRef.current ||
+        null === elementRef.current) {
+        return [-1, -1];
+    }
+    var _a = parentRef.current.getBoundingClientRect(), parentTop = _a.top, parentLeft = _a.left, parentWidth = _a.width, parentHeight = _a.height;
+    var _b = elementRef.current.getBoundingClientRect(), elementWidth = _b.width, elementHeight = _b.height;
+    var relativeCenterTop = parentTop + parentHeight / 2 - elementHeight / 2;
+    var relativeCenterLeft = parentLeft + parentWidth / 2 - elementWidth / 2;
     switch (direction) {
+        default:
+        case 'top':
+            return [parentTop - elementHeight, relativeCenterLeft];
+        case 'right':
+            return [relativeCenterTop, parentLeft + parentWidth];
         case 'bottom':
-            return "\n                top: calc(100%);\n                transform: translateX(-50%);\n              ";
+            return [parentTop + parentHeight, relativeCenterLeft];
         case 'left':
-            return "\n                left: auto;\n                top: 50%;\n                right: calc(100%);\n                transform: translateY(-50%);\n              ";
-        case 'right':
-            return "\n                top: 50%;\n                left: calc(100%);\n                transform: translateY(-50%);\n              ";
-        default:
-            return "\n                bottom: calc(100%);\n                transform: translateX(-50%);\n              ";
+            return [relativeCenterTop, parentLeft - elementWidth];
     }
-});
-var Tooltip = (0, react_1.forwardRef)(function (_a, forwardedRef) {
-    var _b = _a.direction, direction = _b === void 0 ? 'top' : _b, _c = _a.zIndex, zIndex = _c === void 0 ? 100 : _c, _d = _a.iconSize, iconSize = _d === void 0 ? 24 : _d, _e = _a.width, width = _e === void 0 ? 200 : _e, children = _a.children, rest = __rest(_a, ["direction", "zIndex", "iconSize", "width", "children"]);
-    var _f = (0, react_1.useState)(false), visible = _f[0], setVisible = _f[1];
-    var showTooltip = function () { return setVisible(true); };
-    var hideTooltip = function () { return setVisible(false); };
-    var theme = (0, hooks_1.useTheme)();
-    return (react_1.default.createElement(TooltipContainer, __assign({ ref: forwardedRef }, rest, { size: iconSize, onMouseEnter: showTooltip, onMouseLeave: hideTooltip }),
-        react_1.default.createElement(TooltipIcon, { size: iconSize, color: theme.color.blue100 }),
-        visible && (react_1.default.createElement(TooltipContent, { direction: direction, zIndex: zIndex, width: width }, children))));
-});
+};
+var Tooltip = function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? 'top' : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 24 : _c, _d = _a.width, width = _d === void 0 ? 200 : _d, children = _a.children, rest = __rest(_a, ["direction", "iconSize", "width", "children"]);
+    var _e = (0, hooks_1.useBooleanState)(false), isVisible = _e[0], showTooltip = _e[1], hideTooltip = _e[2];
+    var portalNode = document.createElement('div');
+    portalNode.setAttribute('id', 'tooltip-root');
+    var portalRef = (0, react_1.useRef)(portalNode);
+    var parentRef = (0, react_1.useRef)(null);
+    var contentRef = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)([0, 0]), position = _f[0], setPosition = _f[1];
+    (0, react_1.useEffect)(function () {
+        document.body.appendChild(portalRef.current);
+        return function () {
+            document.body.removeChild(portalRef.current);
+        };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        setPosition(computePosition(direction, parentRef, contentRef));
+    }, [children, direction, parentRef, contentRef, isVisible]);
+    var top = position[0], left = position[1];
+    return (react_1.default.createElement(TooltipContainer, __assign({ ref: parentRef, role: "tooltip" }, rest, { size: iconSize, onMouseEnter: showTooltip, onMouseLeave: hideTooltip }),
+        react_1.default.createElement(TooltipIcon, { size: iconSize }),
+        isVisible &&
+            (0, react_dom_1.createPortal)(react_1.default.createElement(TooltipContent, { ref: contentRef, direction: direction, width: width, top: top, left: left }, children), portalRef.current)));
+};
 exports.Tooltip = Tooltip;
 var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=Tooltip.js.map

package/lib/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,wEAAuC;AAEvC,qCAA0C;AAC1C,qCAAqE;AACrE,qCAAqC;AAErC,IAAM,iBAAiB,GAAG,CAAC,CAAC;AAC5B,IAAM,gBAAgB,GAAG,2BAAM,CAAC,GAAG,6JAAgB,qCAEvC,EAAwC,gBACzC,EAAwC,iCAElD,KAHW,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,IAAI,GAAG,iBAAiB,GAAG,CAAC;AAA5B,CAA4B,EACzC,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,IAAI,GAAG,iBAAiB,GAAG,CAAC;AAA5B,CAA4B,CAElD,CAAC;AAEF,IAAM,WAAW,GAAG,IAAA,2BAAM,EAAC,qBAAa,CAAC,0FAAA,cAC7B,EAAiB,OAC5B,KADW,iBAAiB,CAC5B,CAAC;AAEF,IAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,qXAAwE,2FAK9F,EAAkB,gBAClB,EAAqB,mBAChB,EAAoB,yBACd,EAAoB,kBAC3B,EAAsB,4DAGxB,EAAoB,2DAG7B,EA0BD,IACF,KArCU,UAAC,EAAO;QAAN,KAAK,WAAA;IAAM,OAAA,KAAK;AAAL,CAAK,EAClB,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAChB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACd,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAC3B,IAAA,mBAAW,EAAC,SAAS,CAAC,EAGxB,UAAC,EAAQ;QAAP,MAAM,YAAA;IAAM,OAAA,MAAM;AAAN,CAAM,EAG7B,UAAC,EAAW;QAAV,SAAS,eAAA;IACX,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ;YACX,OAAO,kGAGA,CAAC;QACV,KAAK,MAAM;YACT,OAAO,4JAKA,CAAC;QACV,KAAK,OAAO;YACV,OAAO,8HAIA,CAAC;QACV;YACE,OAAO,qGAGA,CAAC;KACX;AACH,CAAC,CACF,CAAC;AA4BF,IAAM,OAAO,GAAG,IAAA,kBAAU,EACxB,UACE,EAA8F,EAC9F,YAAiC;IADhC,IAAA,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,cAAY,EAAZ,MAAM,mBAAG,GAAG,KAAA,EAAE,gBAAa,EAAb,QAAQ,mBAAG,EAAE,KAAA,EAAE,aAAW,EAAX,KAAK,mBAAG,GAAG,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAA/E,wDAAgF,CAAD;IAGzE,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAC9C,IAAM,WAAW,GAAG,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,CAAC;IAC3C,IAAM,WAAW,GAAG,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,CAAC;IAC5C,IAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAEzB,OAAO,CACL,8BAAC,gBAAgB,aACf,GAAG,EAAE,YAAY,IACb,IAAI,IACR,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,WAAW;QAEzB,8BAAC,WAAW,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,GAAI;QAC1D,OAAO,IAAI,CACV,8BAAC,cAAc,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,IAC/D,QAAQ,CACM,CAClB,CACgB,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,0BAAO"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+F;AAC/F,uCAAuC;AACvC,wEAAuC;AAEvC,qCAA0C;AAC1C,qCAAkF;AAClF,qCAA4C;AAI5C,IAAM,iBAAiB,GAAG,CAAC,CAAC;AAC5B,IAAM,gBAAgB,GAAG,2BAAM,CAAC,GAAG,6JAAgB,qCAEvC,EAAwC,gBACzC,EAAwC,iCAElD,KAHW,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,IAAI,GAAG,iBAAiB,GAAG,CAAC;AAA5B,CAA4B,EACzC,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,IAAI,GAAG,iBAAiB,GAAG,CAAC;AAA5B,CAA4B,CAElD,CAAC;AAEF,IAAM,WAAW,GAAG,IAAA,2BAAM,EAAC,qBAAa,CAAC,0GAAA,cAC7B,EAAiB,gBAClB,EAAqB,KAC/B,KAFW,iBAAiB,EAClB,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAC/B,CAAC;AAEF,IAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,qZAAsF,MACnH,EAAW,4FAKJ,EAAkB,gBAClB,EAAqB,mBAChB,EAAoB,yBACd,EAAoB,kBAC3B,EAAsB,0GAI5B,EAAc,eACb,EAAgB,kBACb,EAAoD,KAChE,KAhBG,mBAAW,EAKJ,UAAC,EAAO;QAAN,KAAK,WAAA;IAAM,OAAA,KAAK;AAAL,CAAK,EAClB,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAChB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACd,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAC3B,IAAA,mBAAW,EAAC,SAAS,CAAC,EAI5B,UAAC,EAAK;QAAJ,GAAG,SAAA;IAAM,OAAA,GAAG;AAAH,CAAG,EACb,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,IAAI;AAAJ,CAAI,EACb,UAAC,EAAW;QAAV,GAAG,SAAA,EAAE,IAAI,UAAA;IAAM,OAAA,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAAnC,CAAmC,CAChE,CAAC;AAEF,IAAM,eAAe,GAAG,UACtB,SAAoB,EACpB,SAAqC,EACrC,UAAsC;IAEtC,IACE,SAAS,KAAK,SAAS;QACvB,SAAS,KAAK,UAAU;QACxB,IAAI,KAAK,SAAS,CAAC,OAAO;QAC1B,IAAI,KAAK,UAAU,CAAC,OAAO,EAC3B;QACA,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;KACjB;IAEK,IAAA,KAKF,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,EAJtC,SAAS,SAAA,EACR,UAAU,UAAA,EACT,WAAW,WAAA,EACV,YAAY,YACuB,CAAC;IAExC,IAAA,KAA+C,UAAU,CAAC,OAAO,CAAC,qBAAqB,EAAE,EAAjF,YAAY,WAAA,EAAU,aAAa,YAA8C,CAAC;IAEhG,IAAM,iBAAiB,GAAG,SAAS,GAAG,YAAY,GAAG,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC;IAC3E,IAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,CAAC;IAE3E,QAAQ,SAAS,EAAE;QACjB,QAAQ;QACR,KAAK,KAAK;YACR,OAAO,CAAC,SAAS,GAAG,aAAa,EAAE,kBAAkB,CAAC,CAAC;QACzD,KAAK,OAAO;YACV,OAAO,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,CAAC,CAAC;QACvD,KAAK,QAAQ;YACX,OAAO,CAAC,SAAS,GAAG,YAAY,EAAE,kBAAkB,CAAC,CAAC;QACxD,KAAK,MAAM;YACT,OAAO,CAAC,iBAAiB,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC;KACzD;AACH,CAAC,CAAC;AA2BF,IAAM,OAAO,GAAG,UAAC,EAAgF;IAA/E,IAAA,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,gBAAa,EAAb,QAAQ,mBAAG,EAAE,KAAA,EAAE,aAAW,EAAX,KAAK,mBAAG,GAAG,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAAjE,8CAAkE,CAAD;IAC1E,IAAA,KAAwC,IAAA,uBAAe,EAAC,KAAK,CAAC,EAA7D,SAAS,QAAA,EAAE,WAAW,QAAA,EAAE,WAAW,QAA0B,CAAC;IACrE,IAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC9C,IAAM,SAAS,GAAG,IAAA,cAAM,EAAiB,UAAU,CAAC,CAAC;IACrD,IAAM,SAAS,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC/C,IAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC1C,IAAA,KAA0B,IAAA,gBAAQ,EAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAnD,QAAQ,QAAA,EAAE,WAAW,QAA8B,CAAC;IAE3D,IAAA,iBAAS,EAAC;QACR,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAE7C,OAAO;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC;QACR,WAAW,CAAC,eAAe,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAErD,IAAA,GAAG,GAAU,QAAQ,GAAlB,EAAE,IAAI,GAAI,QAAQ,GAAZ,CAAa;IAE7B,OAAO,CACL,8BAAC,gBAAgB,aACf,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,SAAS,IACV,IAAI,IACR,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,WAAW;QAEzB,8BAAC,WAAW,IAAC,IAAI,EAAE,QAAQ,GAAI;QAC9B,SAAS;YACR,IAAA,wBAAY,EACV,8BAAC,cAAc,IAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,IACtF,QAAQ,CACM,EACjB,SAAS,CAAC,OAAO,CAClB,CACc,CACpB,CAAC;AACJ,CAAC,CAAC;AAEM,0BAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "0.1.218",
+  "version": "0.1.220",
   "description": "Akeneo design system",
   "main": "lib/index.js",
   "scripts": {

package/src/components/SectionTitle/SectionTitle.stories.mdx

@@ -51,7 +51,7 @@ Use this component only for title, not for description or help message.
       <SectionTitle.Information>10 results</SectionTitle.Information>
       <SectionTitle.Separator />
       <Button>Action</Button>
-      <Button>Action</Button>
+      <Button level="danger">Action</Button>
       <IconButton icon={<MoreIcon />} title="More" />
     </SectionTitle>
   </Story>

package/src/components/SectionTitle/SectionTitle.tsx

@@ -94,6 +94,7 @@ const SectionTitle = ({children, ...rest}: SectionTitleProps) => {
         level: 'tertiary',
         size: 'small',
         ghost: true,
+        ...child.props,
       });
     }
 

package/src/components/Tooltip/Tooltip.stories.mdx

@@ -1,50 +1,43 @@
 import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
 import {Tooltip} from './Tooltip.tsx';
 
-<Meta
-  title="Components/Tooltip"
-  component={Tooltip}
-  args={{direction: 'top', content: 'Tooltip content'}}
-/>
+<Meta title="Components/Tooltip" component={Tooltip} args={{direction: 'top', content: 'Tooltip content'}} />
 
 # Tooltip
 
 ## Usage
 
-It’s a complementary information that will help the user better understand what he sees / reads (e.g. definition, explication concerning the UI / wording)
+It's a complementary information that will help the user better understand what he sees / reads (e.g. definition, explication concerning the UI / wording)
 
 👍 **Good reasons to use the tooltip :**
 
 - There are too many helpers in the page, it would blur the readability
-- There isn’t enough space in the page to integrate a helper, so we need an overlay
+- There isn't enough space in the page to integrate a helper, so we need an overlay
 
 👎 **Bad reasons to use the tooltip :**
 
-- It’s an important guiding information to navigate, enrich or complete a task (use a helper instead)
-- I find it more beautiful (it shouldn’t matter first)
-- It’s an error explanation (this needs to be in a helper)
-
+- It's an important guiding information to navigate, enrich or complete a task (use a helper instead)
+- I find it more beautiful (it shouldn't matter first)
+- It's an error explanation (this needs to be in a helper)
 
 ## Playground
 
 <Canvas>
   <Story
-  name="Standard"
-  parameters={{
+    name="Standard"
+    parameters={{
       layout: 'centered',
     }}
     decorators={[
-      (Story) => (
+      Story => (
         <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '200px'}}>
           <Story />
         </div>
       ),
     ]}
-   >
+  >
     {args => {
-      return <Tooltip {...args}>
-       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      </Tooltip>;
+      return <Tooltip {...args}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Tooltip>;
     }}
   </Story>
 </Canvas>

package/src/components/Tooltip/Tooltip.tsx

@@ -1,9 +1,12 @@
-import React, {forwardRef, Ref, HTMLAttributes, useState} from 'react';
+import React, {HTMLAttributes, ReactNode, useRef, useEffect, RefObject, useState} from 'react';
+import {createPortal} from 'react-dom';
 import styled from 'styled-components';
 import {Override} from '../../shared';
 import {HelpPlainIcon} from '../../icons';
-import {AkeneoThemedProps, getColor, getFontSize} from '../../theme';
-import {useTheme} from '../../hooks';
+import {AkeneoThemedProps, CommonStyle, getColor, getFontSize} from '../../theme';
+import {useBooleanState} from '../../hooks';
+
+type Direction = 'top' | 'right' | 'bottom' | 'left';
 
 const TooltipIconMargin = 5;
 const TooltipContainer = styled.div<{size: number}>`
@@ -15,12 +18,14 @@ const TooltipContainer = styled.div<{size: number}>`
 
 const TooltipIcon = styled(HelpPlainIcon)`
   margin: ${TooltipIconMargin}px;
+  color: ${getColor('blue', 100)};
 `;
 
-const TooltipContent = styled.div<{direction: string; zIndex: number; width: number} & AkeneoThemedProps>`
-  position: absolute;
+const TooltipContent = styled.div<{direction: Direction; width: number; top: number; left: number} & AkeneoThemedProps>`
+  ${CommonStyle}
+  position: fixed;
+  z-index: 1901;
   border-radius: 4px;
-  left: 50%;
   padding: 10px;
   width: ${({width}) => width}px;
   color: ${getColor('grey', 120)};
@@ -29,91 +34,118 @@ const TooltipContent = styled.div<{direction: string; zIndex: number; width: num
   font-size: ${getFontSize('default')};
   line-height: 1;
   text-transform: none;
-  z-index: ${({zIndex}) => zIndex};
   box-shadow: 0 0 16px rgba(89, 146, 199, 0.25);
-
-  ${({direction}) => {
-    switch (direction) {
-      case 'bottom':
-        return `
-                top: calc(100%);
-                transform: translateX(-50%);
-              `;
-      case 'left':
-        return `
-                left: auto;
-                top: 50%;
-                right: calc(100%);
-                transform: translateY(-50%);
-              `;
-      case 'right':
-        return `
-                top: 50%;
-                left: calc(100%);
-                transform: translateY(-50%);
-              `;
-      default:
-        return `
-                bottom: calc(100%);
-                transform: translateX(-50%);
-              `;
-    }
-  }}
+  top: ${({top}) => top}px;
+  left: ${({left}) => left}px;
+  opacity: ${({top, left}) => (-1 === top && -1 === left ? 0 : 1)};
 `;
 
+const computePosition = (
+  direction: Direction,
+  parentRef?: RefObject<HTMLDivElement>,
+  elementRef?: RefObject<HTMLDivElement>
+): number[] => {
+  if (
+    undefined === parentRef ||
+    undefined === elementRef ||
+    null === parentRef.current ||
+    null === elementRef.current
+  ) {
+    return [-1, -1];
+  }
+
+  const {
+    top: parentTop,
+    left: parentLeft,
+    width: parentWidth,
+    height: parentHeight,
+  } = parentRef.current.getBoundingClientRect();
+
+  const {width: elementWidth, height: elementHeight} = elementRef.current.getBoundingClientRect();
+
+  const relativeCenterTop = parentTop + parentHeight / 2 - elementHeight / 2;
+  const relativeCenterLeft = parentLeft + parentWidth / 2 - elementWidth / 2;
+
+  switch (direction) {
+    default:
+    case 'top':
+      return [parentTop - elementHeight, relativeCenterLeft];
+    case 'right':
+      return [relativeCenterTop, parentLeft + parentWidth];
+    case 'bottom':
+      return [parentTop + parentHeight, relativeCenterLeft];
+    case 'left':
+      return [relativeCenterTop, parentLeft - elementWidth];
+  }
+};
+
 type TooltipProps = Override<
   HTMLAttributes<HTMLDivElement>,
   {
     /**
-     * Define the direction in which the tooltip will be rendered
-     */
-    direction?: 'top' | 'right' | 'bottom' | 'left';
-    /**
-     * Define the position order of the tooltip
+     * Define the direction in which the tooltip will be rendered.
      */
-    zIndex?: number;
+    direction?: Direction;
+
     /**
-     * Define the icon size
+     * Define the icon size.
      */
     iconSize?: number;
+
     /**
-     * Content of the tooltip
+     * Content of the tooltip.
      */
-    children: React.ReactNode;
+    children: ReactNode;
+
     /**
-     * Define the width of the tooltip
+     * Define the width of the tooltip.
      */
     width?: number;
   }
 >;
 
-const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
-  (
-    {direction = 'top', zIndex = 100, iconSize = 24, width = 200, children, ...rest}: TooltipProps,
-    forwardedRef: Ref<HTMLDivElement>
-  ) => {
-    const [visible, setVisible] = useState(false);
-    const showTooltip = () => setVisible(true);
-    const hideTooltip = () => setVisible(false);
-    const theme = useTheme();
-
-    return (
-      <TooltipContainer
-        ref={forwardedRef}
-        {...rest}
-        size={iconSize}
-        onMouseEnter={showTooltip}
-        onMouseLeave={hideTooltip}
-      >
-        <TooltipIcon size={iconSize} color={theme.color.blue100} />
-        {visible && (
-          <TooltipContent direction={direction} zIndex={zIndex} width={width}>
+const Tooltip = ({direction = 'top', iconSize = 24, width = 200, children, ...rest}: TooltipProps) => {
+  const [isVisible, showTooltip, hideTooltip] = useBooleanState(false);
+  const portalNode = document.createElement('div');
+  portalNode.setAttribute('id', 'tooltip-root');
+  const portalRef = useRef<HTMLDivElement>(portalNode);
+  const parentRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<number[]>([0, 0]);
+
+  useEffect(() => {
+    document.body.appendChild(portalRef.current);
+
+    return () => {
+      document.body.removeChild(portalRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    setPosition(computePosition(direction, parentRef, contentRef));
+  }, [children, direction, parentRef, contentRef, isVisible]);
+
+  const [top, left] = position;
+
+  return (
+    <TooltipContainer
+      ref={parentRef}
+      role="tooltip"
+      {...rest}
+      size={iconSize}
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+    >
+      <TooltipIcon size={iconSize} />
+      {isVisible &&
+        createPortal(
+          <TooltipContent ref={contentRef} direction={direction} width={width} top={top} left={left}>
             {children}
-          </TooltipContent>
+          </TooltipContent>,
+          portalRef.current
         )}
-      </TooltipContainer>
-    );
-  }
-);
+    </TooltipContainer>
+  );
+};
 
 export {Tooltip};

package/src/components/Tooltip/Tooltip.unit.tsx

@@ -47,13 +47,6 @@ test('it renders the tooltip with a right direction', () => {
   expect(screen.getByText('Tooltip content')).toBeInTheDocument();
 });
 
-test('Tooltip supports forwardRef', () => {
-  const ref = {current: null};
-
-  render(<Tooltip ref={ref}>Tooltip content</Tooltip>);
-  expect(ref.current).not.toBe(null);
-});
-
 test('Tooltip supports ...rest props', () => {
   render(<Tooltip data-testid="my_value">Tooltip content</Tooltip>);
   expect(screen.getByTestId('my_value')).toBeInTheDocument();