@jobber/components 2.78.1-pre.1 → 2.78.2

package/CHANGELOG.md

@@ -8,6 +8,25 @@ 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.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.78.1...@jobber/components@2.78.2) (2022-03-16)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+## [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,8 +22,8 @@ var index$3 = require('../Avatar/index.js');
 require('color');
 var hooks = require('@jobber/hooks');
 require('react-dom');
-var reactPopper = require('react-popper');
 var index$4 = require('../Tooltip/index.js');
+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";

package/dist/Tooltip/index.js

@@ -20,40 +20,47 @@ var css = ":root {\n  --tooltip--arrow-size: var(--space-small);\n  --tooltip--o
 var styles = {"shadowActivator":"_2IKuYsqwWWH9A-WgJDR61q","tooltipWrapper":"_2fkHxHwiJK9AkUMCIPucCJ","tooltip":"_2YpF1qO7J5ncFlfoW0hA1L","arrow":"_3DjyKsZFiUA0QD18ABsimd","above":"_3VkJmaX3T1x98A59lZbEa5","below":"QtIXawS3dVhY8j2NKSZLY"};
 __chunk_2.styleInject(css);
 
-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, _c, _d;
-    var _e = __chunk_1.__read(React.useState(false), 2), show = _e[0], setShow = _e[1];
+function useTooltipPositioning() {
+    var _a, _b;
     var shadowRef = React.useRef(null); // eslint-disable-line no-null/no-null
-    var _f = __chunk_1.__read(React.useState(), 2), positionElement = _f[0], setPositionedElementRef = _f[1];
-    var _g = __chunk_1.__read(React.useState(), 2), arrowElement = _g[0], setArrowElement = _g[1];
-    var popper = reactPopper.usePopper((_b = shadowRef.current) === null || _b === void 0 ? void 0 : _b.nextElementSibling, positionElement, {
+    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, padding: 10 },
+                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(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, ((_c = popper.state) === null || _c === void 0 ? void 0 : _c.placement) === "bottom" && styles.below, ((_d = popper.state) === null || _d === void 0 ? void 0 : _d.placement) === "top" && 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, show && (React__default.createElement("div", __chunk_1.__assign({ className: toolTipClassNames, style: popper.styles.popper, ref: setPositionedElementRef, role: "tooltip" }, popper.attributes.popper),
+        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: setArrowElement, style: popper.styles.arrow, className: styles.arrow })))))));
+                React__default.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
     function initializeListeners() {
         var showTooltip = function () {
             setShow(true);

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.1-pre.1+738d128",
+  "version": "2.78.2",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "738d128cbd0a19214d34879b4b1f6651b85630e1"
+  "gitHead": "3d60a8625c6acd8fff6fde34c934d78b0a725b10"
 }