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

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

@@ -1 +1 @@
-{"version":3,"file":"MrlToolbar.js","sources":["../../../../../src/components/toolbar/MrlToolbar/MrlToolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { more } from '@muraldevkit/ds-icons';\nimport {\n\tMrlIconButton,\n\tMrlIconButtonProps,\n\tMrlMenu,\n\tMrlMenuProps,\n\tMrlRovingTabindex,\n\tMrlToolbarButton,\n\tMrlSvg\n} from '../../../';\n\nimport styles from './MrlToolbar.module.scss';\n\n/**\n * Props for the MrlToolbar component.\n */\nexport interface MrlToolbarProps extends React.ComponentPropsWithRef<'div'> {\n\tchildren?: React.ReactNode;\n\tkind?: 'default' | 'inverse' | 'skeleton';\n\t/**\n\t * An optional prop to apply an aria-label to the MrlToobar\n\t */\n\tlabel?: string;\n\tlastToolbarInRow?: boolean;\n\t/**\n\t * An optional prop to set the maximum number of visible items in a toolbar.\n\t * Additional items will appear in a menu.\n\t */\n\tmaxVisibleItems?: number;\n\tmenuButtonProps?: MrlIconButtonProps;\n\tmenuProps?: MrlMenuProps;\n\torientation?: 'horizontal' | 'vertical';\n\t/**\n\t * A boolean prop that sets RovingTabindex in the MrlToolbar\n\t */\n\tshouldUseRti?: boolean;\n\t/**\n\t * Sets the size of the toolbar - defaults to 'small'\n\t */\n\tsize?: 'xsmall' | 'small' | 'medium';\n\t/*\n\t * Spaced toolbars provide more space between elements. This is\n\t * meant to be used for toolbars that have \"bigger\" elements inside\n\t * (i.e. long title, ToolbarButtonAdapters, etc).\n\t *\n\t * Currently used for all secondary toolbars.\n\t */\n\tspaced?: boolean;\n}\n\n/**\n * MrlToolbar component.\n *\n * @param props The MrlToolbar component properties.\n * @param ref The ref to forward to the toolbar div element.\n * @returns The MrlToolbar component.\n */\nexport const MrlToolbar = React.forwardRef<HTMLDivElement, MrlToolbarProps>(function MrlToolbar(\n\tprops,\n\tref\n): React.ReactElement {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tkind = 'default',\n\t\tlabel,\n\t\tmaxVisibleItems = -1,\n\t\tmenuButtonProps = {\n\t\t\tkind: kind === 'inverse' ? 'ghost-inverse' : 'ghost',\n\t\t\tposition: props.orientation === 'vertical' ? 'right' : 'bottom',\n\t\t\tsize: 'small',\n\t\t\tstate: 'default',\n\t\t\ttext: 'More tools'\n\t\t},\n\t\tmenuProps = {\n\t\t\tactionState: { actionType: null, isOpen: false },\n\t\t\talignment: 'center',\n\t\t\tclickOutsideEvent: 'mouseup',\n\t\t\tisInternal: false,\n\t\t\tisSubMenu: false,\n\t\t\tmenuOffset: 10,\n\t\t\tposition: 'bottom',\n\t\t\tspacing: 'default',\n\t\t\ttriggerStopPropagation: false\n\t\t},\n\t\torientation = 'horizontal',\n\t\tshouldUseRti,\n\t\tsize = 'small',\n\t\tspaced,\n\t\t...rest\n\t} = props;\n\tconst toolbarClasses = classnames(styles['MrlToolbar'], 'MrlToolbar', className, {\n\t\t[styles[`MrlToolbar-${kind}`]]: kind !== 'default',\n\t\t[styles[`MrlToolbar-${orientation}`]]: orientation !== 'horizontal',\n\t\t[styles[`MrlToolbar-${size}`]]: size !== 'small',\n\t\t[styles['MrlToolbar-spaced']]: spaced\n\t});\n\tconst menuTriggerRef = React.useRef(null);\n\n\t// eslint-disable-next-line\n\tconst renderMenu = (items: any[]) => {\n\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\tconst lockedChildren = [] as any[];\n\t\tconst menuItems = React.Children.map(items, (child) => {\n\t\t\tif (child.props.lockedInToolbar) {\n\t\t\t\tlockedChildren.push(child);\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (child.type.name === 'MrlToolbarButton') {\n\t\t\t\treturn <MrlToolbarButton {...child.props} renderInMenu={true} />;\n\t\t\t}\n\n\t\t\treturn child;\n\t\t});\n\n\t\tif (menuItems.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tdata-roving={shouldUseRti ? 'true' : undefined}\n\t\t\t\t\ticon={<MrlSvg svg={more} />}\n\t\t\t\t\t{...menuButtonProps}\n\t\t\t\t\tref={menuTriggerRef}\n\t\t\t\t/>\n\t\t\t\t<MrlMenu\n\t\t\t\t\tspacing={menuProps.spacing}\n\t\t\t\t\tposition={menuProps.position}\n\t\t\t\t\tactionState={menuProps.actionState || { actionType: null, isOpen: false }}\n\t\t\t\t\talignment={menuProps.alignment}\n\t\t\t\t\ttriggerRef={menuTriggerRef}\n\t\t\t\t\t{...menuProps}\n\t\t\t\t>\n\t\t\t\t\t{menuItems}\n\t\t\t\t</MrlMenu>\n\t\t\t\t{lockedChildren as React.ReactNode}\n\t\t\t</>\n\t\t);\n\t};\n\n\tconst renderChildren = () => {\n\t\tif (children) {\n\t\t\tconst numberOfChildren = React.Children.count(children);\n\t\t\tconst childArray = React.Children.toArray(children);\n\t\t\tconst hasLimit = maxVisibleItems > 0;\n\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\t\tlet toolbarChildren = [] as any[];\n\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\t\tconst menuChildren = [] as any[];\n\n\t\t\tif (hasLimit && numberOfChildren > maxVisibleItems + 1) {\n\t\t\t\tchildArray.map((child, index) => {\n\t\t\t\t\tif (maxVisibleItems > index) {\n\t\t\t\t\t\ttoolbarChildren.push(child);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tmenuChildren.push(child);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\ttoolbarChildren = childArray;\n\t\t\t}\n\n\t\t\tif (kind === 'skeleton') {\n\t\t\t\tconst mediumButtonWidth = 24;\n\t\t\t\tconst smallButtonWidth = 32;\n\t\t\t\tconst xsmallButtonWidth = 32;\n\t\t\t\tconst buttonSize =\n\t\t\t\t\tsize === 'xsmall'\n\t\t\t\t\t\t? xsmallButtonWidth\n\t\t\t\t\t\t: size === 'medium'\n\t\t\t\t\t\t? mediumButtonWidth\n\t\t\t\t\t\t: smallButtonWidth;\n\t\t\t\tconst skeletonSize = (numberOfChildren * buttonSize) / 16;\n\t\t\t\tconst displayStyle =\n\t\t\t\t\torientation === 'vertical'\n\t\t\t\t\t\t? { height: `${skeletonSize}rem` }\n\t\t\t\t\t\t: { width: `${skeletonSize}rem` };\n\n\t\t\t\treturn <span style={displayStyle} />;\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{toolbarChildren as React.ReactNode}\n\t\t\t\t\t{renderMenu(menuChildren)}\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst renderToolbar = () => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\t{...rest}\n\t\t\t\tclassName={toolbarClasses}\n\t\t\t\taria-label={label || rest['aria-label']}\n\t\t\t\tref={ref}\n\t\t\t\t/*\n\t\t\t\t * Toolbars with the attribute role=\"toolbar\" should use arrow keys\n\t\t\t\t * for keyboard navigation rather than the tab key. When MrlToolbar\n\t\t\t\t * is used in places like the MrlPanel header they should not have\n\t\t\t\t * this role and the prop `shouldUseRti` should be passed in to\n\t\t\t\t * achieve the expected behavior for a screen reader user.\n\t\t\t\t */\n\t\t\t\t{...(shouldUseRti ? { role: 'toolbar' } : {})}\n\t\t\t>\n\t\t\t\t{renderChildren()}\n\t\t\t</div>\n\t\t);\n\t};\n\n\tif (shouldUseRti) {\n\t\treturn <MrlRovingTabindex>{renderToolbar()}</MrlRovingTabindex>;\n\t} else {\n\t\treturn renderToolbar();\n\t}\n});\n"],"names":["MrlToolbar","React","forwardRef","props","ref","children","className","_props$kind","kind","label","_props$maxVisibleItem","maxVisibleItems","_props$menuButtonProp","menuButtonProps","position","orientation","size","state","text","_props$menuProps","menuProps","actionState","actionType","isOpen","alignment","clickOutsideEvent","isInternal","isSubMenu","menuOffset","spacing","triggerStopPropagation","_props$orientation","shouldUseRti","_props$size","spaced","rest","_objectWithoutProperties","_excluded","toolbarClasses","classnames","styles","_defineProperty","concat","menuTriggerRef","useRef","renderMenu","items","lockedChildren","menuItems","Children","map","child","lockedInToolbar","push","type","name","createElement","MrlToolbarButton","_extends","renderInMenu","length","Fragment","MrlIconButton","undefined","icon","MrlSvg","svg","more","MrlMenu","triggerRef","renderChildren","numberOfChildren","count","childArray","toArray","hasLimit","toolbarChildren","menuChildren","index","mediumButtonWidth","smallButtonWidth","xsmallButtonWidth","buttonSize","skeletonSize","displayStyle","height","width","style","renderToolbar","role","MrlRovingTabindex"],"mappings":"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"}
+{"version":3,"file":"MrlToolbar.js","sources":["../../../../../src/components/toolbar/MrlToolbar/MrlToolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { more } from '@muraldevkit/ds-icons';\nimport {\n\tMrlIconButton,\n\tMrlIconButtonProps,\n\tMrlMenu,\n\tMrlMenuProps,\n\tMrlRovingTabindex,\n\tMrlToolbarButton,\n\tMrlSvg\n} from '../../../';\n\nimport styles from './MrlToolbar.module.scss';\n\n/**\n * Props for the MrlToolbar component.\n */\nexport interface MrlToolbarProps extends React.ComponentPropsWithRef<'div'> {\n\tchildren?: React.ReactNode;\n\tkind?: 'default' | 'inverse' | 'skeleton';\n\t/**\n\t * An optional prop to apply an aria-label to the MrlToobar\n\t */\n\tlabel?: string;\n\tlastToolbarInRow?: boolean;\n\t/**\n\t * An optional prop to set the maximum number of visible items in a toolbar.\n\t * Additional items will appear in a menu.\n\t */\n\tmaxVisibleItems?: number;\n\tmenuButtonProps?: MrlIconButtonProps;\n\tmenuProps?: MrlMenuProps;\n\torientation?: 'horizontal' | 'vertical';\n\t/**\n\t * A boolean prop that sets RovingTabindex in the MrlToolbar\n\t */\n\tshouldUseRti?: boolean;\n\t/**\n\t * Sets the size of the toolbar - defaults to 'small'\n\t */\n\tsize?: 'xsmall' | 'small' | 'medium';\n\t/*\n\t * Spaced toolbars provide more space between elements. This is\n\t * meant to be used for toolbars that have \"bigger\" elements inside\n\t * (i.e. long title, ToolbarButtonAdapters, etc).\n\t *\n\t * Currently used for all secondary toolbars.\n\t */\n\tspaced?: boolean;\n}\n\n/**\n * MrlToolbar component.\n *\n * @param props The MrlToolbar component properties.\n * @param ref The ref to forward to the toolbar div element.\n * @returns The MrlToolbar component.\n */\nexport const MrlToolbar = React.forwardRef<HTMLDivElement, MrlToolbarProps>(function MrlToolbar(\n\tprops,\n\tref\n): React.ReactElement {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tkind = 'default',\n\t\tlabel,\n\t\tmaxVisibleItems = -1,\n\t\tmenuButtonProps = {\n\t\t\tkind: kind === 'inverse' ? 'ghost-inverse' : 'ghost',\n\t\t\tposition: props.orientation === 'vertical' ? 'right' : 'bottom',\n\t\t\tsize: 'small',\n\t\t\tstate: 'default',\n\t\t\ttext: 'More tools'\n\t\t},\n\t\tmenuProps = {\n\t\t\tactionState: { actionType: null, isOpen: false },\n\t\t\talignment: 'center',\n\t\t\tclickOutsideEvent: 'mouseup',\n\t\t\tisInternal: false,\n\t\t\tisSubMenu: false,\n\t\t\tmenuOffset: 10,\n\t\t\tposition: 'bottom',\n\t\t\tspacing: 'default',\n\t\t\ttriggerStopPropagation: false\n\t\t},\n\t\torientation = 'horizontal',\n\t\tshouldUseRti,\n\t\tsize = 'small',\n\t\tspaced,\n\t\t...rest\n\t} = props;\n\tconst toolbarClasses = classnames(styles['MrlToolbar'], 'MrlToolbar', className, {\n\t\t[styles[`MrlToolbar-${kind}`]]: kind !== 'default',\n\t\t[styles[`MrlToolbar-${orientation}`]]: orientation !== 'horizontal',\n\t\t[styles[`MrlToolbar-${size}`]]: size !== 'small',\n\t\t[styles['MrlToolbar-spaced']]: spaced\n\t});\n\tconst menuTriggerRef = React.useRef(null);\n\n\t// eslint-disable-next-line\n\tconst renderMenu = (items: any[]) => {\n\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\tconst lockedChildren = [] as any[];\n\t\tconst menuItems = React.Children.map(items, (child) => {\n\t\t\tif (child.props.lockedInToolbar) {\n\t\t\t\tlockedChildren.push(child);\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (child.type.name === 'MrlToolbarButton') {\n\t\t\t\treturn <MrlToolbarButton {...child.props} renderInMenu={true} />;\n\t\t\t}\n\n\t\t\treturn child;\n\t\t});\n\n\t\tif (menuItems.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tdata-roving={shouldUseRti ? 'true' : undefined}\n\t\t\t\t\ticon={<MrlSvg svg={more} />}\n\t\t\t\t\t{...menuButtonProps}\n\t\t\t\t\tref={menuTriggerRef}\n\t\t\t\t/>\n\t\t\t\t<MrlMenu\n\t\t\t\t\tspacing={menuProps.spacing}\n\t\t\t\t\tposition={menuProps.position}\n\t\t\t\t\tactionState={menuProps.actionState || { actionType: null, isOpen: false }}\n\t\t\t\t\talignment={menuProps.alignment}\n\t\t\t\t\ttriggerRef={menuTriggerRef}\n\t\t\t\t\t{...menuProps}\n\t\t\t\t>\n\t\t\t\t\t{menuItems}\n\t\t\t\t</MrlMenu>\n\t\t\t\t{lockedChildren as React.ReactNode}\n\t\t\t</>\n\t\t);\n\t};\n\n\tconst renderChildren = () => {\n\t\tif (children) {\n\t\t\tconst numberOfChildren = React.Children.count(children);\n\t\t\tconst childArray = React.Children.toArray(children);\n\t\t\tconst hasLimit = maxVisibleItems > 0;\n\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\t\tlet toolbarChildren = [] as any[];\n\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\t\tconst menuChildren = [] as any[];\n\n\t\t\tif (hasLimit && numberOfChildren > maxVisibleItems + 1) {\n\t\t\t\tchildArray.map((child, index) => {\n\t\t\t\t\tif (maxVisibleItems > index) {\n\t\t\t\t\t\ttoolbarChildren.push(child);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tmenuChildren.push(child);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\ttoolbarChildren = childArray;\n\t\t\t}\n\n\t\t\tif (kind === 'skeleton') {\n\t\t\t\tconst mediumButtonWidth = 24;\n\t\t\t\tconst smallButtonWidth = 32;\n\t\t\t\tconst xsmallButtonWidth = 32;\n\t\t\t\tconst buttonSize =\n\t\t\t\t\tsize === 'xsmall'\n\t\t\t\t\t\t? xsmallButtonWidth\n\t\t\t\t\t\t: size === 'medium'\n\t\t\t\t\t\t? mediumButtonWidth\n\t\t\t\t\t\t: smallButtonWidth;\n\t\t\t\tconst skeletonSize = (numberOfChildren * buttonSize) / 16;\n\t\t\t\tconst displayStyle =\n\t\t\t\t\torientation === 'vertical'\n\t\t\t\t\t\t? { height: `${skeletonSize}rem` }\n\t\t\t\t\t\t: { width: `${skeletonSize}rem` };\n\n\t\t\t\treturn <span style={displayStyle} />;\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{toolbarChildren as React.ReactNode}\n\t\t\t\t\t{renderMenu(menuChildren)}\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst renderToolbar = () => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\t{...rest}\n\t\t\t\tclassName={toolbarClasses}\n\t\t\t\taria-label={label || rest['aria-label']}\n\t\t\t\tref={ref}\n\t\t\t\t/*\n\t\t\t\t * Toolbars with the attribute role=\"toolbar\" should use arrow keys\n\t\t\t\t * for keyboard navigation rather than the tab key. When MrlToolbar\n\t\t\t\t * is used in places like the MrlPanel header they should not have\n\t\t\t\t * this role and the prop `shouldUseRti` should be passed in to\n\t\t\t\t * achieve the expected behavior for a screen reader user.\n\t\t\t\t */\n\t\t\t\t{...(shouldUseRti ? { role: 'toolbar' } : {})}\n\t\t\t>\n\t\t\t\t{renderChildren()}\n\t\t\t</div>\n\t\t);\n\t};\n\n\tif (shouldUseRti) {\n\t\treturn <MrlRovingTabindex>{renderToolbar()}</MrlRovingTabindex>;\n\t} else {\n\t\treturn renderToolbar();\n\t}\n});\n"],"names":["MrlToolbar","React","forwardRef","props","ref","children","className","_props$kind","kind","label","_props$maxVisibleItem","maxVisibleItems","_props$menuButtonProp","menuButtonProps","position","orientation","size","state","text","_props$menuProps","menuProps","actionState","actionType","isOpen","alignment","clickOutsideEvent","isInternal","isSubMenu","menuOffset","spacing","triggerStopPropagation","_props$orientation","shouldUseRti","_props$size","spaced","rest","_objectWithoutProperties","_excluded","toolbarClasses","classnames","styles","concat","menuTriggerRef","useRef","renderMenu","items","lockedChildren","menuItems","Children","map","child","lockedInToolbar","push","type","name","createElement","MrlToolbarButton","_extends","renderInMenu","length","Fragment","MrlIconButton","undefined","icon","MrlSvg","svg","more","MrlMenu","triggerRef","renderChildren","numberOfChildren","count","childArray","toArray","hasLimit","toolbarChildren","menuChildren","index","mediumButtonWidth","smallButtonWidth","xsmallButtonWidth","buttonSize","skeletonSize","displayStyle","height","width","style","renderToolbar","role","MrlRovingTabindex"],"mappings":"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"}

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

