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

package/dist/cjs/components/toolbar/MrlToolbarButton/MrlToolbarButton.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var MrlToolbarButton_module = require('./MrlToolbarButton.module.scss.js');
+var classnames = require('classnames');
+var MrlMenuItem = require('../../menu/MrlMenuItem/MrlMenuItem.js');
+var MrlIconButton = require('../../button/MrlIconButton/MrlIconButton.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return 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__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+var _excluded = ["className", "icon", "includeInRoving", "menuItemProps", "onClick", "qa", "renderInMenu", "text", "toolbarButtonProps"];
+
+/**
+ * Props for the MrlToolbarButton component.
+ */
+
+/**
+ * MrlToolbarButton component.
+ * @param props The MrlToolbarButton component properties.
+ * @returns The MrlToolbarButton component.
+ */
+var MrlToolbarButton = /*#__PURE__*/React__namespace.forwardRef(function MrlToolbarButton(props, ref) {
+  var className = props.className,
+    icon = props.icon,
+    _props$includeInRovin = props.includeInRoving,
+    includeInRoving = _props$includeInRovin === void 0 ? false : _props$includeInRovin,
+    menuItemProps = props.menuItemProps,
+    onClick = props.onClick,
+    qa = props.qa,
+    renderInMenu = props.renderInMenu,
+    text = props.text,
+    _props$toolbarButtonP = props.toolbarButtonProps,
+    toolbarButtonProps = _props$toolbarButtonP === void 0 ? {
+      position: 'bottom',
+      size: 'small',
+      state: 'default'
+    } : _props$toolbarButtonP,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var classes = classnames__default.default('MrlToolbarButton', className);
+  if (renderInMenu) {
+    return /*#__PURE__*/React__namespace.createElement(MrlMenuItem.MrlMenuItem, _rollupPluginBabelHelpers.extends({}, menuItemProps, {
+      className: classes,
+      "data-qa": qa,
+      onClick: onClick
+    }), /*#__PURE__*/React__namespace.createElement("span", {
+      className: MrlToolbarButton_module.default.MrlToolbarButtonIcon
+    }, icon), text);
+  }
+  return /*#__PURE__*/React__namespace.createElement(MrlIconButton.MrlIconButton, _rollupPluginBabelHelpers.extends({}, rest, toolbarButtonProps, {
+    className: classes,
+    "data-qa": qa,
+    "data-roving": includeInRoving ? 'true' : undefined,
+    icon: icon,
+    onClick: onClick,
+    ref: ref,
+    text: text
+  }));
+});
+
+exports.MrlToolbarButton = MrlToolbarButton;
+//# sourceMappingURL=MrlToolbarButton.js.map

package/dist/cjs/components/toolbar/MrlToolbarButton/MrlToolbarButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlToolbarButton.js","sources":["../../../../../src/components/toolbar/MrlToolbarButton/MrlToolbarButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MrlIconButton, MrlIconButtonProps, MrlMenuItem, MrlMenuItemProps } from '../../../';\n\nimport styles from './MrlToolbarButton.module.scss';\nimport classnames from 'classnames';\n\n/**\n * Props for the MrlToolbarButton component.\n */\nexport interface MrlToolbarButtonProps {\n\t/** Additional class to add to the Toolbar button */\n\tclassName?: string;\n\t/**\n\t * The icon that will be rendered.\n\t */\n\ticon: React.ReactElement;\n\tincludeInRoving?: boolean;\n\t/**\n\t * A prop used to set a toolbar button to never move into the menu.\n\t */\n\tlockedInToolbar?: boolean;\n\t/**\n\t * onClick event for the button.\n\t */\n\tonClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Props used to control the display of the button in the menu.\n\t */\n\tmenuItemProps?: Omit<MrlMenuItemProps, 'onClick'>;\n\tqa?: string;\n\t/**\n\t * A prop used to render the item in the menu instead of the toolbar.\n\t */\n\trenderInMenu?: boolean;\n\ttext: string;\n\t/**\n\t * Props used to control the display of the button in the toolbar.\n\t */\n\ttoolbarButtonProps?: {\n\t\tbadge?: MrlIconButtonProps['badge'];\n\t\tdisableEvents?: MrlIconButtonProps['disableEvents'];\n\t\tkind?: MrlIconButtonProps['kind'];\n\t\tloading?: MrlIconButtonProps['loading'];\n\t\tloadingText?: MrlIconButtonProps['loadingText'];\n\t\tonKeyUp?: MrlIconButtonProps['onKeyUp'];\n\t\tonMouseUp?: MrlIconButtonProps['onMouseUp'];\n\t\tposition?: MrlIconButtonProps['position'];\n\t\tsize?: MrlIconButtonProps['size'];\n\t\tstate?: MrlIconButtonProps['state'];\n\t\ttipAnchor?: MrlIconButtonProps['tipAnchor'];\n\t\ttoggleAria?: MrlIconButtonProps['toggleAria'];\n\t\ttoggleStyle?: MrlIconButtonProps['toggleStyle'];\n\t\ttooltipKind?: MrlIconButtonProps['tooltipKind'];\n\t};\n}\n\n/**\n * MrlToolbarButton component.\n * @param props The MrlToolbarButton component properties.\n * @returns The MrlToolbarButton component.\n */\nexport const MrlToolbarButton = React.forwardRef<HTMLButtonElement, MrlToolbarButtonProps>(\n\tfunction MrlToolbarButton(props, ref): JSX.Element {\n\t\tconst {\n\t\t\tclassName,\n\t\t\ticon,\n\t\t\tincludeInRoving = false,\n\t\t\tmenuItemProps,\n\t\t\tonClick,\n\t\t\tqa,\n\t\t\trenderInMenu,\n\t\t\ttext,\n\t\t\ttoolbarButtonProps = {\n\t\t\t\tposition: 'bottom',\n\t\t\t\tsize: 'small',\n\t\t\t\tstate: 'default'\n\t\t\t},\n\t\t\t...rest\n\t\t} = props;\n\t\tconst classes = classnames('MrlToolbarButton', className);\n\n\t\tif (renderInMenu) {\n\t\t\treturn (\n\t\t\t\t<MrlMenuItem {...menuItemProps} className={classes} data-qa={qa} onClick={onClick}>\n\t\t\t\t\t<span className={styles.MrlToolbarButtonIcon}>{icon}</span>\n\t\t\t\t\t{text}\n\t\t\t\t</MrlMenuItem>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<MrlIconButton\n\t\t\t\t{...rest}\n\t\t\t\t{...toolbarButtonProps}\n\t\t\t\tclassName={classes}\n\t\t\t\tdata-qa={qa}\n\t\t\t\tdata-roving={includeInRoving ? 'true' : undefined}\n\t\t\t\ticon={icon}\n\t\t\t\tonClick={onClick}\n\t\t\t\tref={ref}\n\t\t\t\ttext={text}\n\t\t\t/>\n\t\t);\n\t}\n);\n"],"names":["MrlToolbarButton","React","forwardRef","props","ref","className","icon","_props$includeInRovin","includeInRoving","menuItemProps","onClick","qa","renderInMenu","text","_props$toolbarButtonP","toolbarButtonProps","position","size","state","rest","_objectWithoutProperties","_excluded","classes","classnames","createElement","MrlMenuItem","_extends","styles","MrlToolbarButtonIcon","MrlIconButton","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;AACA;AACA;;AAgDA;AACA;AACA;AACA;AACA;AACO,IAAMA,gBAAgB,gBAAGC,gBAAK,CAACC,UAAU,CAC/C,SAASF,gBAAgBA,CAACG,KAAK,EAAEC,GAAG,EAAe;AAClD,EAAA,IACCC,SAAS,GAcNF,KAAK,CAdRE,SAAS;IACTC,IAAI,GAaDH,KAAK,CAbRG,IAAI;IAAAC,qBAAA,GAaDJ,KAAK,CAZRK,eAAe;AAAfA,IAAAA,eAAe,GAAAD,qBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,qBAAA;IACvBE,aAAa,GAWVN,KAAK,CAXRM,aAAa;IACbC,OAAO,GAUJP,KAAK,CAVRO,OAAO;IACPC,EAAE,GASCR,KAAK,CATRQ,EAAE;IACFC,YAAY,GAQTT,KAAK,CARRS,YAAY;IACZC,IAAI,GAODV,KAAK,CAPRU,IAAI;IAAAC,qBAAA,GAODX,KAAK,CANRY,kBAAkB;IAAlBA,kBAAkB,GAAAD,qBAAA,KAAA,MAAA,GAAG;AACpBE,MAAAA,QAAQ,EAAE,QAAQ;AAClBC,MAAAA,IAAI,EAAE,OAAO;AACbC,MAAAA,KAAK,EAAE;AACR,KAAC,GAAAJ,qBAAA;AACEK,IAAAA,IAAI,GAAAC,iDAAA,CACJjB,KAAK,EAAAkB,SAAA,CAAA;AACT,EAAA,IAAMC,OAAO,GAAGC,2BAAU,CAAC,kBAAkB,EAAElB,SAAS,CAAC;AAEzD,EAAA,IAAIO,YAAY,EAAE;IACjB,oBACCX,gBAAA,CAAAuB,aAAA,CAACC,uBAAW,EAAAC,iCAAA,KAAKjB,aAAa,EAAA;AAAEJ,MAAAA,SAAS,EAAEiB,OAAQ;AAAC,MAAA,SAAA,EAASX,EAAG;AAACD,MAAAA,OAAO,EAAEA;KAAQ,CAAA,eACjFT,gBAAA,CAAAuB,aAAA,CAAA,MAAA,EAAA;MAAMnB,SAAS,EAAEsB,+BAAM,CAACC;AAAqB,KAAA,EAAEtB,IAAW,CAAC,EAC1DO,IACW,CAAC;AAEhB,EAAA;EAEA,oBACCZ,gBAAA,CAAAuB,aAAA,CAACK,2BAAa,EAAAH,iCAAA,CAAA,EAAA,EACTP,IAAI,EACJJ,kBAAkB,EAAA;AACtBV,IAAAA,SAAS,EAAEiB,OAAQ;AACnB,IAAA,SAAA,EAASX,EAAG;AACZ,IAAA,aAAA,EAAaH,eAAe,GAAG,MAAM,GAAGsB,SAAU;AAClDxB,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,OAAO,EAAEA,OAAQ;AACjBN,IAAAA,GAAG,EAAEA,GAAI;AACTS,IAAAA,IAAI,EAAEA;AAAK,GAAA,CACX,CAAC;AAEJ,CACD;;;;"}

package/dist/cjs/components/toolbar/MrlToolbarButton/MrlToolbarButton.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"MrlToolbarButtonIcon":"MrlToolbarButtonIcon--Oetsi"};
+
+exports.default = styles;
+//# sourceMappingURL=MrlToolbarButton.module.scss.js.map

