@muraldevkit/ui-toolkit 4.67.0 → 4.68.0-dev-NFbt.1

package/dist/cjs/components/tooltip/MrlTooltip/MrlTooltip.js

@@ -0,0 +1,244 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var constants = require('../constants.js');
+var MrlTooltipContent = require('../MrlTooltipContent/MrlTooltipContent.js');
+var utils = require('../utils.js');
+var classnames = require('classnames');
+var index = require('../useTooltipPosition/index.js');
+var web = require('@react-spring/web');
+var index$1 = require('../../../utils/layers/index.js');
+var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
+var MrlPortal = require('../../portal/MrlPortal.js');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _excluded = ["children", "clickToClose", "disableTooltipHover", "display", "text", "attrs", "dataQa", "kind", "position", "anchor", "srAnnouncement", "tooltipClass", "tooltipContentClass"],
+  _excluded2 = ["className", "onBlur", "onFocus", "onKeyDown", "onMouseOver", "onMouseOut", "onMouseUp", "children"];
+/**
+ * MrlTooltip Component
+ *
+ * This component is not displayed when rendering this component if the primary pointing device can’t hover. Examples include touchscreens and screens that use a basic drawing stylus.
+ * Pointing devices that can hover, but for which doing so is inconvenient and not part of the normal way they are used, also match this criteria. For example, a touchscreen where a long press is treated as hovering.
+ * @param {MrlTooltipProps} props - The props of the component
+ * @returns {HTMLElement} a configured Tooltip component
+ */
+var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
+  var children = props.children,
+    _props$clickToClose = props.clickToClose,
+    clickToClose = _props$clickToClose === void 0 ? true : _props$clickToClose,
+    _props$disableTooltip = props.disableTooltipHover,
+    disableTooltipHover = _props$disableTooltip === void 0 ? false : _props$disableTooltip,
+    _props$display = props.display,
+    defaultDisplay = _props$display === void 0 ? 'hide' : _props$display,
+    text = props.text,
+    _props$attrs = props.attrs,
+    attrs = _props$attrs === void 0 ? {} : _props$attrs,
+    dataQa = props.dataQa,
+    _props$kind = props.kind,
+    kind = _props$kind === void 0 ? 'default' : _props$kind,
+    _props$position = props.position,
+    position = _props$position === void 0 ? constants.MrlTooltipDefaults.position || 'top' : _props$position,
+    _props$anchor = props.anchor,
+    anchor = _props$anchor === void 0 ? constants.MrlTooltipDefaults.anchor : _props$anchor,
+    _props$srAnnouncement = props.srAnnouncement,
+    srAnnouncement = _props$srAnnouncement === void 0 ? true : _props$srAnnouncement,
+    tooltipClass = props.tooltipClass,
+    tooltipContentClass = props.tooltipContentClass,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var _React$useState = React__namespace.useState('mouse'),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    interaction = _React$useState2[0],
+    setInteraction = _React$useState2[1];
+  var triggerRef = React__namespace.useRef(null);
+  var tooltipRef = React__namespace.useRef(null);
+
+  /**
+   * State value to determine if the tooltip should be displayed
+   */
+  var _React$useState3 = React__namespace.useState(defaultDisplay),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    display = _React$useState4[0],
+    setDisplay = _React$useState4[1];
+
+  /**
+   * State value to determine if the tooltip should be displayed
+   */
+  var _React$useState5 = React__namespace.useState(''),
+    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
+    id = _React$useState6[0],
+    setId = _React$useState6[1];
+
+  /**
+   * Event handler to show tooltip when the trigger is focused
+   */
+  var handleShowTooltip = React__namespace.useCallback(function () {
+    setDisplay('show');
+  }, []);
+  var handleFocus = React__namespace.useCallback(function () {
+    if (interaction === 'keyboard') {
+      handleShowTooltip();
+    }
+  }, [interaction, handleShowTooltip]);
+
+  /**
+   * Event handler to hide the tooltip on mouseout
+   */
+  var handleHideTooltip = function handleHideTooltip() {
+    setDisplay('hide');
+  };
+
+  /**
+   * Event handler to hide the tooltip when a user presses escape
+   * @param {React.KeyboardEvent} e Keyboard event
+   */
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
+      handleHideTooltip();
+    }
+  };
+  var handleSetKeyboardInteraction = function handleSetKeyboardInteraction(e) {
+    if (e.key === 'Tab' || e.key === 'Enter' || e.key === ' ') {
+      setInteraction('keyboard');
+    }
+  };
+  var handlesetMouseInteraction = function handlesetMouseInteraction() {
+    return setInteraction('mouse');
+  };
+
+  /**
+   * Setup of the initial component attributes and events
+   */
+  React__namespace.useEffect(function () {
+    if (id === '') setId(setAttributes.getUniqueId('mrl-tooltip'));
+  }, [id]);
+  React__namespace.useEffect(function () {
+    setDisplay(defaultDisplay);
+  }, [defaultDisplay]);
+
+  /**
+   * Setting the triggerRef to the trigger element
+   *
+   * We need to use 'querySelector' because we cannot pass a ref to the child object. There are
+   * some situations where the child component may not accept a ref, for example: a react router
+   * link is passed as a child. In older versions of react router you could not pass a ref to the
+   * component so this causes an issue.
+   */
+  React__namespace.useEffect(function () {
+    var trigger = document.querySelector("[data-tooltip-id=\"".concat(id, "\"]"));
+    triggerRef.current = trigger;
+  }, [id]);
+  React__namespace.useEffect(function () {
+    var currentTooltipRef = tooltipRef.current;
+    document.addEventListener('keydown', handleSetKeyboardInteraction);
+    document.addEventListener('mousedown', handlesetMouseInteraction);
+    if (!disableTooltipHover && currentTooltipRef) {
+      currentTooltipRef.addEventListener('mouseover', handleShowTooltip);
+      currentTooltipRef.addEventListener('mouseout', handleHideTooltip);
+    }
+    return function () {
+      if (!disableTooltipHover && currentTooltipRef) {
+        currentTooltipRef.removeEventListener('mouseover', handleShowTooltip);
+        currentTooltipRef.removeEventListener('mouseout', handleHideTooltip);
+      }
+      document.removeEventListener('keydown', handleSetKeyboardInteraction);
+      document.removeEventListener('mousedown', handlesetMouseInteraction);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleShowTooltip, tooltipRef.current]);
+  var positionStyles = index.useTooltipPosition(triggerRef, tooltipRef, {
+    align: anchor,
+    position: position
+  }, display === 'show', -1);
+  var inlineStyles = {
+    menu: {
+      left: positionStyles.left,
+      position: 'fixed',
+      top: positionStyles.top
+    }
+  };
+  var transitions = web.useTransition(display === 'show', {
+    config: {
+      duration: display === 'show' ? 150 : 25
+    },
+    enter: {
+      opacity: 1
+    },
+    from: {
+      opacity: 0
+    },
+    leave: {
+      opacity: 0
+    }
+  });
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, React__namespace.Children.map(children, function (child, index) {
+    if (index === 0 && /*#__PURE__*/React__namespace.isValidElement(child)) {
+      var _props = child.props,
+        className = _props.className,
+        onBlur = _props.onBlur,
+        onFocus = _props.onFocus,
+        onKeyDown = _props.onKeyDown,
+        onMouseOver = _props.onMouseOver,
+        onMouseOut = _props.onMouseOut,
+        onMouseUp = _props.onMouseUp,
+        _children = _props.children,
+        otherProps = _rollupPluginBabelHelpers.objectWithoutProperties(_props, _excluded2);
+      return /*#__PURE__*/React__namespace.cloneElement(child, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+        'aria-describedby': display === 'show' && srAnnouncement ? id : undefined,
+        className: classnames(tooltipClass, className, 'mrl-tooltip-trigger', display === 'show' && 'mrl-tooltip-trigger--active'),
+        onBlur: utils.curryHandlers(onBlur, handleHideTooltip)
+      }, clickToClose && !disableTooltipHover ? {
+        onMouseUp: utils.curryHandlers(onMouseUp, handleHideTooltip)
+      } : {}), {}, {
+        onFocus: utils.curryHandlers(onFocus, handleFocus),
+        onKeyDown: utils.curryHandlers(onKeyDown, handleKeyDown),
+        onMouseOut: utils.curryHandlers(onMouseOut, handleHideTooltip),
+        onMouseOver: utils.curryHandlers(onMouseOver, handleShowTooltip)
+      }, otherProps), {}, _rollupPluginBabelHelpers.defineProperty({
+        children: _children
+      }, 'data-tooltip-id', id)));
+    }
+    return child;
+  }), /*#__PURE__*/React__namespace.createElement(MrlPortal.MrlPortal, {
+    id: index$1.PORTAL_LAYERS.TOOLTIP.name,
+    layer: index$1.PORTAL_LAYERS.TOOLTIP,
+    className: index$1.PORTAL_LAYERS.TOOLTIP.name,
+    "data-qa": index$1.PORTAL_LAYERS.TOOLTIP.name
+  }, transitions(function (style, item) {
+    return item && /*#__PURE__*/React__namespace.createElement(web.animated.div, {
+      ref: tooltipRef,
+      style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, inlineStyles.menu), style)
+    }, /*#__PURE__*/React__namespace.createElement(MrlTooltipContent.MrlTooltipContent, _rollupPluginBabelHelpers.extends({}, rest, {
+      attrs: attrs,
+      anchor: anchor,
+      dataQa: dataQa,
+      kind: kind,
+      id: id,
+      position: position,
+      text: text,
+      tooltipContentClass: tooltipContentClass
+    })));
+  })));
+});
+MrlTooltip.displayName = 'MrlTooltip';
+
+exports.MrlTooltip = MrlTooltip;
+//# sourceMappingURL=MrlTooltip.js.map

