@jobber/components 2.78.0 → 2.78.1

package/CHANGELOG.md

@@ -8,6 +8,17 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.78.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.78.0...@jobber/components@2.78.1) (2022-03-10)
+
+
+### Bug Fixes
+
+* **components:** Update tooltip to use react-popper ([#863](https://github.com/GetJobber/atlantis/issues/863)) ([16fd491](https://github.com/GetJobber/atlantis/commit/16fd49119c1cb6467168c7491574be1e21eadfb3))
+
+
+
+
+
 # [2.78.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.77.0...@jobber/components@2.78.0) (2022-03-03)
 
 

package/dist/Chips/index.js

@@ -22,10 +22,9 @@ var index$3 = require('../Avatar/index.js');
 require('color');
 var hooks = require('@jobber/hooks');
 require('react-dom');
-require('@popperjs/core');
 var index$4 = require('../Tooltip/index.js');
-var lodash = require('lodash');
 var reactPopper = require('react-popper');
+var lodash = require('lodash');
 
 var css = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.uhcyg-a-GLRKF_7oHwvMP {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2XfthED8eqbKIyTNoH1aWp {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm,\n.fl19i7ccgBu7NZkxnpvcI {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm.fl19i7ccgBu7NZkxnpvcI {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea,\n._35he2rVDYRU4YQko5r4adP ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n._2XfthED8eqbKIyTNoH1aWp:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  outline: none;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n  box-shadow: var(--shadow-focus);\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:hover,\n._3Uf2El5YBbG3DmUWHBhuea:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp:not(._18wCcoIrboygQTnIVm8yzS) {\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n._2XfthED8eqbKIyTNoH1aWp._18wCcoIrboygQTnIVm8yzS {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n._2XfthED8eqbKIyTNoH1aWp._1FTJ2ALrm1mVaT7HdMFFGN {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n._2XfthED8eqbKIyTNoH1aWp.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n._18wCcoIrboygQTnIVm8yzS.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n._1FTJ2ALrm1mVaT7HdMFFGN.B1ELFzeQy9Ihy9oYcv-px {\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n._35he2rVDYRU4YQko5r4adP {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._1M_ek3kiaa7OApx5rwBEc3 {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:hover,\n._1M_ek3kiaa7OApx5rwBEc3:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:focus,\n._3Uf2El5YBbG3DmUWHBhuea ._1M_ek3kiaa7OApx5rwBEc3:hover {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n._3AG5dSWeyKYD1Xfu9fN_DL > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n._3AG5dSWeyKYD1Xfu9fN_DL {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
 var styles = {"wrapper":"uhcyg-a-GLRKF_7oHwvMP","chip":"_2XfthED8eqbKIyTNoH1aWp","hasPrefix":"_4U2lNr3Kk6xnNZTk3Fxgm","hasSuffix":"fl19i7ccgBu7NZkxnpvcI","clickable":"_3Uf2El5YBbG3DmUWHBhuea","input":"_35he2rVDYRU4YQko5r4adP","active":"_18wCcoIrboygQTnIVm8yzS","invalid":"_1FTJ2ALrm1mVaT7HdMFFGN","disabled":"B1ELFzeQy9Ihy9oYcv-px","button":"_1M_ek3kiaa7OApx5rwBEc3","icon":"_3AG5dSWeyKYD1Xfu9fN_DL"};

package/dist/Tooltip/index.js

@@ -14,45 +14,54 @@ var index$1 = require('../Text/index.js');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
 var ReactDOM__default = _interopDefault(ReactDOM);
-var core = require('@popperjs/core');
+var reactPopper = require('react-popper');
 
 var css = ":root {\n  --tooltip--arrow-size: var(--space-small);\n  --tooltip--offset: calc(-1 * calc(var(--space-smaller) + 1px));\n}\n\n._2IKuYsqwWWH9A-WgJDR61q {\n  display: none;\n}\n\n._2fkHxHwiJK9AkUMCIPucCJ {\n  display: inline-block;\n  position: absolute;\n  z-index: var(--elevation-tooltip);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L {\n  display: inline-block;\n  position: relative;\n  max-width: calc(var(--base-unit) * 15);\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-informative);\n  border-radius: var(--radius-base);\n  background-color: var(--color-informative--surface);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd,\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  width: var(--space-small);\n  width: var(--space-small);\n  width: var(--tooltip--arrow-size);\n  height: var(--space-small);\n  height: var(--space-small);\n  height: var(--tooltip--arrow-size);\n  background-color: inherit;\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  border: var(--border-base) solid var(--color-informative);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 {\n  padding-bottom: var(--space-small);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L {\n  -webkit-transform-origin: bottom center;\n          transform-origin: bottom center;\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n  bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n  bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n  bottom: var(--tooltip--offset);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  border-top-width: 0;\n  border-left-width: 0;\n}\n\n.QtIXawS3dVhY8j2NKSZLY {\n  padding-top: var(--space-small);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L {\n  -webkit-transform-origin: top center;\n          transform-origin: top center;\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n  top: calc(-1 * calc(var(--space-smaller) + 1px));\n  top: calc(-1 * calc(var(--space-smaller) + 1px));\n  top: var(--tooltip--offset);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  border-bottom-width: 0;\n  border-right-width: 0;\n}\n";
 var styles = {"shadowActivator":"_2IKuYsqwWWH9A-WgJDR61q","tooltipWrapper":"_2fkHxHwiJK9AkUMCIPucCJ","tooltip":"_2YpF1qO7J5ncFlfoW0hA1L","arrow":"_3DjyKsZFiUA0QD18ABsimd","above":"_3VkJmaX3T1x98A59lZbEa5","below":"QtIXawS3dVhY8j2NKSZLY"};
 __chunk_2.styleInject(css);
 
+function useTooltipPositioning() {
+    var _a, _b;
+    var shadowRef = React.useRef(null); // eslint-disable-line no-null/no-null
+    var _c = __chunk_1.__read(React.useState(), 2), positionElement = _c[0], setTooltipRef = _c[1];
+    var _d = __chunk_1.__read(React.useState(), 2), arrowElement = _d[0], setArrowRef = _d[1];
+    var popper = reactPopper.usePopper((_a = shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling, positionElement, {
+        placement: "top",
+        modifiers: [
+            { name: "flip", options: { fallbackPlacements: ["bottom"] } },
+            {
+                name: "arrow",
+                options: { element: arrowElement },
+            },
+        ],
+    });
+    return __chunk_1.__assign(__chunk_1.__assign({}, popper), { placement: (_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement, shadowRef: shadowRef,
+        setArrowRef: setArrowRef,
+        setTooltipRef: setTooltipRef });
+}
+
 var variation = {
     startOrStop: { scale: 0.6, opacity: 0 },
     done: { scale: 1, opacity: 1 },
 };
 function Tooltip(_a) {
     var message = _a.message, children = _a.children;
-    var _b = __chunk_1.__read(React.useState("above"), 2), placement = _b[0], setPlacement = _b[1];
-    var _c = __chunk_1.__read(React.useState({}), 2), tooltipStyles = _c[0], setTooltipStyles = _c[1];
-    var _d = __chunk_1.__read(React.useState({}), 2), arrowStyles = _d[0], setArrowStyles = _d[1];
-    var _e = __chunk_1.__read(React.useState(true), 2), show = _e[0], setShow = _e[1];
-    var tooltipRef = React.createRef();
-    var arrowRef = React.createRef();
-    var shadowRef = React.createRef();
+    var _b = __chunk_1.__read(React.useState(false), 2), show = _b[0], setShow = _b[1];
+    var _c = useTooltipPositioning(), attributes = _c.attributes, placement = _c.placement, shadowRef = _c.shadowRef, popperStyles = _c.styles, setArrowRef = _c.setArrowRef, setTooltipRef = _c.setTooltipRef;
     initializeListeners();
-    var toolTipClassNames = classnames(styles.tooltipWrapper, placement === "below" && styles.below, placement === "above" && styles.above);
+    var toolTipClassNames = classnames(styles.tooltipWrapper, placement === "bottom" && styles.below, placement === "top" && styles.above);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
         children,
-        React__default.createElement(TooltipPortal, null,
-            React__default.createElement("div", { className: toolTipClassNames, style: tooltipStyles, ref: tooltipRef, role: "tooltip" },
-                React__default.createElement(framerMotion.AnimatePresence, null, show && (React__default.createElement(framerMotion.motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
-                        type: "spring",
-                        damping: 20,
-                        stiffness: 300,
-                    } },
-                    React__default.createElement(index$1.Text, null, message),
-                    React__default.createElement("div", { ref: arrowRef, style: arrowStyles, className: styles.arrow }))))))));
+        React__default.createElement(TooltipPortal, null, show && (React__default.createElement("div", __chunk_1.__assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
+            React__default.createElement(framerMotion.motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
+                    type: "spring",
+                    damping: 20,
+                    stiffness: 300,
+                } },
+                React__default.createElement(index$1.Text, null, message),
+                React__default.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
     function initializeListeners() {
-        var _a = __chunk_1.__read(React.useState(undefined), 2), popperInstance = _a[0], setPopperInstance = _a[1];
-        React.useEffect(function () {
-            if (popperInstance)
-                popperInstance.update();
-        }, [show]);
         var showTooltip = function () {
             setShow(true);
         };
@@ -92,60 +101,13 @@ function Tooltip(_a) {
             }
         };
         React.useLayoutEffect(function () {
-            var popper = setupPopper();
-            setPopperInstance(popper);
-            setShow(false);
             injectAttributes();
             addListeners();
             return function () {
-                if (popper)
-                    popper.destroy();
                 removeListeners();
             };
         }, []);
     }
-    function setupPopper() {
-        if (shadowRef.current &&
-            shadowRef.current.nextElementSibling &&
-            tooltipRef.current) {
-            var popper = core.createPopper(shadowRef.current.nextElementSibling, tooltipRef.current, {
-                placement: "top",
-                modifiers: [
-                    {
-                        name: "preventOverflow",
-                        options: {
-                            padding: 5,
-                        },
-                    },
-                    {
-                        name: "flip",
-                        options: { padding: 50, fallbackPlacements: ["bottom"] },
-                    },
-                    {
-                        name: "arrow",
-                        options: { element: arrowRef.current, padding: 5 },
-                    },
-                    {
-                        name: "applyStyles",
-                        fn: function (data) {
-                            setTooltipStyles(data.state.styles.popper);
-                            setArrowStyles(data.state.styles.arrow);
-                            if (data.state.placement === "top") {
-                                setPlacement("above");
-                            }
-                            else {
-                                setPlacement("below");
-                            }
-                        },
-                    },
-                ],
-            });
-            return popper;
-        }
-        else {
-            return undefined;
-        }
-    }
 }
 function TooltipPortal(_a) {
     var children = _a.children;

package/dist/Tooltip/useTooltipPositioning.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare function useTooltipPositioning(): {
+    placement: "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+    shadowRef: import("react").RefObject<HTMLSpanElement>;
+    setArrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
+    setTooltipRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
+    styles: {
+        [key: string]: import("react").CSSProperties;
+    };
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+    state: import("@popperjs/core").State | null;
+    update: (() => Promise<Partial<import("@popperjs/core").State>>) | null;
+    forceUpdate: (() => void) | null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.78.0",
+  "version": "2.78.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "cf2446cabdba1f3539555ff5d65fcdfa4a8f5e4b"
+  "gitHead": "f831c9ee07030075c7f17652bc9412533f403f5a"
 }