package/dist/cjs/components/toolbar/MrlToolbarButton/MrlToolbarButton.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlToolbarButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/cjs/components/toolbar/MrlToolbarItem/MrlToolbarItem.js

@@ -0,0 +1,25 @@
+'use strict';
+
+/**
+ * Props for the MrlToolbarItem component.
+ */
+
+/**
+ * MrlToolbarItem component.
+ *
+ * @param props The MrlToolbarItem component properties.
+ * @returns The MrlToolbarItem component.
+ */
+var MrlToolbarItem = props => {
+  var renderInMenu = props.renderInMenu,
+    _props$menuItem = props.menuItem,
+    menuItem = _props$menuItem === void 0 ? null : _props$menuItem,
+    toolbarItem = props.toolbarItem;
+  if (renderInMenu) {
+    return menuItem;
+  }
+  return toolbarItem;
+};
+
+exports.MrlToolbarItem = MrlToolbarItem;
+//# sourceMappingURL=MrlToolbarItem.js.map

package/dist/cjs/components/toolbar/MrlToolbarItem/MrlToolbarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlToolbarItem.js","sources":["../../../../../src/components/toolbar/MrlToolbarItem/MrlToolbarItem.tsx"],"sourcesContent":["/**\n * Props for the MrlToolbarItem component.\n */\nexport interface MrlToolbarItemProps {\n\t/**\n\t * A prop used to set a toolbar button to never move into the menu.\n\t */\n\tlockedInToolbar?: boolean;\n\t/**\n\t * The rendered component in the overflow menu.\n\t * If nothing is passed, the toolbarItem will be rendered in the menu.\n\t */\n\tmenuItem?: JSX.Element;\n\t/**\n\t * A prop used to render the item in the menu instead of the toolbar.\n\t */\n\trenderInMenu?: boolean;\n\t/**\n\t * The rendered markup in the toolbar.\n\t */\n\ttoolbarItem: JSX.Element;\n}\n\n/**\n * MrlToolbarItem component.\n *\n * @param props The MrlToolbarItem component properties.\n * @returns The MrlToolbarItem component.\n */\nexport const MrlToolbarItem = (props: MrlToolbarItemProps): JSX.Element | null => {\n\tconst { renderInMenu, menuItem = null, toolbarItem } = props;\n\n\tif (renderInMenu) {\n\t\treturn menuItem;\n\t}\n\n\treturn toolbarItem;\n};\n"],"names":["MrlToolbarItem","props","renderInMenu","_props$menuItem","menuItem","toolbarItem"],"mappings":";;AAAA;AACA;AACA;;AAqBA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,cAAc,GAAIC,KAA0B,IAAyB;AACjF,EAAA,IAAQC,YAAY,GAAmCD,KAAK,CAApDC,YAAY;IAAAC,eAAA,GAAmCF,KAAK,CAAtCG,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,eAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,eAAA;IAAEE,WAAW,GAAKJ,KAAK,CAArBI,WAAW;AAElD,EAAA,IAAIH,YAAY,EAAE;AACjB,IAAA,OAAOE,QAAQ;AAChB,EAAA;AAEA,EAAA,OAAOC,WAAW;AACnB;;;;"}

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