package/dist/cjs/components/tooltip/MrlTooltip/MrlTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlTooltip.js","sources":["../../../../../src/components/tooltip/MrlTooltip/MrlTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AttrsObject, getUniqueId } from '../../../utils';\nimport {\n\tMrlTooltipAnchor,\n\tMrlTooltipDefaults,\n\tMrlTooltipPosition,\n\tMrlTooltipState,\n\tMrlTooltipVariant\n} from '../constants';\nimport { MrlTooltipContent } from '../MrlTooltipContent/MrlTooltipContent';\nimport { curryHandlers } from '../utils';\nimport classNames from 'classnames';\nimport { MrlPortal } from '../../portal';\nimport '../../../styles/shared/a11y-helpers/a11y.global.scss';\nimport { useTooltipPosition } from '../useTooltipPosition';\nimport { useTransition, animated } from '@react-spring/web';\nimport { PORTAL_LAYERS } from '../../../utils/layers';\n\ninterface MrlTooltipProps {\n\t/** The arrow position of the tooltip in relation to its trigger's content */\n\tanchor?: MrlTooltipAnchor;\n\n\t/**\n\t * Attributes that are applied to the component during the initial render.\n\t *\n\t * Example usage: html attributes, custom data attributes (data-qa), aria\n\t * @deprecated please use props for component instead\n\t */\n\tattrs?: AttrsObject;\n\n\t/**\n\t * Children to be rendered within the tooltip. The first child is used as the trigger.\n\t *\n\t * Warning: The tooltip is only setup to work with a single trigger. If multiple children\n\t * are passed in the component will not have event handling for the additional child elements.\n\t */\n\tchildren: React.ReactElement;\n\n\t/** Whether the tooltip should close when clicked */\n\tclickToClose?: boolean;\n\n\t/** The data-qa attribute for the tooltip */\n\tdataQa?: string;\n\n\t/** The state value to determine if the tooltip should be displayed */\n\tdisplay?: MrlTooltipState;\n\n\t/** Whether to disable the tooltip hover action that keeps it open */\n\tdisableTooltipHover?: boolean;\n\n\t/** The kind of tooltip to be rendered */\n\tkind?: MrlTooltipVariant;\n\n\t/** The placement of the tooltip in relation to its trigger */\n\tposition?: MrlTooltipPosition;\n\n\t/** Whether to announce the tooltip content to screen readers */\n\tsrAnnouncement?: boolean;\n\n\t/** The textual label of tooltip */\n\ttext: string;\n\n\t/** A custom class selector to be applied to the tooltip wrapper */\n\ttooltipClass?: string;\n\n\t/** A class to be applied ot the tooltip content */\n\ttooltipContentClass?: string;\n\n\t/** A custom render function to render the tooltip content */\n\tcustomRender?: (text?: string) => React.ReactNode;\n}\n\n/**\n * MrlTooltip Component\n *\n * This component is not displayed when rendering this component if the primary pointing device can’t hover. Examples include touchscreens and screens that use a basic drawing stylus.\n * Pointing devices that can hover, but for which doing so is inconvenient and not part of the normal way they are used, also match this criteria. For example, a touchscreen where a long press is treated as hovering.\n * @param {MrlTooltipProps} props - The props of the component\n * @returns {HTMLElement} a configured Tooltip component\n */\nexport const MrlTooltip = React.memo((props: MrlTooltipProps): React.ReactElement => {\n\tconst {\n\t\tchildren,\n\t\tclickToClose = true,\n\t\tdisableTooltipHover = false,\n\t\tdisplay: defaultDisplay = 'hide',\n\t\ttext,\n\t\tattrs = {},\n\t\tdataQa,\n\t\tkind = 'default',\n\t\tposition = MrlTooltipDefaults.position || 'top',\n\t\tanchor = MrlTooltipDefaults.anchor,\n\t\tsrAnnouncement = true,\n\t\ttooltipClass,\n\t\ttooltipContentClass,\n\t\t...rest\n\t} = props;\n\n\tconst [interaction, setInteraction] = React.useState('mouse');\n\n\tconst triggerRef = React.useRef<HTMLElement | null>(null);\n\n\tconst tooltipRef = React.useRef<HTMLDivElement>(null);\n\n\t/**\n\t * State value to determine if the tooltip should be displayed\n\t */\n\tconst [display, setDisplay] = React.useState<MrlTooltipState>(defaultDisplay);\n\n\t/**\n\t * State value to determine if the tooltip should be displayed\n\t */\n\tconst [id, setId] = React.useState<string>('');\n\n\t/**\n\t * Event handler to show tooltip when the trigger is focused\n\t */\n\tconst handleShowTooltip = React.useCallback(() => {\n\t\tsetDisplay('show');\n\t}, []);\n\n\tconst handleFocus = React.useCallback(() => {\n\t\tif (interaction === 'keyboard') {\n\t\t\thandleShowTooltip();\n\t\t}\n\t}, [interaction, handleShowTooltip]);\n\n\t/**\n\t * Event handler to hide the tooltip on mouseout\n\t */\n\tconst handleHideTooltip = (): void => {\n\t\tsetDisplay('hide');\n\t};\n\n\t/**\n\t * Event handler to hide the tooltip when a user presses escape\n\t * @param {React.KeyboardEvent} e Keyboard event\n\t */\n\tconst handleKeyDown = (e: React.KeyboardEvent): void => {\n\t\tif (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {\n\t\t\thandleHideTooltip();\n\t\t}\n\t};\n\n\tconst handleSetKeyboardInteraction = (e: KeyboardEvent) => {\n\t\tif (e.key === 'Tab' || e.key === 'Enter' || e.key === ' ') {\n\t\t\tsetInteraction('keyboard');\n\t\t}\n\t};\n\n\tconst handlesetMouseInteraction = () => setInteraction('mouse');\n\n\t/**\n\t * Setup of the initial component attributes and events\n\t */\n\tReact.useEffect(() => {\n\t\tif (id === '') setId(getUniqueId('mrl-tooltip'));\n\t}, [id]);\n\n\tReact.useEffect(() => {\n\t\tsetDisplay(defaultDisplay);\n\t}, [defaultDisplay]);\n\n\t/**\n\t * Setting the triggerRef to the trigger element\n\t *\n\t * We need to use 'querySelector' because we cannot pass a ref to the child object. There are\n\t * some situations where the child component may not accept a ref, for example: a react router\n\t * link is passed as a child. In older versions of react router you could not pass a ref to the\n\t * component so this causes an issue.\n\t */\n\tReact.useEffect(() => {\n\t\tconst trigger = document.querySelector(`[data-tooltip-id=\"${id}\"]`);\n\t\ttriggerRef.current = trigger as HTMLElement;\n\t}, [id]);\n\n\tReact.useEffect(() => {\n\t\tconst currentTooltipRef = tooltipRef.current;\n\n\t\tdocument.addEventListener('keydown', handleSetKeyboardInteraction);\n\t\tdocument.addEventListener('mousedown', handlesetMouseInteraction);\n\n\t\tif (!disableTooltipHover && currentTooltipRef) {\n\t\t\tcurrentTooltipRef.addEventListener('mouseover', handleShowTooltip);\n\t\t\tcurrentTooltipRef.addEventListener('mouseout', handleHideTooltip);\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (!disableTooltipHover && currentTooltipRef) {\n\t\t\t\tcurrentTooltipRef.removeEventListener('mouseover', handleShowTooltip);\n\t\t\t\tcurrentTooltipRef.removeEventListener('mouseout', handleHideTooltip);\n\t\t\t}\n\n\t\t\tdocument.removeEventListener('keydown', handleSetKeyboardInteraction);\n\t\t\tdocument.removeEventListener('mousedown', handlesetMouseInteraction);\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [handleShowTooltip, tooltipRef.current]);\n\n\tconst positionStyles = useTooltipPosition(\n\t\ttriggerRef,\n\t\ttooltipRef,\n\t\t{\n\t\t\talign: anchor,\n\t\t\tposition: position\n\t\t},\n\t\tdisplay === 'show',\n\t\t-1\n\t);\n\n\tconst inlineStyles = {\n\t\tmenu: {\n\t\t\tleft: positionStyles.left,\n\t\t\tposition: 'fixed' as const,\n\t\t\ttop: positionStyles.top\n\t\t}\n\t};\n\n\tconst transitions = useTransition(display === 'show', {\n\t\tconfig: { duration: display === 'show' ? 150 : 25 },\n\t\tenter: { opacity: 1 },\n\t\tfrom: { opacity: 0 },\n\t\tleave: { opacity: 0 }\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{React.Children.map(children, (child, index) => {\n\t\t\t\tif (index === 0 && React.isValidElement(child)) {\n\t\t\t\t\tconst {\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\tonBlur,\n\t\t\t\t\t\tonFocus,\n\t\t\t\t\t\tonKeyDown,\n\t\t\t\t\t\tonMouseOver,\n\t\t\t\t\t\tonMouseOut,\n\t\t\t\t\t\tonMouseUp,\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t...otherProps\n\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\t\t\t\t} = (child as any).props;\n\n\t\t\t\t\treturn React.cloneElement(child as React.ReactElement, {\n\t\t\t\t\t\t'aria-describedby': display === 'show' && srAnnouncement ? id : undefined,\n\t\t\t\t\t\tclassName: classNames(\n\t\t\t\t\t\t\ttooltipClass,\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'mrl-tooltip-trigger',\n\t\t\t\t\t\t\tdisplay === 'show' && 'mrl-tooltip-trigger--active'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tonBlur: curryHandlers(onBlur, handleHideTooltip),\n\t\t\t\t\t\t...(clickToClose && !disableTooltipHover\n\t\t\t\t\t\t\t? { onMouseUp: curryHandlers(onMouseUp, handleHideTooltip) }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\tonFocus: curryHandlers(onFocus, handleFocus),\n\t\t\t\t\t\tonKeyDown: curryHandlers(onKeyDown, handleKeyDown),\n\t\t\t\t\t\tonMouseOut: curryHandlers(onMouseOut, handleHideTooltip),\n\t\t\t\t\t\tonMouseOver: curryHandlers(onMouseOver, handleShowTooltip),\n\t\t\t\t\t\t...otherProps,\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t['data-tooltip-id']: id\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\treturn child;\n\t\t\t})}\n\t\t\t<MrlPortal\n\t\t\t\tid={PORTAL_LAYERS.TOOLTIP.name}\n\t\t\t\tlayer={PORTAL_LAYERS.TOOLTIP}\n\t\t\t\tclassName={PORTAL_LAYERS.TOOLTIP.name}\n\t\t\t\tdata-qa={PORTAL_LAYERS.TOOLTIP.name}\n\t\t\t>\n\t\t\t\t{transitions(\n\t\t\t\t\t(style, item) =>\n\t\t\t\t\t\titem && (\n\t\t\t\t\t\t\t<animated.div ref={tooltipRef} style={{ ...inlineStyles.menu, ...style }}>\n\t\t\t\t\t\t\t\t<MrlTooltipContent\n\t\t\t\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\t\t\t\tattrs={attrs}\n\t\t\t\t\t\t\t\t\tanchor={anchor}\n\t\t\t\t\t\t\t\t\tdataQa={dataQa}\n\t\t\t\t\t\t\t\t\tkind={kind}\n\t\t\t\t\t\t\t\t\tid={id}\n\t\t\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\t\t\ttext={text}\n\t\t\t\t\t\t\t\t\ttooltipContentClass={tooltipContentClass}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</animated.div>\n\t\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</MrlPortal>\n\t\t</>\n\t);\n});\n\nMrlTooltip.displayName = 'MrlTooltip';\n"],"names":["MrlTooltip","React","memo","props","children","_props$clickToClose","clickToClose","_props$disableTooltip","disableTooltipHover","_props$display","display","defaultDisplay","text","_props$attrs","attrs","dataQa","_props$kind","kind","_props$position","position","MrlTooltipDefaults","_props$anchor","anchor","_props$srAnnouncement","srAnnouncement","tooltipClass","tooltipContentClass","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","interaction","setInteraction","triggerRef","useRef","tooltipRef","_React$useState3","_React$useState4","setDisplay","_React$useState5","_React$useState6","id","setId","handleShowTooltip","useCallback","handleFocus","handleHideTooltip","handleKeyDown","e","key","handleSetKeyboardInteraction","handlesetMouseInteraction","useEffect","getUniqueId","trigger","document","querySelector","concat","current","currentTooltipRef","addEventListener","removeEventListener","positionStyles","useTooltipPosition","align","inlineStyles","menu","left","top","transitions","useTransition","config","duration","enter","opacity","from","leave","createElement","Fragment","Children","map","child","index","isValidElement","_props","className","onBlur","onFocus","onKeyDown","onMouseOver","onMouseOut","onMouseUp","otherProps","_excluded2","cloneElement","_objectSpread","undefined","classNames","curryHandlers","_defineProperty","MrlPortal","PORTAL_LAYERS","TOOLTIP","name","layer","style","item","animated","div","ref","MrlTooltipContent","_extends","displayName"],"mappings":"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"}

package/dist/cjs/components/tooltip/MrlTooltipContent/MrlTooltipContent.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+var constants = require('../constants.js');
+var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _excluded = ["anchor", "attrs", "dataQa", "id", "kind", "position", "text", "tooltipContentClass", "customRender"];
+/**
+ * MrlTooltipContent Component
+ *
+ * The tooltip content is the text that is displayed when the user hovers over the trigger.
+ * IMPORTANT: This component is not intended to be used directly, it should always be a child of MrlTooltip.
+ * @param {MrlTooltipContentProps} props - the props of the tooltip content
+ * @returns {HTMLElement} a configured Tooltip Content component
+ */
+var MrlTooltipContent = function MrlTooltipContent(props) {
+  var anchor = props.anchor,
+    attrs = props.attrs,
+    dataQa = props.dataQa,
+    id = props.id,
+    kind = props.kind,
+    position = props.position,
+    text = props.text,
+    tooltipContentClass = props.tooltipContentClass,
+    customRender = props.customRender,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var attributes = setAttributes.setAttributes(attrs, constants.MrlTooltipDefaults.attrs);
+  var classes = setAttributes.setClasses(attrs, {});
+  var tooltipClasses = classnames('mrl-tooltip-content', _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(classes), classes !== undefined), 'has-custom-render', typeof customRender === 'function'), 'mrl-tooltip-content--inverse', kind === 'inverse'), "".concat(tooltipContentClass), tooltipContentClass !== undefined));
+  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    "data-anchor": anchor,
+    "data-position": position,
+    "data-qa": dataQa,
+    id: id,
+    role: "tooltip"
+  }, attributes, {
+    className: tooltipClasses
+  }), customRender && typeof customRender === 'function' ? customRender(text) : text, /*#__PURE__*/React__namespace.createElement("div", {
+    className: "mrl-tooltip-content__hover"
+  }));
+};
+
+exports.MrlTooltipContent = MrlTooltipContent;
+//# sourceMappingURL=MrlTooltipContent.js.map

package/dist/cjs/components/tooltip/MrlTooltipContent/MrlTooltipContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlTooltipContent.js","sources":["../../../../../src/components/tooltip/MrlTooltipContent/MrlTooltipContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, setAttributes, setClasses } from '../../../utils';\nimport {\n\tMrlTooltipAnchor,\n\tMrlTooltipDefaults,\n\tMrlTooltipPosition,\n\tMrlTooltipVariant\n} from '../constants';\nimport './MrlTooltipContent.global.scss';\n\ninterface MrlTooltipContentProps {\n\t/**\n\t * The arrow position of the tooltip in relation to its trigger's content.\n\t * Note, if the content is shorter than the width of the trigger, always use\n\t * \"center\" to ensure the arrow does not become misaligned.\n\t */\n\tanchor: MrlTooltipAnchor;\n\n\t/**\n\t * Attributes that are applied to the component during the initial render.\n\t *\n\t * Example usage: html attributes, custom data attributes (data-qa), aria\n\t * @deprecated please use props for component instead\n\t */\n\tattrs: AttrsObject;\n\n\t/** dataQa attribute for tooltip */\n\tdataQa?: string;\n\n\t/** The kind of tooltip to be rendered */\n\tkind: MrlTooltipVariant;\n\n\t/** The id of the tooltip used for aria-describedby in the parent component */\n\tid?: string;\n\n\t/** The placement of the tooltip in relation to its trigger */\n\tposition: MrlTooltipPosition;\n\n\t/** The tooltip content to display */\n\ttext: string;\n\n\t/** A class to be applied ot the tooltip content */\n\ttooltipContentClass?: string;\n\n\t/** A custom render function to render the tooltip content */\n\tcustomRender?: (text?: string) => React.ReactNode;\n}\n\n/**\n * MrlTooltipContent Component\n *\n * The tooltip content is the text that is displayed when the user hovers over the trigger.\n * IMPORTANT: This component is not intended to be used directly, it should always be a child of MrlTooltip.\n * @param {MrlTooltipContentProps} props - the props of the tooltip content\n * @returns {HTMLElement} a configured Tooltip Content component\n */\nexport const MrlTooltipContent = (props: MrlTooltipContentProps): React.ReactElement => {\n\tconst {\n\t\tanchor,\n\t\tattrs,\n\t\tdataQa,\n\t\tid,\n\t\tkind,\n\t\tposition,\n\t\ttext,\n\t\ttooltipContentClass,\n\t\tcustomRender,\n\t\t...rest\n\t} = props;\n\n\tconst attributes = setAttributes(attrs, MrlTooltipDefaults.attrs);\n\tconst classes = setClasses(attrs, {});\n\tconst tooltipClasses = classnames('mrl-tooltip-content', {\n\t\t[`${classes}`]: classes !== undefined,\n\t\t'has-custom-render': typeof customRender === 'function',\n\t\t'mrl-tooltip-content--inverse': kind === 'inverse',\n\t\t[`${tooltipContentClass}`]: tooltipContentClass !== undefined\n\t});\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tdata-anchor={anchor}\n\t\t\tdata-position={position}\n\t\t\tdata-qa={dataQa}\n\t\t\tid={id}\n\t\t\trole=\"tooltip\"\n\t\t\t{...attributes}\n\t\t\tclassName={tooltipClasses}\n\t\t>\n\t\t\t{customRender && typeof customRender === 'function' ? customRender(text) : text}\n\t\t\t<div className=\"mrl-tooltip-content__hover\" />\n\t\t</div>\n\t);\n};\n"],"names":["MrlTooltipContent","props","anchor","attrs","dataQa","id","kind","position","text","tooltipContentClass","customRender","rest","_objectWithoutProperties","_excluded","attributes","setAttributes","MrlTooltipDefaults","classes","setClasses","tooltipClasses","classnames","_defineProperty","concat","undefined","React","createElement","_extends","role","className"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,KAA6B,EAAyB;AACvF,EAAA,IACCC,MAAM,GAUHD,KAAK,CAVRC,MAAM;IACNC,KAAK,GASFF,KAAK,CATRE,KAAK;IACLC,MAAM,GAQHH,KAAK,CARRG,MAAM;IACNC,EAAE,GAOCJ,KAAK,CAPRI,EAAE;IACFC,IAAI,GAMDL,KAAK,CANRK,IAAI;IACJC,QAAQ,GAKLN,KAAK,CALRM,QAAQ;IACRC,IAAI,GAIDP,KAAK,CAJRO,IAAI;IACJC,mBAAmB,GAGhBR,KAAK,CAHRQ,mBAAmB;IACnBC,YAAY,GAETT,KAAK,CAFRS,YAAY;AACTC,IAAAA,IAAI,GAAAC,iDAAA,CACJX,KAAK,EAAAY,SAAA,CAAA;EAET,IAAMC,UAAU,GAAGC,2BAAa,CAACZ,KAAK,EAAEa,4BAAkB,CAACb,KAAK,CAAC;EACjE,IAAMc,OAAO,GAAGC,wBAAU,CAACf,KAAK,EAAE,EAAE,CAAC;AACrC,EAAA,IAAMgB,cAAc,GAAGC,UAAU,CAAC,qBAAqB,EAAAC,wCAAA,CAAAA,wCAAA,CAAAA,wCAAA,CAAAA,wCAAA,CAAA,EAAA,EAAA,EAAA,CAAAC,MAAA,CAClDL,OAAO,CAAA,EAAKA,OAAO,KAAKM,SAAS,GACrC,mBAAmB,EAAE,OAAOb,YAAY,KAAK,UAAU,CAAA,EACvD,8BAA8B,EAAEJ,IAAI,KAAK,SAAS,CAAA,EAAA,EAAA,CAAAgB,MAAA,CAC9Cb,mBAAmB,CAAA,EAAKA,mBAAmB,KAAKc,SAAS,CAC7D,CAAC;AAEF,EAAA,oBACCC,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,iCAAA,KACKf,IAAI,EAAA;AACR,IAAA,aAAA,EAAaT,MAAO;AACpB,IAAA,eAAA,EAAeK,QAAS;AACxB,IAAA,SAAA,EAASH,MAAO;AAChBC,IAAAA,EAAE,EAAEA,EAAG;AACPsB,IAAAA,IAAI,EAAC;AAAS,GAAA,EACVb,UAAU,EAAA;AACdc,IAAAA,SAAS,EAAET;AAAe,GAAA,CAAA,EAEzBT,YAAY,IAAI,OAAOA,YAAY,KAAK,UAAU,GAAGA,YAAY,CAACF,IAAI,CAAC,GAAGA,IAAI,eAC/EgB,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKG,IAAAA,SAAS,EAAC;AAA4B,GAAE,CACzC,CAAC;AAER;;;;"}

package/dist/cjs/components/tooltip/constants.js

@@ -0,0 +1,25 @@
+'use strict';
+
+/**
+ * Defines all the values allowed for tooltip props.
+ * Used for Storybook and testing
+ */
+var allowedMrlTooltipValues = {
+  anchors: ['start', 'center', 'end'],
+  positions: ['top', 'bottom', 'left', 'right'],
+  state: ['show', 'hide']
+};
+/**
+ * Default values for props on the Tooltip component;
+ * Shared between the component and Storybook
+ */
+var MrlTooltipDefaults = {
+  anchor: 'center',
+  attrs: {},
+  position: 'right',
+  state: 'hide'
+};
+
+exports.MrlTooltipDefaults = MrlTooltipDefaults;
+exports.allowedMrlTooltipValues = allowedMrlTooltipValues;
+//# sourceMappingURL=constants.js.map

package/dist/cjs/components/tooltip/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/components/tooltip/constants.ts"],"sourcesContent":["import { AttrsObject } from '../../utils';\n\n/**\n * Defines all the values allowed for tooltip props.\n * Used for Storybook and testing\n */\nexport const allowedMrlTooltipValues = {\n\tanchors: ['start', 'center', 'end'] as const,\n\tpositions: ['top', 'bottom', 'left', 'right'] as const,\n\tstate: ['show', 'hide'] as const\n};\n\nexport type MrlTooltipPosition = (typeof allowedMrlTooltipValues.positions)[number];\nexport type MrlTooltipAnchor = (typeof allowedMrlTooltipValues.anchors)[number];\nexport type MrlTooltipState = (typeof allowedMrlTooltipValues.state)[number];\n\nexport interface MrlTooltipDefaults {\n\tanchor: MrlTooltipAnchor;\n\tattrs: AttrsObject;\n\tposition: MrlTooltipPosition;\n\tstate: MrlTooltipState;\n}\n\n/**\n * Default values for props on the Tooltip component;\n * Shared between the component and Storybook\n */\nexport const MrlTooltipDefaults: MrlTooltipDefaults = {\n\tanchor: 'center',\n\tattrs: {},\n\tposition: 'right',\n\tstate: 'hide'\n};\n\nexport type MrlTooltipVariant = 'default' | 'inverse';\n\nexport type TooltipAlignment = 'start' | 'end' | 'center';\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\n"],"names":["allowedMrlTooltipValues","anchors","positions","state","MrlTooltipDefaults","anchor","attrs","position"],"mappings":";;AAEA;AACA;AACA;AACA;AACO,IAAMA,uBAAuB,GAAG;AACtCC,EAAAA,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAU;EAC5CC,SAAS,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAU;AACtDC,EAAAA,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM;AACvB;AAaA;AACA;AACA;AACA;AACO,IAAMC,kBAAsC,GAAG;AACrDC,EAAAA,MAAM,EAAE,QAAQ;EAChBC,KAAK,EAAE,EAAE;AACTC,EAAAA,QAAQ,EAAE,OAAO;AACjBJ,EAAAA,KAAK,EAAE;AACR;;;;;"}

package/dist/cjs/components/tooltip/useTooltipPosition/index.js

@@ -0,0 +1,129 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var utilities = require('./utilities.js');
+var debounce = require('lodash.debounce');
+
+/**
+ * A custom hook to calculate and manage the position of a tooltip element relative to its trigger element.
+ *
+ * @param {RefObject<HTMLElement>} triggerRef - Reference to the DOM element that triggers the menu.
+ * @param {RefObject<HTMLElement>} elementRef - Reference to the DOM element that is the menu.
+ * @param {TooltipPlacement} placement - The alignment configuration of the menu.
+ * @param {boolean} isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.
+ * @param {number} tooltipOffset - The offset of the menu from the trigger element.
+ * @param {boolean} disable - Whether to disable the hook.
+ * @returns {Position} The calculated position of the menu element.
+ */
+var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, placement) {
+  var isElementVisible = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  var tooltipOffset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 10;
+  var disable = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var offset = tooltipOffset;
+  var _useState = React.useState({
+      left: 0,
+      top: 0
+    }),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    tooltipPosition = _useState2[0],
+    setTooltipPosition = _useState2[1];
+  var alignment = React.useMemo(function () {
+    return {
+      align: placement.align,
+      position: placement.position
+    };
+  }, [placement.align, placement.position]);
+  var updatePosition = React.useCallback(function () {
+    if (elementRef.current && isElementVisible) {
+      var _triggerRef$current;
+      var triggerRect = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.getBoundingClientRect();
+      var elementRect = elementRef.current.getBoundingClientRect();
+      var newPosition = utilities.calculatePosition(alignment, offset, elementRect, triggerRect);
+
+      // only update if we have a new position
+      setTooltipPosition(function (prevPosition) {
+        if (prevPosition.left !== newPosition.left || prevPosition.top !== newPosition.top) {
+          return newPosition;
+        }
+        return prevPosition;
+      });
+    }
+  }, [alignment, elementRef, isElementVisible, offset, triggerRef]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var debouncedUpdatePosition = React.useCallback(debounce(function () {
+    updatePosition();
+  }, 5), [updatePosition]);
+  React.useEffect(function () {
+    if (!disable) {
+      var currentElement = elementRef.current;
+
+      // We need to debounce the resize observer to prevent "resize loops"
+      // there are instances where the resize observer will trigger a resize event
+      // before the browser has painted which throws a loop of resize events
+      // and causes errors on the window
+      //
+      // The observers are purposefully using a different debounce than the event listeners
+      // as the observers need to be debounced to prevent loops, but updating the position
+      // needs to happen more immediately
+      var resizeObserver = new ResizeObserver(debounce(updatePosition));
+      var mutationObserver = new MutationObserver(debounce(updatePosition));
+      if (currentElement) {
+        resizeObserver.observe(currentElement);
+        mutationObserver.observe(currentElement, {
+          attributeFilter: ['style', 'class'],
+          attributes: true
+        });
+      }
+      if (isElementVisible) {
+        updatePosition();
+        window.addEventListener('resize', debouncedUpdatePosition);
+        window.addEventListener('scroll', debouncedUpdatePosition);
+      }
+      return function () {
+        if (currentElement) {
+          resizeObserver.unobserve(currentElement);
+          mutationObserver.disconnect();
+        }
+        window.removeEventListener('resize', debouncedUpdatePosition);
+        window.removeEventListener('scroll', debouncedUpdatePosition);
+      };
+    }
+  }, [disable, triggerRef, elementRef, alignment, offset, isElementVisible, updatePosition, debouncedUpdatePosition]);
+  React.useLayoutEffect(function () {
+    if (isElementVisible && !disable && elementRef.current && triggerRef !== null && triggerRef !== void 0 && triggerRef.current) {
+      // Recalculate position when the tooltip is first shown
+      updatePosition();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isElementVisible, updatePosition, disable, elementRef.current, triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current]);
+
+  /**
+   * This effect is used to track the position of the trigger element
+   * when the tooltip is visible. It will update the position of the tooltip
+   */
+  React.useEffect(function () {
+    if (!disable && isElementVisible && triggerRef !== null && triggerRef !== void 0 && triggerRef.current && elementRef.current) {
+      var animationFrameId;
+      var prevRect;
+      var _trackPosition = function trackPosition() {
+        var _triggerRef$current2;
+        var currentRect = (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.getBoundingClientRect();
+        if (currentRect && (!prevRect || utilities.positionChanged(prevRect, currentRect))) {
+          updatePosition();
+          prevRect = currentRect;
+        }
+        animationFrameId = requestAnimationFrame(_trackPosition);
+      };
+      animationFrameId = requestAnimationFrame(_trackPosition);
+      return function () {
+        cancelAnimationFrame(animationFrameId);
+      };
+    }
+  }, [disable, isElementVisible, triggerRef, elementRef, updatePosition]);
+  return tooltipPosition;
+};
+
+exports.useTooltipPosition = useTooltipPosition;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/tooltip/useTooltipPosition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/tooltip/useTooltipPosition/index.tsx"],"sourcesContent":["import { useMemo, useState, RefObject, useEffect, useCallback, useLayoutEffect } from 'react';\nimport { TooltipPlacement, Position } from './constants';\nimport { calculatePosition, positionChanged } from './utilities';\nimport debounce from 'lodash.debounce';\n\n/**\n * A custom hook to calculate and manage the position of a tooltip element relative to its trigger element.\n *\n * @param {RefObject<HTMLElement>} triggerRef - Reference to the DOM element that triggers the menu.\n * @param {RefObject<HTMLElement>} elementRef - Reference to the DOM element that is the menu.\n * @param {TooltipPlacement} placement - The alignment configuration of the menu.\n * @param {boolean} isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.\n * @param {number} tooltipOffset - The offset of the menu from the trigger element.\n * @param {boolean} disable - Whether to disable the hook.\n * @returns {Position} The calculated position of the menu element.\n */\nexport const useTooltipPosition = (\n\ttriggerRef: RefObject<HTMLElement> | undefined,\n\telementRef: RefObject<HTMLElement>,\n\tplacement: TooltipPlacement,\n\tisElementVisible = true,\n\ttooltipOffset = 10,\n\tdisable = false\n): Position => {\n\tconst offset = tooltipOffset;\n\tconst [tooltipPosition, setTooltipPosition] = useState<Position>({ left: 0, top: 0 });\n\n\tconst alignment = useMemo(\n\t\t() => ({\n\t\t\talign: placement.align,\n\t\t\tposition: placement.position\n\t\t}),\n\t\t[placement.align, placement.position]\n\t);\n\n\tconst updatePosition = useCallback(() => {\n\t\tif (elementRef.current && isElementVisible) {\n\t\t\tconst triggerRect = triggerRef?.current?.getBoundingClientRect();\n\t\t\tconst elementRect = elementRef.current.getBoundingClientRect();\n\t\t\tconst newPosition = calculatePosition(alignment, offset, elementRect, triggerRect);\n\n\t\t\t// only update if we have a new position\n\t\t\tsetTooltipPosition((prevPosition) => {\n\t\t\t\tif (prevPosition.left !== newPosition.left || prevPosition.top !== newPosition.top) {\n\t\t\t\t\treturn newPosition;\n\t\t\t\t}\n\t\t\t\treturn prevPosition;\n\t\t\t});\n\t\t}\n\t}, [alignment, elementRef, isElementVisible, offset, triggerRef]);\n\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\tconst debouncedUpdatePosition = useCallback(\n\t\tdebounce(() => {\n\t\t\tupdatePosition();\n\t\t}, 5),\n\t\t[updatePosition]\n\t);\n\n\tuseEffect(() => {\n\t\tif (!disable) {\n\t\t\tconst currentElement = elementRef.current;\n\n\t\t\t// We need to debounce the resize observer to prevent \"resize loops\"\n\t\t\t// there are instances where the resize observer will trigger a resize event\n\t\t\t// before the browser has painted which throws a loop of resize events\n\t\t\t// and causes errors on the window\n\t\t\t//\n\t\t\t// The observers are purposefully using a different debounce than the event listeners\n\t\t\t// as the observers need to be debounced to prevent loops, but updating the position\n\t\t\t// needs to happen more immediately\n\t\t\tconst resizeObserver = new ResizeObserver(debounce(updatePosition));\n\t\t\tconst mutationObserver = new MutationObserver(debounce(updatePosition));\n\n\t\t\tif (currentElement) {\n\t\t\t\tresizeObserver.observe(currentElement);\n\t\t\t\tmutationObserver.observe(currentElement, {\n\t\t\t\t\tattributeFilter: ['style', 'class'],\n\t\t\t\t\tattributes: true\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (isElementVisible) {\n\t\t\t\tupdatePosition();\n\t\t\t\twindow.addEventListener('resize', debouncedUpdatePosition);\n\t\t\t\twindow.addEventListener('scroll', debouncedUpdatePosition);\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tif (currentElement) {\n\t\t\t\t\tresizeObserver.unobserve(currentElement);\n\t\t\t\t\tmutationObserver.disconnect();\n\t\t\t\t}\n\t\t\t\twindow.removeEventListener('resize', debouncedUpdatePosition);\n\t\t\t\twindow.removeEventListener('scroll', debouncedUpdatePosition);\n\t\t\t};\n\t\t}\n\t}, [\n\t\tdisable,\n\t\ttriggerRef,\n\t\telementRef,\n\t\talignment,\n\t\toffset,\n\t\tisElementVisible,\n\t\tupdatePosition,\n\t\tdebouncedUpdatePosition\n\t]);\n\n\tuseLayoutEffect(() => {\n\t\tif (isElementVisible && !disable && elementRef.current && triggerRef?.current) {\n\t\t\t// Recalculate position when the tooltip is first shown\n\t\t\tupdatePosition();\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [isElementVisible, updatePosition, disable, elementRef.current, triggerRef?.current]);\n\n\t/**\n\t * This effect is used to track the position of the trigger element\n\t * when the tooltip is visible. It will update the position of the tooltip\n\t */\n\tuseEffect(() => {\n\t\tif (!disable && isElementVisible && triggerRef?.current && elementRef.current) {\n\t\t\tlet animationFrameId: number;\n\t\t\tlet prevRect: DOMRect | undefined;\n\n\t\t\tconst trackPosition = () => {\n\t\t\t\tconst currentRect = triggerRef.current?.getBoundingClientRect();\n\t\t\t\tif (currentRect && (!prevRect || positionChanged(prevRect, currentRect))) {\n\t\t\t\t\tupdatePosition();\n\t\t\t\t\tprevRect = currentRect;\n\t\t\t\t}\n\t\t\t\tanimationFrameId = requestAnimationFrame(trackPosition);\n\t\t\t};\n\n\t\t\tanimationFrameId = requestAnimationFrame(trackPosition);\n\n\t\t\treturn () => {\n\t\t\t\tcancelAnimationFrame(animationFrameId);\n\t\t\t};\n\t\t}\n\t}, [disable, isElementVisible, triggerRef, elementRef, updatePosition]);\n\n\treturn tooltipPosition;\n};\n"],"names":["useTooltipPosition","triggerRef","elementRef","placement","isElementVisible","arguments","length","undefined","tooltipOffset","disable","offset","_useState","useState","left","top","_useState2","_slicedToArray","tooltipPosition","setTooltipPosition","alignment","useMemo","align","position","updatePosition","useCallback","current","_triggerRef$current","triggerRect","getBoundingClientRect","elementRect","newPosition","calculatePosition","prevPosition","debouncedUpdatePosition","debounce","useEffect","currentElement","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","attributeFilter","attributes","window","addEventListener","unobserve","disconnect","removeEventListener","useLayoutEffect","animationFrameId","prevRect","trackPosition","_triggerRef$current2","currentRect","positionChanged","requestAnimationFrame","cancelAnimationFrame"],"mappings":"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"}

package/dist/cjs/components/tooltip/useTooltipPosition/utilities.js

@@ -0,0 +1,81 @@
+'use strict';
+
+/**
+ * Calculates the position of an element (e.g., a tooltip or menu) based on alignment and offset.
+ *
+ * @param alignment - Object containing position ('top', 'bottom', 'left', 'right') and anchor ('start', 'center', 'end').
+ * @param offset - Number of pixels to offset the positioned element.
+ * @param elementRect - Bounding rect of the element being positioned.
+ * @param triggerRect - Bounding rect of the trigger element.
+ * @returns {Position} An object with `left` and `top` coordinates for the element (keys sorted alphabetically).
+ */
+var calculatePosition = function calculatePosition(alignment, offset, elementRect, triggerRect) {
+  if (!triggerRect) {
+    // fallback to (0,0) if no trigger is available
+    return {
+      left: 0,
+      top: 0
+    };
+  }
+  var position = alignment.position;
+
+  // For left/right positioned tooltips or menus, always center align vertically
+  // regardless of the provided `align` value
+  var anchor = position === 'left' || position === 'right' ? 'center' : alignment.align;
+  var top = 0;
+  var left = 0;
+
+  // Primary positioning based on side
+  switch (position) {
+    case 'top':
+      top = triggerRect.top - elementRect.height - offset;
+      break;
+    case 'bottom':
+      top = triggerRect.bottom + offset;
+      break;
+    case 'left':
+      left = triggerRect.left - elementRect.width - offset;
+      break;
+    case 'right':
+      left = triggerRect.right + offset;
+      break;
+  }
+
+  // Secondary alignment
+  switch (position) {
+    case 'top':
+    case 'bottom':
+      if (anchor === 'start') {
+        left = triggerRect.left;
+      } else if (anchor === 'center') {
+        left = triggerRect.left + (triggerRect.width - elementRect.width) / 2;
+      } else if (anchor === 'end') {
+        left = triggerRect.right - elementRect.width;
+      }
+      break;
+    case 'left':
+    case 'right':
+      // forced to center alignment vertically
+      top = triggerRect.top + (triggerRect.height - elementRect.height) / 2;
+      break;
+  }
+  return {
+    left: left,
+    top: top
+  };
+};
+
+/**
+ * Determines if the position of an element has changed significantly.
+ *
+ * @param prev - The previous bounding rectangle of the element.
+ * @param next - The current bounding rectangle of the element.
+ * @returns {boolean} True if the position has changed by more than 0.5 pixels, false otherwise.
+ */
+var positionChanged = function positionChanged(prev, next) {
+  return Math.abs(prev.top - next.top) > 0.5 || Math.abs(prev.left - next.left) > 0.5;
+};
+
+exports.calculatePosition = calculatePosition;
+exports.positionChanged = positionChanged;
+//# sourceMappingURL=utilities.js.map

package/dist/cjs/components/tooltip/useTooltipPosition/utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.js","sources":["../../../../../src/components/tooltip/useTooltipPosition/utilities.ts"],"sourcesContent":["import { TooltipPlacement, Position } from './constants';\n\n/**\n * Calculates the position of an element (e.g., a tooltip or menu) based on alignment and offset.\n *\n * @param alignment - Object containing position ('top', 'bottom', 'left', 'right') and anchor ('start', 'center', 'end').\n * @param offset - Number of pixels to offset the positioned element.\n * @param elementRect - Bounding rect of the element being positioned.\n * @param triggerRect - Bounding rect of the trigger element.\n * @returns {Position} An object with `left` and `top` coordinates for the element (keys sorted alphabetically).\n */\nexport const calculatePosition = (\n\talignment: TooltipPlacement,\n\toffset: number,\n\telementRect: DOMRect,\n\ttriggerRect?: DOMRect\n): Position => {\n\tif (!triggerRect) {\n\t\t// fallback to (0,0) if no trigger is available\n\t\treturn { left: 0, top: 0 };\n\t}\n\n\tconst { position } = alignment;\n\n\t// For left/right positioned tooltips or menus, always center align vertically\n\t// regardless of the provided `align` value\n\tconst anchor = position === 'left' || position === 'right' ? 'center' : alignment.align;\n\n\tlet top = 0;\n\tlet left = 0;\n\n\t// Primary positioning based on side\n\tswitch (position) {\n\t\tcase 'top':\n\t\t\ttop = triggerRect.top - elementRect.height - offset;\n\t\t\tbreak;\n\t\tcase 'bottom':\n\t\t\ttop = triggerRect.bottom + offset;\n\t\t\tbreak;\n\t\tcase 'left':\n\t\t\tleft = triggerRect.left - elementRect.width - offset;\n\t\t\tbreak;\n\t\tcase 'right':\n\t\t\tleft = triggerRect.right + offset;\n\t\t\tbreak;\n\t}\n\n\t// Secondary alignment\n\tswitch (position) {\n\t\tcase 'top':\n\t\tcase 'bottom':\n\t\t\tif (anchor === 'start') {\n\t\t\t\tleft = triggerRect.left;\n\t\t\t} else if (anchor === 'center') {\n\t\t\t\tleft = triggerRect.left + (triggerRect.width - elementRect.width) / 2;\n\t\t\t} else if (anchor === 'end') {\n\t\t\t\tleft = triggerRect.right - elementRect.width;\n\t\t\t}\n\t\t\tbreak;\n\n\t\tcase 'left':\n\t\tcase 'right':\n\t\t\t// forced to center alignment vertically\n\t\t\ttop = triggerRect.top + (triggerRect.height - elementRect.height) / 2;\n\t\t\tbreak;\n\t}\n\n\treturn { left, top };\n};\n\n/**\n * Determines if the position of an element has changed significantly.\n *\n * @param prev - The previous bounding rectangle of the element.\n * @param next - The current bounding rectangle of the element.\n * @returns {boolean} True if the position has changed by more than 0.5 pixels, false otherwise.\n */\nexport const positionChanged = (prev: DOMRect, next: DOMRect): boolean => {\n\treturn Math.abs(prev.top - next.top) > 0.5 || Math.abs(prev.left - next.left) > 0.5;\n};\n"],"names":["calculatePosition","alignment","offset","elementRect","triggerRect","left","top","position","anchor","align","height","bottom","width","right","positionChanged","prev","next","Math","abs"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC7BC,SAA2B,EAC3BC,MAAc,EACdC,WAAoB,EACpBC,WAAqB,EACP;EACd,IAAI,CAACA,WAAW,EAAE;AACjB;IACA,OAAO;AAAEC,MAAAA,IAAI,EAAE,CAAC;AAAEC,MAAAA,GAAG,EAAE;KAAG;AAC3B,EAAA;AAEA,EAAA,IAAQC,QAAQ,GAAKN,SAAS,CAAtBM,QAAQ;;AAEhB;AACA;AACA,EAAA,IAAMC,MAAM,GAAGD,QAAQ,KAAK,MAAM,IAAIA,QAAQ,KAAK,OAAO,GAAG,QAAQ,GAAGN,SAAS,CAACQ,KAAK;EAEvF,IAAIH,GAAG,GAAG,CAAC;EACX,IAAID,IAAI,GAAG,CAAC;;AAEZ;AACA,EAAA,QAAQE,QAAQ;AACf,IAAA,KAAK,KAAK;MACTD,GAAG,GAAGF,WAAW,CAACE,GAAG,GAAGH,WAAW,CAACO,MAAM,GAAGR,MAAM;AACnD,MAAA;AACD,IAAA,KAAK,QAAQ;AACZI,MAAAA,GAAG,GAAGF,WAAW,CAACO,MAAM,GAAGT,MAAM;AACjC,MAAA;AACD,IAAA,KAAK,MAAM;MACVG,IAAI,GAAGD,WAAW,CAACC,IAAI,GAAGF,WAAW,CAACS,KAAK,GAAGV,MAAM;AACpD,MAAA;AACD,IAAA,KAAK,OAAO;AACXG,MAAAA,IAAI,GAAGD,WAAW,CAACS,KAAK,GAAGX,MAAM;AACjC,MAAA;AACF;;AAEA;AACA,EAAA,QAAQK,QAAQ;AACf,IAAA,KAAK,KAAK;AACV,IAAA,KAAK,QAAQ;MACZ,IAAIC,MAAM,KAAK,OAAO,EAAE;QACvBH,IAAI,GAAGD,WAAW,CAACC,IAAI;AACxB,MAAA,CAAC,MAAM,IAAIG,MAAM,KAAK,QAAQ,EAAE;AAC/BH,QAAAA,IAAI,GAAGD,WAAW,CAACC,IAAI,GAAG,CAACD,WAAW,CAACQ,KAAK,GAAGT,WAAW,CAACS,KAAK,IAAI,CAAC;AACtE,MAAA,CAAC,MAAM,IAAIJ,MAAM,KAAK,KAAK,EAAE;AAC5BH,QAAAA,IAAI,GAAGD,WAAW,CAACS,KAAK,GAAGV,WAAW,CAACS,KAAK;AAC7C,MAAA;AACA,MAAA;AAED,IAAA,KAAK,MAAM;AACX,IAAA,KAAK,OAAO;AACX;AACAN,MAAAA,GAAG,GAAGF,WAAW,CAACE,GAAG,GAAG,CAACF,WAAW,CAACM,MAAM,GAAGP,WAAW,CAACO,MAAM,IAAI,CAAC;AACrE,MAAA;AACF;EAEA,OAAO;AAAEL,IAAAA,IAAI,EAAJA,IAAI;AAAEC,IAAAA,GAAG,EAAHA;GAAK;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMQ,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAAa,EAAEC,IAAa,EAAc;AACzE,EAAA,OAAOC,IAAI,CAACC,GAAG,CAACH,IAAI,CAACT,GAAG,GAAGU,IAAI,CAACV,GAAG,CAAC,GAAG,GAAG,IAAIW,IAAI,CAACC,GAAG,CAACH,IAAI,CAACV,IAAI,GAAGW,IAAI,CAACX,IAAI,CAAC,GAAG,GAAG;AACpF;;;;;"}