@linzjs/lui 17.15.1 → 17.16.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [17.16.1](https://github.com/linz/lui/compare/v17.16.0...v17.16.1) (2022-10-06)
+
+
+### Bug Fixes
+
+* **Chromatic:** Increasing diff threshold to prevent false positives on the tooltip stories ([#774](https://github.com/linz/lui/issues/774)) ([771e180](https://github.com/linz/lui/commit/771e180933808be07f4547f0eb6db54bc51e4abb))
+
+# [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/README.md

@@ -45,7 +45,7 @@ over the CSS is part of this project.
 There is lots to do in this project, often things will be left until there is demand. Please join the Slack channel
 #cop-lui.
 
-## Documentation
+## Documentation 
 
 Storybook is the main source of documentation.
 

package/dist/components/LuiBearingInput/LuiBearingInput.d.ts

@@ -12,12 +12,12 @@ interface LuiBearingInputProps {
     /** If true, validationError prop takes precedence over the internalError value. */
     preferValidationError?: boolean;
 }
-export declare const LuiBearingInput: React.FC<LuiBearingInputProps & LuiCommonInputProps>;
+export declare const LuiBearingInput: React.FC<React.PropsWithChildren<LuiBearingInputProps & LuiCommonInputProps>>;
 interface LuiBearingFormikInputProps {
     name: string;
     label: string;
     /** If true, validationError prop takes precedence over the LuiBearingInput internalError value. */
     preferValidationError?: boolean;
 }
-export declare const LuiBearingFormikInput: React.FC<LuiBearingFormikInputProps & LuiCommonInputProps>;
+export declare const LuiBearingFormikInput: React.FC<React.PropsWithChildren<LuiBearingFormikInputProps & LuiCommonInputProps>>;
 export {};

package/dist/components/LuiErrorPage/LuiErrorPage.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-export declare const LuiErrorPage: React.FC<{
+export declare const LuiErrorPage: React.FC<React.PropsWithChildren<{
     header?: React.ReactElement;
     footer?: React.ReactElement;
     content?: React.ReactElement;
-}>;
+}>>;

package/dist/components/LuiExpandableBanner/LuiExpandableBanner.d.ts

@@ -4,4 +4,4 @@ export interface Expandable {
     label: ReactNode;
     labelPrefix?: ReactNode;
 }
-export declare const LuiExpandableBanner: React.FC<Expandable>;
+export declare const LuiExpandableBanner: React.FC<React.PropsWithChildren<Expandable>>;

package/dist/components/LuiFooter/LuiFooter.d.ts

@@ -6,5 +6,5 @@ interface FooterProps {
     contactEmail?: string;
     feedbackFormUrl?: string;
 }
-export declare const LuiFooter: React.FC<FooterProps>;
+export declare const LuiFooter: React.FC<React.PropsWithChildren<FooterProps>>;
 export {};

package/dist/components/LuiFormikForms/LuiFormikFormLabel/LuiFormikFormLabel.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-export declare const LuiFormikFormLabel: React.FC<{
+export declare const LuiFormikFormLabel: React.FC<React.PropsWithChildren<{
     for: string;
     label: string;
     className?: string;
     required?: boolean;
     tooltip?: string;
-}>;
+}>>;

package/dist/components/LuiFormikForms/LuiFormikRadioButton/LuiFormikRadioButton.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { LuiCommonInputProps } from '../LuiFormikForm';
-export declare const LuiFormikRadioButton: React.FC<{
+export declare const LuiFormikRadioButton: React.FC<React.PropsWithChildren<{
     label: string;
     className?: string;
     value: string;
     name: string;
-} & LuiCommonInputProps>;
+} & LuiCommonInputProps>>;

package/dist/components/LuiFormikForms/LuiFormikRadioGroup/LuiFormikRadioGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-export declare const LuiFormikRadioGroup: React.FC<{
+export declare const LuiFormikRadioGroup: React.FC<React.PropsWithChildren<{
     hint?: string;
     legend: string;
     name: string;
     required?: boolean;
-}>;
+}>>;

package/dist/components/LuiForms/LuiFormSection/LuiHelpInfo/LuiHelpInfo.d.ts

@@ -2,5 +2,5 @@ import React, { ReactNode } from 'react';
 interface IHelpInfoProps {
     info: string | ReactNode;
 }
-export declare const HelpInfo: React.FC<IHelpInfoProps>;
+export declare const HelpInfo: React.FC<React.PropsWithChildren<IHelpInfoProps>>;
 export {};

package/dist/components/LuiHeader/LuiHeader.d.ts

@@ -9,7 +9,7 @@ interface HeaderProps {
     transparent?: boolean;
     sticky?: boolean;
 }
-declare const LuiHeader: React.FC<HeaderProps>;
+declare const LuiHeader: React.FC<React.PropsWithChildren<HeaderProps>>;
 interface ILuiIcon {
     /**
      * The material-ui icon name (see https://material.io/resources/icons/?search=account_c&style=round)
@@ -56,9 +56,9 @@ interface ILuiCloseableHeaderMenuItem extends Omit<ILuiHeaderMenuItem, 'onClick'
     open: boolean;
     setOpen: (value: boolean) => void;
 }
-declare const LuiCloseableHeaderMenuItem: React.FC<ILuiCloseableHeaderMenuItem>;
+declare const LuiCloseableHeaderMenuItem: React.FC<React.PropsWithChildren<ILuiCloseableHeaderMenuItem>>;
 interface ILuiMenuCloseButton extends ILuiIcon {
     'data-testid'?: string;
 }
-declare const LuiMenuCloseButton: React.FC<ILuiMenuCloseButton>;
+declare const LuiMenuCloseButton: React.FC<React.PropsWithChildren<ILuiMenuCloseButton>>;
 export { HeaderSize, HeaderProps, LuiHeader, ILuiIcon, ILuiHeaderMenuItem, LuiHeaderMenuItem, ILuiMenuCloseButton, LuiMenuCloseButton, ILuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuContext, };

package/dist/components/LuiHeaderMenu/LuiHeaderMenus.d.ts

@@ -18,14 +18,14 @@ interface ILuiDrawerMenuOption {
      */
     onClick?: () => void;
 }
-declare const LuiDrawerMenuOptions: React.FC<ILuiIcon>;
-declare const LuiDrawerMenuOption: React.FC<ILuiDrawerMenuOption>;
+declare const LuiDrawerMenuOptions: React.FC<React.PropsWithChildren<ILuiIcon>>;
+declare const LuiDrawerMenuOption: React.FC<React.PropsWithChildren<ILuiDrawerMenuOption>>;
 declare type ILuiDrawerMenu = Omit<ILuiHeaderMenuItem, 'onClick'> & {
     hasStickyHeader?: boolean;
 };
-declare const LuiDrawerMenu: React.FC<ILuiDrawerMenu>;
+declare const LuiDrawerMenu: React.FC<React.PropsWithChildren<ILuiDrawerMenu>>;
 declare type ILuiDropdownMenu = Omit<ILuiHeaderMenuItem, 'onClick'>;
-declare const LuiDropdownMenu: React.FC<ILuiDropdownMenu>;
+declare const LuiDropdownMenu: React.FC<React.PropsWithChildren<ILuiDropdownMenu>>;
 interface ILuiDrawerMenuSection {
     /**
      * Optional tile, displays a header if set

package/dist/components/LuiLoadingSpinner/LuiLoadingSpinner.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 /**
  * A LuiSpinner with a status message beneath it.
  */
-export declare const LuiStatusSpinner: React.FC;
+export declare const LuiStatusSpinner: React.FC<React.PropsWithChildren<unknown>>;
 interface LuiMiniSpinnerProps {
     size: number;
     divProps?: any;

package/dist/components/LuiModal/LuiModal.d.ts

@@ -9,14 +9,14 @@ interface ILuiModal {
     lowContrast?: boolean;
     appendToElement?: () => HTMLElement;
 }
-export declare const LuiModal: React.FC<ILuiModal>;
-export declare const LuiAlertModal: React.FC<{
+export declare const LuiModal: React.FC<React.PropsWithChildren<ILuiModal>>;
+export declare const LuiAlertModal: React.FC<React.PropsWithChildren<{
     level: 'success' | 'info' | 'warning' | 'error';
-} & ILuiModal>;
-export declare const LuiAlertModalButtons: React.FC;
+} & ILuiModal>>;
+export declare const LuiAlertModalButtons: React.FC<React.PropsWithChildren<unknown>>;
 interface IModalHeader {
     headingText?: string;
     onClose?: () => void;
 }
-export declare const LuiModalHeader: React.FC<IModalHeader>;
+export declare const LuiModalHeader: React.FC<React.PropsWithChildren<IModalHeader>>;
 export {};

package/dist/components/LuiSearchInput/LuiSearchInput.d.ts

@@ -23,4 +23,4 @@ export interface ISearchInputProps {
     focusUpdate?: boolean;
 }
 export declare function isGroupedResult(result: ISearchResult[] | ISearchGroupedResult[]): result is ISearchGroupedResult[];
-export declare const LuiSearchInput: React.FC<ISearchInputProps>;
+export declare const LuiSearchInput: React.FC<React.PropsWithChildren<ISearchInputProps>>;

package/dist/components/LuiSearchInput/ResultsDisplay.d.ts

@@ -9,5 +9,5 @@ export interface IResultsProps {
     results: ISearchResult[] | ISearchGroupedResult[];
     selectedRef: RefObject<HTMLDivElement>;
 }
-declare const ResultsDisplay: React.FC<IResultsProps>;
+declare const ResultsDisplay: React.FC<React.PropsWithChildren<IResultsProps>>;
 export default ResultsDisplay;

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

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

package/dist/components/LuiTabs/LuiTab/LuiTab.d.ts

@@ -7,5 +7,5 @@ interface LuiTabProps {
     titleAttribute?: string;
     children: React.ReactNode;
 }
-export declare const LuiTab: React.FC<LuiTabProps>;
+export declare const LuiTab: React.FC<React.PropsWithChildren<LuiTabProps>>;
 export {};

package/dist/components/LuiTabs/LuiTabs.d.ts

@@ -4,7 +4,7 @@ interface ILuiTabsContext {
     setActivePanel: (activePanel: string) => void;
 }
 export declare const LuiTabsContext: React.Context<ILuiTabsContext>;
-export declare const LuiTabs: React.FC<{
+export declare const LuiTabs: React.FC<React.PropsWithChildren<{
     defaultPanel: string;
-}>;
+}>>;
 export {};

package/dist/components/LuiTabs/LuiTabsGroup/LuiTabsGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const LuiTabsGroup: React.FC<{
+export declare const LuiTabsGroup: React.FC<React.PropsWithChildren<{
     ariaLabel: string;
     justify?: boolean;
-}>;
+}>>;

package/dist/components/LuiTabs/LuiTabsPanel/LuiTabsPanel.d.ts

@@ -4,5 +4,5 @@ interface LuiTabsPanelProps {
     panel: string;
     mode?: LuiTabsPanelMode;
 }
-export declare const LuiTabsPanel: React.FC<LuiTabsPanelProps>;
+export declare const LuiTabsPanel: React.FC<React.PropsWithChildren<LuiTabsPanelProps>>;
 export {};

package/dist/components/LuiTabs/LuiTabsPanelSwitch/LuiTabsPanelSwitch.d.ts

@@ -3,5 +3,5 @@ interface LuiTabsPanelSwitch {
     targetPanel: string;
     setActivePanel?: (targetPanel: string) => {};
 }
-export declare const LuiTabsPanelSwitch: React.FC<LuiTabsPanelSwitch>;
+export declare const LuiTabsPanelSwitch: React.FC<React.PropsWithChildren<LuiTabsPanelSwitch>>;
 export {};

package/dist/components/LuiToastMessage/LuiToastMessage.d.ts

@@ -14,5 +14,5 @@ interface ILuiToastMessageProps {
     children?: React.ReactNode;
     type?: 'button' | 'submit' | 'reset';
 }
-export declare const LuiToastMessage: React.FC<ILuiToastMessageProps>;
+export declare const LuiToastMessage: React.FC<React.PropsWithChildren<ILuiToastMessageProps>>;
 export {};

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/components/LuiUpdateSplashModal/LuiUpdatesSplashModal.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-export declare const LuiUpdatesSplashModal: React.FC<{
+export declare const LuiUpdatesSplashModal: React.FC<React.PropsWithChildren<{
     bigImage: string;
     smallImage: string;
     header: string;
     wrapperClass: string;
     onClose: () => void;
     id: string;
-}>;
+}>>;

package/dist/components/lol/LOLDrawerMenuFirmSwitcher.d.ts

@@ -5,4 +5,4 @@ export interface ILOLDrawerMenuFirmSwitcherProperties {
 /**
  * Deprecated: this is LandOnline specific and has been moved to https://github.com/linz/landonline-common-js
  */
-export declare const LOLDrawerMenuFirmSwitcher: React.FC<ILOLDrawerMenuFirmSwitcherProperties>;
+export declare const LOLDrawerMenuFirmSwitcher: React.FC<React.PropsWithChildren<ILOLDrawerMenuFirmSwitcherProperties>>;

package/dist/components/lol/LOLFirmSwitcher.d.ts

@@ -7,7 +7,7 @@ export declare type ILOLFirmSwitcherMenu = Omit<ILuiDropdownMenu, 'icon' | 'labe
 /**
  * Deprecated: this is LandOnline specific and has been moved to https://github.com/linz/landonline-common-js
  */
-export declare const LOLFirmSwitcherMenu: React.FC<ILOLFirmSwitcherMenu>;
+export declare const LOLFirmSwitcherMenu: React.FC<React.PropsWithChildren<ILOLFirmSwitcherMenu>>;
 interface ILOLFirmSwitcherMenuContent {
     firms: IFirm[];
     selectedFirm: IFirm | undefined;
@@ -15,12 +15,12 @@ interface ILOLFirmSwitcherMenuContent {
     collapsible?: boolean;
     minimumFilterCount?: number;
 }
-export declare const LOLFirmSwitcherMenuContent: React.FC<ILOLFirmSwitcherMenuContent>;
+export declare const LOLFirmSwitcherMenuContent: React.FC<React.PropsWithChildren<ILOLFirmSwitcherMenuContent>>;
 interface IFirmOption {
     value: IFirm;
     selected: boolean;
     onSelect: (optionId: string) => void;
     disabled: boolean;
 }
-export declare const FirmOption: React.FC<IFirmOption>;
+export declare const FirmOption: React.FC<React.PropsWithChildren<IFirmOption>>;
 export {};

package/dist/components/lol/LOLUserLastLogin.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 /**
  * Deprecated: this is LandOnline specific and has been moved to https://github.com/linz/landonline-common-js
  */
-export declare const LOLUserLastLogin: React.FC;
+export declare const LOLUserLastLogin: React.FC<React.PropsWithChildren<unknown>>;

package/dist/contexts/LuiMessagingContextProvider.d.ts

@@ -11,4 +11,4 @@ export interface ShowMessageProps {
     messageLevel: MessageLevel;
     requireDismiss?: boolean;
 }
-export declare const LuiMessagingContextProvider: React.FC;
+export declare const LuiMessagingContextProvider: React.FC<React.PropsWithChildren<unknown>>;

package/dist/index.js

@@ -25426,7 +25426,7 @@ var LuiMenuCloseButton = function (_a) {
 
 var LuiDrawerMenuOptions = function (_a) {
     var children = _a.children;
-    return (React__default["default"].createElement("div", { className: "lui-menu-drawer-options" }, children));
+    return React__default["default"].createElement("div", { className: "lui-menu-drawer-options" }, children);
 };
 var LuiDrawerMenuOption = function (_a) {
     var icon = _a.icon, label = _a.label, badge = _a.badge, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b;
@@ -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);
 };
 
@@ -32897,20 +33077,19 @@ function useClickedOutsideElement(refElement, handleClickOutside) {
 var LuiBadge = function (props) { return (React__default["default"].createElement("p", { className: clsx('LuiBadge', props.size === 'sm' && 'LuiBadge--sm', props.size === 'lg' && 'LuiBadge--lg', props.backgroundFill && 'LuiBadge--fill', props.variation === 'warning' && 'LuiBadge--warning'), "aria-roledescription": props.ariaRoleDescription }, props.children)); };
 
 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 +33102,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,