@@ -7,7 +7,10 @@ var classnames = require('classnames');
 var MrlMenuItem = require('../../menu/MrlMenuItem/MrlMenuItem.js');
 var MrlIconButton = require('../../button/MrlIconButton/MrlIconButton.js');
 
-function _interopNamespaceDefault(e) {
+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) {
@@ -24,7 +27,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 var _excluded = ["className", "icon", "includeInRoving", "menuItemProps", "onClick", "qa", "renderInMenu", "text", "toolbarButtonProps"];
 
@@ -54,7 +58,7 @@ var MrlToolbarButton = /*#__PURE__*/React__namespace.forwardRef(function MrlTool
       state: 'default'
     } : _props$toolbarButtonP,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-  var classes = classnames('MrlToolbarButton', className);
+  var classes = classnames__default.default('MrlToolbarButton', className);
   if (renderInMenu) {
     return /*#__PURE__*/React__namespace.createElement(MrlMenuItem.MrlMenuItem, _rollupPluginBabelHelpers.extends({}, menuItemProps, {
       className: classes,

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

@@ -1 +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,UAAU,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;;;;"}
+{"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/MrlToolbarItem/MrlToolbarItem.js

@@ -10,7 +10,7 @@
  * @param props The MrlToolbarItem component properties.
  * @returns The MrlToolbarItem component.
  */
-var MrlToolbarItem = function MrlToolbarItem(props) {
+var MrlToolbarItem = props => {
   var renderInMenu = props.renderInMenu,
     _props$menuItem = props.menuItem,
     menuItem = _props$menuItem === void 0 ? null : _props$menuItem,

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

@@ -1 +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;IACaA,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,KAA0B,EAAyB;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;;;;"}
+{"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

@@ -12,7 +12,10 @@ var index$1 = require('../../../utils/layers/index.js');
 var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
 var MrlPortal = require('../../portal/MrlPortal.js');
 
-function _interopNamespaceDefault(e) {
+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) {
@@ -29,7 +32,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+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"];
@@ -41,7 +45,7 @@ var _excluded = ["children", "clickToClose", "disableTooltipHover", "display", "
  * @param {MrlTooltipProps} props - The props of the component
  * @returns {HTMLElement} a configured Tooltip component
  */
-var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
+var MrlTooltip = /*#__PURE__*/React__namespace.memo(props => {
   var children = props.children,
     _props$clickToClose = props.clickToClose,
     clickToClose = _props$clickToClose === void 0 ? true : _props$clickToClose,
@@ -90,10 +94,10 @@ var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
   /**
    * Event handler to show tooltip when the trigger is focused
    */
-  var handleShowTooltip = React__namespace.useCallback(function () {
+  var handleShowTooltip = React__namespace.useCallback(() => {
     setDisplay('show');
   }, []);
-  var handleFocus = React__namespace.useCallback(function () {
+  var handleFocus = React__namespace.useCallback(() => {
     if (interaction === 'keyboard') {
       handleShowTooltip();
     }
@@ -102,7 +106,7 @@ var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
   /**
    * Event handler to hide the tooltip on mouseout
    */
-  var handleHideTooltip = function handleHideTooltip() {
+  var handleHideTooltip = () => {
     setDisplay('hide');
   };
 
@@ -110,27 +114,25 @@ var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
    * Event handler to hide the tooltip when a user presses escape
    * @param {React.KeyboardEvent} e Keyboard event
    */
-  var handleKeyDown = function handleKeyDown(e) {
+  var handleKeyDown = e => {
     if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
       handleHideTooltip();
     }
   };
-  var handleSetKeyboardInteraction = function handleSetKeyboardInteraction(e) {
+  var handleSetKeyboardInteraction = e => {
     if (e.key === 'Tab' || e.key === 'Enter' || e.key === ' ') {
       setInteraction('keyboard');
     }
   };
-  var handlesetMouseInteraction = function handlesetMouseInteraction() {
-    return setInteraction('mouse');
-  };
+  var handlesetMouseInteraction = () => setInteraction('mouse');
 
   /**
    * Setup of the initial component attributes and events
    */
-  React__namespace.useEffect(function () {
+  React__namespace.useEffect(() => {
     if (id === '') setId(setAttributes.getUniqueId('mrl-tooltip'));
   }, [id]);
-  React__namespace.useEffect(function () {
+  React__namespace.useEffect(() => {
     setDisplay(defaultDisplay);
   }, [defaultDisplay]);
 
@@ -142,11 +144,11 @@ var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
    * 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 () {
+  React__namespace.useEffect(() => {
     var trigger = document.querySelector("[data-tooltip-id=\"".concat(id, "\"]"));
     triggerRef.current = trigger;
   }, [id]);
-  React__namespace.useEffect(function () {
+  React__namespace.useEffect(() => {
     var currentTooltipRef = tooltipRef.current;
     document.addEventListener('keydown', handleSetKeyboardInteraction);
     document.addEventListener('mousedown', handlesetMouseInteraction);
@@ -154,7 +156,7 @@ var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
       currentTooltipRef.addEventListener('mouseover', handleShowTooltip);
       currentTooltipRef.addEventListener('mouseout', handleHideTooltip);
     }
-    return function () {
+    return () => {
       if (!disableTooltipHover && currentTooltipRef) {
         currentTooltipRef.removeEventListener('mouseover', handleShowTooltip);
         currentTooltipRef.removeEventListener('mouseout', handleHideTooltip);
@@ -189,7 +191,7 @@ var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
       opacity: 0
     }
   });
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, React__namespace.Children.map(children, function (child, index) {
+  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,
@@ -203,7 +205,7 @@ var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
         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'),
+        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)
@@ -212,9 +214,10 @@ var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
         onKeyDown: utils.curryHandlers(onKeyDown, handleKeyDown),
         onMouseOut: utils.curryHandlers(onMouseOut, handleHideTooltip),
         onMouseOver: utils.curryHandlers(onMouseOver, handleShowTooltip)
-      }, otherProps), {}, _rollupPluginBabelHelpers.defineProperty({
-        children: _children
-      }, 'data-tooltip-id', id)));
+      }, otherProps), {}, {
+        children: _children,
+        ['data-tooltip-id']: id
+      }));
     }
     return child;
   }), /*#__PURE__*/React__namespace.createElement(MrlPortal.MrlPortal, {
@@ -222,21 +225,19 @@ var MrlTooltip = /*#__PURE__*/React__namespace.memo(function (props) {
     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
-    })));
-  })));
+  }, 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';
 

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

@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,UAAU,gBAAGC,gBAAK,CAACC,IAAI,CAAC,UAACC,KAAsB,EAAyB;AACpF,EAAA,IACCC,QAAQ,GAcLD,KAAK,CAdRC,QAAQ;IAAAC,mBAAA,GAcLF,KAAK,CAbRG,YAAY;AAAZA,IAAAA,YAAY,GAAAD,mBAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,mBAAA;IAAAE,qBAAA,GAahBJ,KAAK,CAZRK,mBAAmB;AAAnBA,IAAAA,mBAAmB,GAAAD,qBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,qBAAA;IAAAE,cAAA,GAYxBN,KAAK,CAXRO,OAAO;AAAEC,IAAAA,cAAc,GAAAF,cAAA,KAAA,MAAA,GAAG,MAAM,GAAAA,cAAA;IAChCG,IAAI,GAUDT,KAAK,CAVRS,IAAI;IAAAC,YAAA,GAUDV,KAAK,CATRW,KAAK;AAALA,IAAAA,KAAK,GAAAD,YAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,YAAA;IACVE,MAAM,GAQHZ,KAAK,CARRY,MAAM;IAAAC,WAAA,GAQHb,KAAK,CAPRc,IAAI;AAAJA,IAAAA,IAAI,GAAAD,WAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,WAAA;IAAAE,eAAA,GAObf,KAAK,CANRgB,QAAQ;IAARA,QAAQ,GAAAD,eAAA,KAAA,MAAA,GAAGE,4BAAkB,CAACD,QAAQ,IAAI,KAAK,GAAAD,eAAA;IAAAG,aAAA,GAM5ClB,KAAK,CALRmB,MAAM;AAANA,IAAAA,MAAM,GAAAD,aAAA,KAAA,MAAA,GAAGD,4BAAkB,CAACE,MAAM,GAAAD,aAAA;IAAAE,qBAAA,GAK/BpB,KAAK,CAJRqB,cAAc;AAAdA,IAAAA,cAAc,GAAAD,qBAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,qBAAA;IACrBE,YAAY,GAGTtB,KAAK,CAHRsB,YAAY;IACZC,mBAAmB,GAEhBvB,KAAK,CAFRuB,mBAAmB;AAChBC,IAAAA,IAAI,GAAAC,iDAAA,CACJzB,KAAK,EAAA0B,SAAA,CAAA;AAET,EAAA,IAAAC,eAAA,GAAsC7B,gBAAK,CAAC8B,QAAQ,CAAC,OAAO,CAAC;IAAAC,gBAAA,GAAAC,uCAAA,CAAAH,eAAA,EAAA,CAAA,CAAA;AAAtDI,IAAAA,WAAW,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,cAAc,GAAAH,gBAAA,CAAA,CAAA,CAAA;AAElC,EAAA,IAAMI,UAAU,GAAGnC,gBAAK,CAACoC,MAAM,CAAqB,IAAI,CAAC;AAEzD,EAAA,IAAMC,UAAU,GAAGrC,gBAAK,CAACoC,MAAM,CAAiB,IAAI,CAAC;;AAErD;AACD;AACA;AACC,EAAA,IAAAE,gBAAA,GAA8BtC,gBAAK,CAAC8B,QAAQ,CAAkBpB,cAAc,CAAC;IAAA6B,gBAAA,GAAAP,uCAAA,CAAAM,gBAAA,EAAA,CAAA,CAAA;AAAtE7B,IAAAA,OAAO,GAAA8B,gBAAA,CAAA,CAAA,CAAA;AAAEC,IAAAA,UAAU,GAAAD,gBAAA,CAAA,CAAA,CAAA;;AAE1B;AACD;AACA;AACC,EAAA,IAAAE,gBAAA,GAAoBzC,gBAAK,CAAC8B,QAAQ,CAAS,EAAE,CAAC;IAAAY,gBAAA,GAAAV,uCAAA,CAAAS,gBAAA,EAAA,CAAA,CAAA;AAAvCE,IAAAA,EAAE,GAAAD,gBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,KAAK,GAAAF,gBAAA,CAAA,CAAA,CAAA;;AAEhB;AACD;AACA;AACC,EAAA,IAAMG,iBAAiB,GAAG7C,gBAAK,CAAC8C,WAAW,CAAC,YAAM;IACjDN,UAAU,CAAC,MAAM,CAAC;EACnB,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,IAAMO,WAAW,GAAG/C,gBAAK,CAAC8C,WAAW,CAAC,YAAM;IAC3C,IAAIb,WAAW,KAAK,UAAU,EAAE;AAC/BY,MAAAA,iBAAiB,EAAE;AACpB,IAAA;AACD,EAAA,CAAC,EAAE,CAACZ,WAAW,EAAEY,iBAAiB,CAAC,CAAC;;AAEpC;AACD;AACA;AACC,EAAA,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,GAAe;IACrCR,UAAU,CAAC,MAAM,CAAC;EACnB,CAAC;;AAED;AACD;AACA;AACA;AACC,EAAA,IAAMS,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,CAAsB,EAAW;AACvD,IAAA,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,IAAID,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;AAC7DH,MAAAA,iBAAiB,EAAE;AACpB,IAAA;EACD,CAAC;AAED,EAAA,IAAMI,4BAA4B,GAAG,SAA/BA,4BAA4BA,CAAIF,CAAgB,EAAK;AAC1D,IAAA,IAAIA,CAAC,CAACC,GAAG,KAAK,KAAK,IAAID,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;MAC1DjB,cAAc,CAAC,UAAU,CAAC;AAC3B,IAAA;EACD,CAAC;AAED,EAAA,IAAMmB,yBAAyB,GAAG,SAA5BA,yBAAyBA,GAAA;IAAA,OAASnB,cAAc,CAAC,OAAO,CAAC;AAAA,EAAA,CAAA;;AAE/D;AACD;AACA;EACClC,gBAAK,CAACsD,SAAS,CAAC,YAAM;IACrB,IAAIX,EAAE,KAAK,EAAE,EAAEC,KAAK,CAACW,yBAAW,CAAC,aAAa,CAAC,CAAC;AACjD,EAAA,CAAC,EAAE,CAACZ,EAAE,CAAC,CAAC;EAER3C,gBAAK,CAACsD,SAAS,CAAC,YAAM;IACrBd,UAAU,CAAC9B,cAAc,CAAC;AAC3B,EAAA,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;;AAEpB;AACD;AACA;AACA;AACA;AACA;AACA;AACA;EACCV,gBAAK,CAACsD,SAAS,CAAC,YAAM;IACrB,IAAME,OAAO,GAAGC,QAAQ,CAACC,aAAa,uBAAAC,MAAA,CAAsBhB,EAAE,EAAA,KAAA,CAAI,CAAC;IACnER,UAAU,CAACyB,OAAO,GAAGJ,OAAsB;AAC5C,EAAA,CAAC,EAAE,CAACb,EAAE,CAAC,CAAC;EAER3C,gBAAK,CAACsD,SAAS,CAAC,YAAM;AACrB,IAAA,IAAMO,iBAAiB,GAAGxB,UAAU,CAACuB,OAAO;AAE5CH,IAAAA,QAAQ,CAACK,gBAAgB,CAAC,SAAS,EAAEV,4BAA4B,CAAC;AAClEK,IAAAA,QAAQ,CAACK,gBAAgB,CAAC,WAAW,EAAET,yBAAyB,CAAC;AAEjE,IAAA,IAAI,CAAC9C,mBAAmB,IAAIsD,iBAAiB,EAAE;AAC9CA,MAAAA,iBAAiB,CAACC,gBAAgB,CAAC,WAAW,EAAEjB,iBAAiB,CAAC;AAClEgB,MAAAA,iBAAiB,CAACC,gBAAgB,CAAC,UAAU,EAAEd,iBAAiB,CAAC;AAClE,IAAA;AAEA,IAAA,OAAO,YAAM;AACZ,MAAA,IAAI,CAACzC,mBAAmB,IAAIsD,iBAAiB,EAAE;AAC9CA,QAAAA,iBAAiB,CAACE,mBAAmB,CAAC,WAAW,EAAElB,iBAAiB,CAAC;AACrEgB,QAAAA,iBAAiB,CAACE,mBAAmB,CAAC,UAAU,EAAEf,iBAAiB,CAAC;AACrE,MAAA;AAEAS,MAAAA,QAAQ,CAACM,mBAAmB,CAAC,SAAS,EAAEX,4BAA4B,CAAC;AACrEK,MAAAA,QAAQ,CAACM,mBAAmB,CAAC,WAAW,EAAEV,yBAAyB,CAAC;IACrE,CAAC;AACD;EACD,CAAC,EAAE,CAACR,iBAAiB,EAAER,UAAU,CAACuB,OAAO,CAAC,CAAC;AAE3C,EAAA,IAAMI,cAAc,GAAGC,wBAAkB,CACxC9B,UAAU,EACVE,UAAU,EACV;AACC6B,IAAAA,KAAK,EAAE7C,MAAM;AACbH,IAAAA,QAAQ,EAAEA;AACX,GAAC,EACDT,OAAO,KAAK,MAAM,EAClB,EACD,CAAC;AAED,EAAA,IAAM0D,YAAY,GAAG;AACpBC,IAAAA,IAAI,EAAE;MACLC,IAAI,EAAEL,cAAc,CAACK,IAAI;AACzBnD,MAAAA,QAAQ,EAAE,OAAgB;MAC1BoD,GAAG,EAAEN,cAAc,CAACM;AACrB;GACA;AAED,EAAA,IAAMC,WAAW,GAAGC,iBAAa,CAAC/D,OAAO,KAAK,MAAM,EAAE;AACrDgE,IAAAA,MAAM,EAAE;AAAEC,MAAAA,QAAQ,EAAEjE,OAAO,KAAK,MAAM,GAAG,GAAG,GAAG;KAAI;AACnDkE,IAAAA,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE;KAAG;AACrBC,IAAAA,IAAI,EAAE;AAAED,MAAAA,OAAO,EAAE;KAAG;AACpBE,IAAAA,KAAK,EAAE;AAAEF,MAAAA,OAAO,EAAE;AAAE;AACrB,GAAC,CAAC;EAEF,oBACC5E,gBAAA,CAAA+E,aAAA,CAAA/E,gBAAA,CAAAgF,QAAA,QACEhF,gBAAK,CAACiF,QAAQ,CAACC,GAAG,CAAC/E,QAAQ,EAAE,UAACgF,KAAK,EAAEC,KAAK,EAAK;IAC/C,IAAIA,KAAK,KAAK,CAAC,iBAAIpF,gBAAK,CAACqF,cAAc,CAACF,KAAK,CAAC,EAAE;AAC/C,MAAA,IAAAG,MAAA,GAWKH,KAAK,CAASjF,KAAK;QAVvBqF,SAAS,GAAAD,MAAA,CAATC,SAAS;QACTC,MAAM,GAAAF,MAAA,CAANE,MAAM;QACNC,OAAO,GAAAH,MAAA,CAAPG,OAAO;QACPC,SAAS,GAAAJ,MAAA,CAATI,SAAS;QACTC,WAAW,GAAAL,MAAA,CAAXK,WAAW;QACXC,UAAU,GAAAN,MAAA,CAAVM,UAAU;QACVC,SAAS,GAAAP,MAAA,CAATO,SAAS;QACT1F,SAAQ,GAAAmF,MAAA,CAARnF,QAAQ;AACL2F,QAAAA,UAAU,GAAAnE,iDAAA,CAAA2D,MAAA,EAAAS,UAAA,CAAA;MAId,oBAAO/F,gBAAK,CAACgG,YAAY,CAACb,KAAK,EAAAc,uCAAA,CAAAA,uCAAA,CAAAA,uCAAA,CAAA;QAC9B,kBAAkB,EAAExF,OAAO,KAAK,MAAM,IAAIc,cAAc,GAAGoB,EAAE,GAAGuD,SAAS;AACzEX,QAAAA,SAAS,EAAEY,UAAU,CACpB3E,YAAY,EACZ+D,SAAS,EACT,qBAAqB,EACrB9E,OAAO,KAAK,MAAM,IAAI,6BACvB,CAAC;AACD+E,QAAAA,MAAM,EAAEY,mBAAa,CAACZ,MAAM,EAAExC,iBAAiB;AAAC,OAAA,EAC5C3C,YAAY,IAAI,CAACE,mBAAmB,GACrC;AAAEsF,QAAAA,SAAS,EAAEO,mBAAa,CAACP,SAAS,EAAE7C,iBAAiB;OAAG,GAC1D,EAAE,CAAA,EAAA,EAAA,EAAA;AACLyC,QAAAA,OAAO,EAAEW,mBAAa,CAACX,OAAO,EAAE1C,WAAW,CAAC;AAC5C2C,QAAAA,SAAS,EAAEU,mBAAa,CAACV,SAAS,EAAEzC,aAAa,CAAC;AAClD2C,QAAAA,UAAU,EAAEQ,mBAAa,CAACR,UAAU,EAAE5C,iBAAiB,CAAC;AACxD2C,QAAAA,WAAW,EAAES,mBAAa,CAACT,WAAW,EAAE9C,iBAAiB;OAAC,EACvDiD,UAAU,OAAAO,wCAAA,CAAA;AACblG,QAAAA,QAAQ,EAARA;AAAQ,OAAA,EACP,iBAAiB,EAAGwC,EAAE,CAAA,CACvB,CAAC;AACH,IAAA;AACA,IAAA,OAAOwC,KAAK;AACb,EAAA,CAAC,CAAC,eACFnF,gBAAA,CAAA+E,aAAA,CAACuB,mBAAS,EAAA;AACT3D,IAAAA,EAAE,EAAE4D,qBAAa,CAACC,OAAO,CAACC,IAAK;IAC/BC,KAAK,EAAEH,qBAAa,CAACC,OAAQ;AAC7BjB,IAAAA,SAAS,EAAEgB,qBAAa,CAACC,OAAO,CAACC,IAAK;IACtC,SAAA,EAASF,qBAAa,CAACC,OAAO,CAACC;AAAK,GAAA,EAEnClC,WAAW,CACX,UAACoC,KAAK,EAAEC,IAAI,EAAA;IAAA,OACXA,IAAI,iBACH5G,gBAAA,CAAA+E,aAAA,CAAC8B,YAAQ,CAACC,GAAG,EAAA;AAACC,MAAAA,GAAG,EAAE1E,UAAW;MAACsE,KAAK,EAAAV,uCAAA,CAAAA,uCAAA,KAAO9B,YAAY,CAACC,IAAI,CAAA,EAAKuC,KAAK;KAAG,eACxE3G,gBAAA,CAAA+E,aAAA,CAACiC,mCAAiB,EAAAC,iCAAA,KACbvF,IAAI,EAAA;AACRb,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,MAAM,EAAEA,MAAO;AACfP,MAAAA,MAAM,EAAEA,MAAO;AACfE,MAAAA,IAAI,EAAEA,IAAK;AACX2B,MAAAA,EAAE,EAAEA,EAAG;AACPzB,MAAAA,QAAQ,EAAEA,QAAS;AACnBP,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,mBAAmB,EAAEA;AAAoB,KAAA,CACzC,CACY,CACd;EAAA,CACH,CACU,CACV,CAAC;AAEL,CAAC;AAED1B,UAAU,CAACmH,WAAW,GAAG,YAAY;;;;"}
+{"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

@@ -6,7 +6,10 @@ var classnames = require('classnames');
 var constants = require('../constants.js');
 var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
 
-function _interopNamespaceDefault(e) {
+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) {
@@ -23,7 +26,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
 var _excluded = ["anchor", "attrs", "dataQa", "id", "kind", "position", "text", "tooltipContentClass", "customRender"];
 /**
@@ -34,7 +38,7 @@ var _excluded = ["anchor", "attrs", "dataQa", "id", "kind", "position", "text",
  * @param {MrlTooltipContentProps} props - the props of the tooltip content
  * @returns {HTMLElement} a configured Tooltip Content component
  */
-var MrlTooltipContent = function MrlTooltipContent(props) {
+var MrlTooltipContent = props => {
   var anchor = props.anchor,
     attrs = props.attrs,
     dataQa = props.dataQa,
@@ -47,7 +51,12 @@ var MrlTooltipContent = function MrlTooltipContent(props) {
     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));
+  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,

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

@@ -1 +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;;;;"}
+{"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/useTooltipPosition/index.js

@@ -5,6 +5,10 @@ var React = require('react');
 var utilities = require('./utilities.js');
 var debounce = require('lodash.debounce');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var debounce__default = /*#__PURE__*/_interopDefault(debounce);
+
 /**
  * A custom hook to calculate and manage the position of a tooltip element relative to its trigger element.
  *
@@ -28,13 +32,11 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
     _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 () {
+  var alignment = React.useMemo(() => ({
+    align: placement.align,
+    position: placement.position
+  }), [placement.align, placement.position]);
+  var updatePosition = React.useCallback(() => {
     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();
@@ -42,7 +44,7 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
       var newPosition = utilities.calculatePosition(alignment, offset, elementRect, triggerRect);
 
       // only update if we have a new position
-      setTooltipPosition(function (prevPosition) {
+      setTooltipPosition(prevPosition => {
         if (prevPosition.left !== newPosition.left || prevPosition.top !== newPosition.top) {
           return newPosition;
         }
@@ -52,10 +54,10 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
   }, [alignment, elementRef, isElementVisible, offset, triggerRef]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  var debouncedUpdatePosition = React.useCallback(debounce(function () {
+  var debouncedUpdatePosition = React.useCallback(debounce__default.default(() => {
     updatePosition();
   }, 5), [updatePosition]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!disable) {
       var currentElement = elementRef.current;
 
@@ -67,8 +69,8 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
       // 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));
+      var resizeObserver = new ResizeObserver(debounce__default.default(updatePosition));
+      var mutationObserver = new MutationObserver(debounce__default.default(updatePosition));
       if (currentElement) {
         resizeObserver.observe(currentElement);
         mutationObserver.observe(currentElement, {
@@ -81,7 +83,7 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
         window.addEventListener('resize', debouncedUpdatePosition);
         window.addEventListener('scroll', debouncedUpdatePosition);
       }
-      return function () {
+      return () => {
         if (currentElement) {
           resizeObserver.unobserve(currentElement);
           mutationObserver.disconnect();
@@ -91,7 +93,7 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
       };
     }
   }, [disable, triggerRef, elementRef, alignment, offset, isElementVisible, updatePosition, debouncedUpdatePosition]);
-  React.useLayoutEffect(function () {
+  React.useLayoutEffect(() => {
     if (isElementVisible && !disable && elementRef.current && triggerRef !== null && triggerRef !== void 0 && triggerRef.current) {
       // Recalculate position when the tooltip is first shown
       updatePosition();
@@ -103,21 +105,21 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
    * 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 () {
+  React.useEffect(() => {
     if (!disable && isElementVisible && triggerRef !== null && triggerRef !== void 0 && triggerRef.current && elementRef.current) {
       var animationFrameId;
       var prevRect;
-      var _trackPosition = function trackPosition() {
+      var 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);
       };
-      animationFrameId = requestAnimationFrame(_trackPosition);
-      return function () {
+      animationFrameId = requestAnimationFrame(trackPosition);
+      return () => {
         cancelAnimationFrame(animationFrameId);
       };
     }