@@ -0,0 +1,245 @@
+'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 _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return 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__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+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(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(() => {
+    setDisplay('show');
+  }, []);
+  var handleFocus = React__namespace.useCallback(() => {
+    if (interaction === 'keyboard') {
+      handleShowTooltip();
+    }
+  }, [interaction, handleShowTooltip]);
+
+  /**
+   * Event handler to hide the tooltip on mouseout
+   */
+  var handleHideTooltip = () => {
+    setDisplay('hide');
+  };
+
+  /**
+   * Event handler to hide the tooltip when a user presses escape
+   * @param {React.KeyboardEvent} e Keyboard event
+   */
+  var handleKeyDown = e => {
+    if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
+      handleHideTooltip();
+    }
+  };
+  var handleSetKeyboardInteraction = e => {
+    if (e.key === 'Tab' || e.key === 'Enter' || e.key === ' ') {
+      setInteraction('keyboard');
+    }
+  };
+  var handlesetMouseInteraction = () => setInteraction('mouse');
+
+  /**
+   * Setup of the initial component attributes and events
+   */
+  React__namespace.useEffect(() => {
+    if (id === '') setId(setAttributes.getUniqueId('mrl-tooltip'));
+  }, [id]);
+  React__namespace.useEffect(() => {
+    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(() => {
+    var trigger = document.querySelector("[data-tooltip-id=\"".concat(id, "\"]"));
+    triggerRef.current = trigger;
+  }, [id]);
+  React__namespace.useEffect(() => {
+    var currentTooltipRef = tooltipRef.current;
+    document.addEventListener('keydown', handleSetKeyboardInteraction);
+    document.addEventListener('mousedown', handlesetMouseInteraction);
+    if (!disableTooltipHover && currentTooltipRef) {
+      currentTooltipRef.addEventListener('mouseover', handleShowTooltip);
+      currentTooltipRef.addEventListener('mouseout', handleHideTooltip);
+    }
+    return () => {
+      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, (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__default.default(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), {}, {
+        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((style, item) => 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","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,74 @@
+'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 _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return 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__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+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 = 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__default.default('mrl-tooltip-content', {
+    ["".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","concat","undefined","React","createElement","_extends","role","className"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,iBAAiB,GAAIC,KAA6B,IAAyB;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,2BAAU,CAAC,qBAAqB,EAAE;AACxD,IAAA,CAAA,EAAA,CAAAC,MAAA,CAAIJ,OAAO,CAAA,GAAKA,OAAO,KAAKK,SAAS;AACrC,IAAA,mBAAmB,EAAE,OAAOZ,YAAY,KAAK,UAAU;IACvD,8BAA8B,EAAEJ,IAAI,KAAK,SAAS;AAClD,IAAA,CAAA,EAAA,CAAAe,MAAA,CAAIZ,mBAAmB,CAAA,GAAKA,mBAAmB,KAAKa;AACrD,GAAC,CAAC;AAEF,EAAA,oBACCC,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,iCAAA,KACKd,IAAI,EAAA;AACR,IAAA,aAAA,EAAaT,MAAO;AACpB,IAAA,eAAA,EAAeK,QAAS;AACxB,IAAA,SAAA,EAASH,MAAO;AAChBC,IAAAA,EAAE,EAAEA,EAAG;AACPqB,IAAAA,IAAI,EAAC;AAAS,GAAA,EACVZ,UAAU,EAAA;AACda,IAAAA,SAAS,EAAER;AAAe,GAAA,CAAA,EAEzBT,YAAY,IAAI,OAAOA,YAAY,KAAK,UAAU,GAAGA,YAAY,CAACF,IAAI,CAAC,GAAGA,IAAI,eAC/Ee,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;;;;;"}