@linzjs/lui 17.15.1 → 17.16.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [17.16.0](https://github.com/linz/lui/compare/v17.15.1...v17.16.0) (2022-09-29)
+
+
+### Features
+
+* update the tooltip UX and add the following cursor support ([#772](https://github.com/linz/lui/issues/772)) ([9a812de](https://github.com/linz/lui/commit/9a812de282e2c9266ae9d75be0d4bfbe0ac69870))
+
 ## [17.15.1](https://github.com/linz/lui/compare/v17.15.0...v17.15.1) (2022-09-22)
 
 # [17.15.0](https://github.com/linz/lui/compare/v17.14.1...v17.15.0) (2022-09-20)

package/dist/components/LuiSidePanel/LuiSidePanel.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare const LuiSidePanel: React.FC<{
     onClose: () => void;
     width?: string;
+    closeBtnTitleAttr?: string;
     top?: number;
 }>;
 export declare const LuiSidePanelProvider: React.FC;

package/dist/components/LuiTooltip/LuiTooltip.d.ts

@@ -1,12 +1,14 @@
 import { ReactNode } from 'react';
 import { Placement } from 'tippy.js';
-import 'tippy.js/dist/tippy.css';
 import 'tippy.js/dist/border.css';
+import 'tippy.js/dist/tippy.css';
 export interface ILuiTooltipProperties {
     message: string;
     placement?: Placement;
     trigger?: string;
     children: ReactNode;
     animation?: boolean;
+    followCursor?: boolean;
+    mode?: 'default' | 'info' | 'error';
 }
 export declare const LuiTooltip: (props: ILuiTooltipProperties) => JSX.Element;

package/dist/index.js

@@ -32830,20 +32830,198 @@ Object.assign({}, applyStyles$1, {
   }
 });
 
+var mouseCoords = {
+  clientX: 0,
+  clientY: 0
+};
+var activeInstances = [];
+
+function storeMouseCoords(_ref) {
+  var clientX = _ref.clientX,
+      clientY = _ref.clientY;
+  mouseCoords = {
+    clientX: clientX,
+    clientY: clientY
+  };
+}
+
+function addMouseCoordsListener(doc) {
+  doc.addEventListener('mousemove', storeMouseCoords);
+}
+
+function removeMouseCoordsListener(doc) {
+  doc.removeEventListener('mousemove', storeMouseCoords);
+}
+
+var followCursor = {
+  name: 'followCursor',
+  defaultValue: false,
+  fn: function fn(instance) {
+    var reference = instance.reference;
+    var doc = getOwnerDocument(instance.props.triggerTarget || reference);
+    var isInternalUpdate = false;
+    var wasFocusEvent = false;
+    var isUnmounted = true;
+    var prevProps = instance.props;
+
+    function getIsInitialBehavior() {
+      return instance.props.followCursor === 'initial' && instance.state.isVisible;
+    }
+
+    function addListener() {
+      doc.addEventListener('mousemove', onMouseMove);
+    }
+
+    function removeListener() {
+      doc.removeEventListener('mousemove', onMouseMove);
+    }
+
+    function unsetGetReferenceClientRect() {
+      isInternalUpdate = true;
+      instance.setProps({
+        getReferenceClientRect: null
+      });
+      isInternalUpdate = false;
+    }
+
+    function onMouseMove(event) {
+      // If the instance is interactive, avoid updating the position unless it's
+      // over the reference element
+      var isCursorOverReference = event.target ? reference.contains(event.target) : true;
+      var followCursor = instance.props.followCursor;
+      var clientX = event.clientX,
+          clientY = event.clientY;
+      var rect = reference.getBoundingClientRect();
+      var relativeX = clientX - rect.left;
+      var relativeY = clientY - rect.top;
+
+      if (isCursorOverReference || !instance.props.interactive) {
+        instance.setProps({
+          // @ts-ignore - unneeded DOMRect properties
+          getReferenceClientRect: function getReferenceClientRect() {
+            var rect = reference.getBoundingClientRect();
+            var x = clientX;
+            var y = clientY;
+
+            if (followCursor === 'initial') {
+              x = rect.left + relativeX;
+              y = rect.top + relativeY;
+            }
+
+            var top = followCursor === 'horizontal' ? rect.top : y;
+            var right = followCursor === 'vertical' ? rect.right : x;
+            var bottom = followCursor === 'horizontal' ? rect.bottom : y;
+            var left = followCursor === 'vertical' ? rect.left : x;
+            return {
+              width: right - left,
+              height: bottom - top,
+              top: top,
+              right: right,
+              bottom: bottom,
+              left: left
+            };
+          }
+        });
+      }
+    }
+
+    function create() {
+      if (instance.props.followCursor) {
+        activeInstances.push({
+          instance: instance,
+          doc: doc
+        });
+        addMouseCoordsListener(doc);
+      }
+    }
+
+    function destroy() {
+      activeInstances = activeInstances.filter(function (data) {
+        return data.instance !== instance;
+      });
+
+      if (activeInstances.filter(function (data) {
+        return data.doc === doc;
+      }).length === 0) {
+        removeMouseCoordsListener(doc);
+      }
+    }
+
+    return {
+      onCreate: create,
+      onDestroy: destroy,
+      onBeforeUpdate: function onBeforeUpdate() {
+        prevProps = instance.props;
+      },
+      onAfterUpdate: function onAfterUpdate(_, _ref2) {
+        var followCursor = _ref2.followCursor;
+
+        if (isInternalUpdate) {
+          return;
+        }
+
+        if (followCursor !== undefined && prevProps.followCursor !== followCursor) {
+          destroy();
+
+          if (followCursor) {
+            create();
+
+            if (instance.state.isMounted && !wasFocusEvent && !getIsInitialBehavior()) {
+              addListener();
+            }
+          } else {
+            removeListener();
+            unsetGetReferenceClientRect();
+          }
+        }
+      },
+      onMount: function onMount() {
+        if (instance.props.followCursor && !wasFocusEvent) {
+          if (isUnmounted) {
+            onMouseMove(mouseCoords);
+            isUnmounted = false;
+          }
+
+          if (!getIsInitialBehavior()) {
+            addListener();
+          }
+        }
+      },
+      onTrigger: function onTrigger(_, event) {
+        if (isMouseEvent$1(event)) {
+          mouseCoords = {
+            clientX: event.clientX,
+            clientY: event.clientY
+          };
+        }
+
+        wasFocusEvent = event.type === 'focus';
+      },
+      onHidden: function onHidden() {
+        if (instance.props.followCursor) {
+          unsetGetReferenceClientRect();
+          removeListener();
+          isUnmounted = true;
+        }
+      }
+    };
+  }
+};
+
 tippy.setDefaultProps({
   render: render
 });
 
-var css_248z$5 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
+var css_248z$5 = ".tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:\"\";z-index:-1;position:absolute;border-color:transparent;border-style:solid}";
 styleInject(css_248z$5);
 
-var css_248z$4 = ".tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:\"\";z-index:-1;position:absolute;border-color:transparent;border-style:solid}";
+var css_248z$4 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
 styleInject(css_248z$4);
 
 var id = 0;
 var getKey = function () { return id++; };
 var LuiTooltip = function (props) {
-    var children = props.children, message = props.message, placement = props.placement, trigger = props.trigger, _a = props.animation, animation = _a === void 0 ? true : _a;
+    var children = props.children, message = props.message, placement = props.placement, trigger = props.trigger, _a = props.animation, animation = _a === void 0 ? true : _a, _b = props.followCursor, followCursor$1 = _b === void 0 ? false : _b, _c = props.mode, mode = _c === void 0 ? 'default' : _c;
     var id = "LuiToolTip_".concat(React.useMemo(getKey, []));
     if (typeof message !== 'string') {
         throw new Error('LuiTooltip message must be a string!');
@@ -32851,18 +33029,20 @@ var LuiTooltip = function (props) {
     React.useEffect(function () {
         tippy("#".concat(id), {
             content: message,
-            arrow: true,
+            arrow: false,
             trigger: trigger,
-            theme: 'LUI',
+            theme: mode,
             placement: placement,
-            offset: [0, 24],
-            animation: animation
+            offset: [0, 18],
+            animation: animation,
+            followCursor: followCursor$1,
+            plugins: [followCursor]
         });
         return function () {
             var _a, _b;
             (_b = (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a._tippy) === null || _b === void 0 ? void 0 : _b.destroy();
         };
-    }, [id, message, placement, trigger, animation]);
+    }, [id, message, placement, trigger, animation, followCursor$1]);
     return React__default["default"].createElement("span", { id: id }, children);
 };
 
@@ -32899,18 +33079,18 @@ var LuiBadge = function (props) { return (React__default["default"].createElemen
 var LuiSidePanelContext = React__default["default"].createContext({ setProps: function () { return undefined; } });
 /* eslint-disable react/prop-types */
 var LuiSidePanel = function (_a) {
-    var children = _a.children, onClose = _a.onClose, width = _a.width, top = _a.top;
+    var children = _a.children, onClose = _a.onClose, width = _a.width, top = _a.top, closeBtnTitleAttr = _a.closeBtnTitleAttr;
     var setProps = React__default["default"].useContext(LuiSidePanelContext).setProps;
     React__default["default"].useEffect(function () {
-        setProps({ children: children, onClose: onClose, width: width, top: top });
+        setProps({ children: children, onClose: onClose, width: width, top: top, closeBtnTitleAttr: closeBtnTitleAttr });
         return function () {
             setProps(undefined);
         };
-    }, [setProps, children, onClose, width, top]);
+    }, [setProps, children, onClose, width, top, closeBtnTitleAttr]);
     return React__default["default"].createElement(React__default["default"].Fragment, null);
 };
 var LuiSidePanelContainer = function (props) {
-    var _a = props !== null && props !== void 0 ? props : {}, children = _a.children, onClose = _a.onClose, _b = _a.width, width = _b === void 0 ? '50%' : _b, _c = _a.top, top = _c === void 0 ? 60 : _c;
+    var _a = props !== null && props !== void 0 ? props : {}, children = _a.children, onClose = _a.onClose, _b = _a.width, width = _b === void 0 ? '50%' : _b, _c = _a.top, top = _c === void 0 ? 60 : _c, _d = _a.closeBtnTitleAttr, closeBtnTitleAttr = _d === void 0 ? 'Close panel' : _d;
     return (React__default["default"].createElement("section", { style: {
             position: 'fixed',
             right: 0,
@@ -32923,7 +33103,7 @@ var LuiSidePanelContainer = function (props) {
             padding: 0,
             zIndex: 3
         } },
-        children && (React__default["default"].createElement("button", { type: "button", "data-testid": "close", onClick: onClose, style: {
+        children && (React__default["default"].createElement("button", { type: "button", "data-testid": "close", title: closeBtnTitleAttr, onClick: onClose, style: {
                 color: '#5e5e61',
                 position: 'absolute',
                 right: 15,