@muraldevkit/ui-toolkit 4.72.0 → 4.73.0-dev-t0WE.1

package/dist/cjs/components/avatar/MrlAvatarButton/MrlAvatarButton.js

@@ -6,6 +6,7 @@ var classnames = require('classnames');
 var helpers = require('../../button/helpers.js');
 var constants = require('../../button/constants.js');
 var MrlAvatarButton_module = require('./MrlAvatarButton.module.scss.js');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
 var MrlTooltip = require('../../tooltip/MrlTooltip/MrlTooltip.js');
 var MrlAvatar = require('../MrlAvatar/MrlAvatar.js');
@@ -34,7 +35,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["buttonClassName", "dataQa", "id", "includeInRoving", "isToggleButton", "label", "loading", "loadingText", "onClick", "size", "state", "toggleAria", "tooltip", "triggerRef"];
+var _excluded = ["buttonClassName", "dataQa", "id", "includeInRoving", "isToggleButton", "label", "loading", "loadingText", "onClick", "size", "state", "toggleAria", "tooltip", "eventId", "triggerRef"];
 /**
  * Renders an avatar button
  * @param {MrlAvatarButtonPropTypes} props the props for your MrlAvatarButton
@@ -58,12 +59,14 @@ var MrlAvatarButton = _ref => {
     _ref$toggleAria = _ref.toggleAria,
     toggleAria = _ref$toggleAria === void 0 ? constants.buttonDefaults.toggleAria : _ref$toggleAria,
     tooltip = _ref.tooltip,
+    eventId = _ref.eventId,
     triggerRef = _ref.triggerRef,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _React$useState = React__namespace.useState(() => helpers._isSelected(state)),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isSelected = _React$useState2[0],
     setIsSelected = _React$useState2[1];
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlAvatarButton', eventId);
 
   /**
    * We need to watch the value of state to keep in sync
@@ -101,6 +104,10 @@ var MrlAvatarButton = _ref => {
     if (helpers._isDisabled(state, loading)) {
       return;
     }
+    trackInteraction({
+      action: 'click',
+      variant: size
+    });
     if (isToggleButton) {
       setIsSelected(prevIsSelected => !prevIsSelected);
     }

package/dist/cjs/components/avatar/MrlAvatarButton/MrlAvatarButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlAvatarButton.js","sources":["../../../../../src/components/avatar/MrlAvatarButton/MrlAvatarButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport {\n\tMrlAvatar,\n\tMrlAvatarPropTypes,\n\tMrlButtonState,\n\tMrlSpinner,\n\tMrlTooltip,\n\tTooltipConfig\n} from '../../';\nimport { _isDisabled, _isSelected } from '../../button/helpers';\nimport { ToggleAria, buttonDefaults } from '../../button/constants';\nimport { setAttributes } from '../../../utils';\n\nimport styles from './MrlAvatarButton.module.scss';\n\nexport interface MrlAvatarButtonPropTypes\n\textends MrlAvatarPropTypes,\n\t\tReact.HTMLAttributes<HTMLButtonElement> {\n\t/**\n\t * An optional class name to add to button wrapping the MrlAvatar.\n\t */\n\tbuttonClassName?: string;\n\n\t/**\n\t * An optional boolean prop to include the button in roving tabindex\n\t */\n\tincludeInRoving?: boolean;\n\n\t/**\n\t * Selected state variant when the button is a Toggle Button. Setting this prop\n\t * informs the component that this is a toggle button and to add that functionality\n\t */\n\tisToggleButton?: boolean;\n\n\t/**\n\t * An optional aria-label to apply to the button element\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Displays a spinner in the button to indicate some action is in progress.\n\t */\n\tloading?: boolean;\n\n\t/**\n\t * Text for the spinner when the button is in a loading state.\n\t */\n\tloadingText?: string;\n\n\t/**\n\t * onClick event for the button.\n\t */\n\tonClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * Changes the state of the button based on user permissions or actions.\n\t */\n\tstate?: MrlButtonState;\n\n\t/**\n\t * Determines which aria setup to use for various toggle/selected styles.\n\t * pressed - use for an traditional “toggle button”\n\t * selected - use for tabs and custom select options\n\t * expanded - use for menus, panels, and popovers\n\t * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)\n\t * \t\tor [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs\n\t */\n\ttoggleAria?: ToggleAria;\n\n\t/**\n\t * Tooltip configuration for the button\n\t */\n\ttooltip?: TooltipConfig;\n\n\t/**\n\t * Reference to the DOM element that is the MrlAvatarButton\n\t */\n\ttriggerRef?: React.RefObject<HTMLButtonElement>;\n}\n\n/**\n * Renders an avatar button\n * @param {MrlAvatarButtonPropTypes} props the props for your MrlAvatarButton\n * @returns {React.ReactElement} an avatar button containing the props you pass\n */\nexport const MrlAvatarButton = ({\n\tbuttonClassName,\n\tdataQa,\n\tid,\n\tincludeInRoving,\n\tisToggleButton,\n\tlabel,\n\tloading = false,\n\tloadingText = 'Loading',\n\tonClick,\n\tsize,\n\tstate = 'default',\n\ttoggleAria = buttonDefaults.toggleAria,\n\ttooltip,\n\ttriggerRef,\n\t...rest\n}: MrlAvatarButtonPropTypes): React.ReactElement => {\n\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(state));\n\n\t/**\n\t * We need to watch the value of state to keep in sync\n\t * the value of state passed as props and the internal\n\t * isSelected piece of state.\n\t */\n\tReact.useEffect(() => {\n\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\tsetIsSelected(_isSelected(state));\n\t}, [state]);\n\n\tconst spinner = (\n\t\t<MrlSpinner\n\t\t\tclassName=\"mrlButton-spinner MrlAvatarButton-spinner\"\n\t\t\tkind=\"default\"\n\t\t\trole=\"none\"\n\t\t\tsize=\"small\"\n\t\t\ttext={loadingText}\n\t\t/>\n\t);\n\n\tconst attributes = setAttributes(\n\t\t{},\n\t\t{\n\t\t\t'aria-disabled': _isDisabled(state, loading),\n\t\t\t'aria-label': label,\n\t\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\t\t'data-roving': includeInRoving ? 'true' : undefined,\n\t\t\trole: 'button',\n\t\t\ttype: 'button'\n\t\t}\n\t);\n\n\t/**\n\t * Handle onClick events\n\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t */\n\tfunction handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {\n\t\te.stopPropagation();\n\n\t\tif (_isDisabled(state, loading)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isToggleButton) {\n\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t}\n\n\t\tif (onClick && typeof onClick === 'function') {\n\t\t\tonClick(e);\n\t\t}\n\t}\n\n\tconst buttonClasses = classNames('MrlAvatarButton', styles['MrlAvatarButton'], buttonClassName, {\n\t\t[styles['MrlAvatarButton--large']]: size && size === 'large'\n\t});\n\n\tconst renderAvatarButton = () => (\n\t\t<button\n\t\t\t{...attributes}\n\t\t\taria-label={tooltip && tooltip.text}\n\t\t\tclassName={buttonClasses}\n\t\t\tdata-qa={dataQa && `${dataQa}-button`}\n\t\t\tid={id}\n\t\t\tonClick={handleOnClick}\n\t\t\tref={triggerRef}\n\t\t>\n\t\t\t{loading ? spinner : <MrlAvatar dataQa={dataQa} size={size} {...rest} />}\n\t\t</button>\n\t);\n\n\treturn !tooltip ? (\n\t\trenderAvatarButton()\n\t) : (\n\t\t<MrlTooltip\n\t\t\tposition={tooltip.position || 'bottom'}\n\t\t\tanchor={tooltip.anchor || 'center'}\n\t\t\ttext={tooltip.text}\n\t\t\tdataQa={tooltip.dataQa}\n\t\t>\n\t\t\t{renderAvatarButton()}\n\t\t</MrlTooltip>\n\t);\n};\n"],"names":["MrlAvatarButton","_ref","buttonClassName","dataQa","id","includeInRoving","isToggleButton","label","_ref$loading","loading","_ref$loadingText","loadingText","onClick","size","_ref$state","state","_ref$toggleAria","toggleAria","buttonDefaults","tooltip","triggerRef","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_isSelected","_React$useState2","_slicedToArray","isSelected","setIsSelected","useEffect","spinner","createElement","MrlSpinner","className","kind","role","text","attributes","setAttributes","_objectSpread","_isDisabled","concat","undefined","type","handleOnClick","e","stopPropagation","prevIsSelected","buttonClasses","classNames","styles","renderAvatarButton","_extends","ref","MrlAvatar","MrlTooltip","position","anchor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA;AACA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAGC,IAAA,IAgBqB;AAAA,EAAA,IAfnDC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IACfC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IACFC,eAAe,GAAAJ,IAAA,CAAfI,eAAe;IACfC,cAAc,GAAAL,IAAA,CAAdK,cAAc;IACdC,KAAK,GAAAN,IAAA,CAALM,KAAK;IAAAC,YAAA,GAAAP,IAAA,CACLQ,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,YAAA;IAAAE,gBAAA,GAAAT,IAAA,CACfU,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,gBAAA;IACvBE,OAAO,GAAAX,IAAA,CAAPW,OAAO;IACPC,IAAI,GAAAZ,IAAA,CAAJY,IAAI;IAAAC,UAAA,GAAAb,IAAA,CACJc,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,UAAA;IAAAE,eAAA,GAAAf,IAAA,CACjBgB,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAA,MAAA,GAAGE,wBAAc,CAACD,UAAU,GAAAD,eAAA;IACtCG,OAAO,GAAAlB,IAAA,CAAPkB,OAAO;IACPC,UAAU,GAAAnB,IAAA,CAAVmB,UAAU;AACPC,IAAAA,IAAI,GAAAC,iDAAA,CAAArB,IAAA,EAAAsB,SAAA,CAAA;EAEP,IAAAC,eAAA,GAAoCC,gBAAK,CAACC,QAAQ,CAAC,MAAMC,mBAAW,CAACZ,KAAK,CAAC,CAAC;IAAAa,gBAAA,GAAAC,uCAAA,CAAAL,eAAA,EAAA,CAAA,CAAA;AAArEM,IAAAA,UAAU,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,aAAa,GAAAH,gBAAA,CAAA,CAAA,CAAA;;AAEhC;AACD;AACA;AACA;AACA;EACCH,gBAAK,CAACO,SAAS,CAAC,MAAM;AACrB;AACAD,IAAAA,aAAa,CAACJ,mBAAW,CAACZ,KAAK,CAAC,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;AAEX,EAAA,IAAMkB,OAAO,gBACZR,gBAAA,CAAAS,aAAA,CAACC,qBAAU,EAAA;AACVC,IAAAA,SAAS,EAAC,2CAA2C;AACrDC,IAAAA,IAAI,EAAC,SAAS;AACdC,IAAAA,IAAI,EAAC,MAAM;AACXzB,IAAAA,IAAI,EAAC,OAAO;AACZ0B,IAAAA,IAAI,EAAE5B;AAAY,GAClB,CACD;EAED,IAAM6B,UAAU,GAAGC,2BAAa,CAC/B,EAAE,EAAAC,uCAAA,CAAAA,uCAAA,CAAA;AAED,IAAA,eAAe,EAAEC,mBAAW,CAAC5B,KAAK,EAAEN,OAAO,CAAC;AAC5C,IAAA,YAAY,EAAEF;AAAK,GAAA,EACfD,cAAc,IAAI;AAAE,IAAA,CAAA,OAAA,CAAAsC,MAAA,CAAS3B,UAAU,CAAA,GAAKa,UAAU,IAAI;GAAO,CAAA,EAAA,EAAA,EAAA;AACrE,IAAA,aAAa,EAAEzB,eAAe,GAAG,MAAM,GAAGwC,SAAS;AACnDP,IAAAA,IAAI,EAAE,QAAQ;AACdQ,IAAAA,IAAI,EAAE;AAAQ,GAAA,CAEhB,CAAC;;AAED;AACD;AACA;AACA;EACC,SAASC,aAAaA,CAACC,CAAsC,EAAE;IAC9DA,CAAC,CAACC,eAAe,EAAE;AAEnB,IAAA,IAAIN,mBAAW,CAAC5B,KAAK,EAAEN,OAAO,CAAC,EAAE;AAChC,MAAA;AACD,IAAA;AAEA,IAAA,IAAIH,cAAc,EAAE;AACnByB,MAAAA,aAAa,CAAEmB,cAAc,IAAK,CAACA,cAAc,CAAC;AACnD,IAAA;AAEA,IAAA,IAAItC,OAAO,IAAI,OAAOA,OAAO,KAAK,UAAU,EAAE;MAC7CA,OAAO,CAACoC,CAAC,CAAC;AACX,IAAA;AACD,EAAA;AAEA,EAAA,IAAMG,aAAa,GAAGC,2BAAU,CAAC,iBAAiB,EAAEC,8BAAM,CAAC,iBAAiB,CAAC,EAAEnD,eAAe,EAAE;IAC/F,CAACmD,8BAAM,CAAC,wBAAwB,CAAC,GAAGxC,IAAI,IAAIA,IAAI,KAAK;AACtD,GAAC,CAAC;EAEF,IAAMyC,kBAAkB,GAAGA,mBAC1B7B,gBAAA,CAAAS,aAAA,CAAA,QAAA,EAAAqB,iCAAA,CAAA,EAAA,EACKf,UAAU,EAAA;AACd,IAAA,YAAA,EAAYrB,OAAO,IAAIA,OAAO,CAACoB,IAAK;AACpCH,IAAAA,SAAS,EAAEe,aAAc;AACzB,IAAA,SAAA,EAAShD,MAAM,IAAA,EAAA,CAAAyC,MAAA,CAAOzC,MAAM,EAAA,SAAA,CAAU;AACtCC,IAAAA,EAAE,EAAEA,EAAG;AACPQ,IAAAA,OAAO,EAAEmC,aAAc;AACvBS,IAAAA,GAAG,EAAEpC;GAAW,CAAA,EAEfX,OAAO,GAAGwB,OAAO,gBAAGR,gBAAA,CAAAS,aAAA,CAACuB,mBAAS,EAAAF,iCAAA,CAAA;AAACpD,IAAAA,MAAM,EAAEA,MAAO;AAACU,IAAAA,IAAI,EAAEA;GAAK,EAAKQ,IAAI,CAAG,CAChE,CACR;EAED,OAAO,CAACF,OAAO,GACdmC,kBAAkB,EAAE,gBAEpB7B,gBAAA,CAAAS,aAAA,CAACwB,qBAAU,EAAA;AACVC,IAAAA,QAAQ,EAAExC,OAAO,CAACwC,QAAQ,IAAI,QAAS;AACvCC,IAAAA,MAAM,EAAEzC,OAAO,CAACyC,MAAM,IAAI,QAAS;IACnCrB,IAAI,EAAEpB,OAAO,CAACoB,IAAK;IACnBpC,MAAM,EAAEgB,OAAO,CAAChB;GAAO,EAEtBmD,kBAAkB,EACR,CACZ;AACF;;;;"}
+{"version":3,"file":"MrlAvatarButton.js","sources":["../../../../../src/components/avatar/MrlAvatarButton/MrlAvatarButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport {\n\tMrlAvatar,\n\tMrlAvatarPropTypes,\n\tMrlButtonState,\n\tMrlSpinner,\n\tMrlTooltip,\n\tTooltipConfig\n} from '../../';\nimport { _isDisabled, _isSelected } from '../../button/helpers';\nimport { ToggleAria, buttonDefaults } from '../../button/constants';\nimport { setAttributes } from '../../../utils';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlAvatarButton.module.scss';\n\nexport interface MrlAvatarButtonPropTypes\n\textends MrlAvatarPropTypes,\n\t\tReact.HTMLAttributes<HTMLButtonElement> {\n\t/**\n\t * An optional class name to add to button wrapping the MrlAvatar.\n\t */\n\tbuttonClassName?: string;\n\n\t/**\n\t * An optional boolean prop to include the button in roving tabindex\n\t */\n\tincludeInRoving?: boolean;\n\n\t/**\n\t * Selected state variant when the button is a Toggle Button. Setting this prop\n\t * informs the component that this is a toggle button and to add that functionality\n\t */\n\tisToggleButton?: boolean;\n\n\t/**\n\t * An optional aria-label to apply to the button element\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Displays a spinner in the button to indicate some action is in progress.\n\t */\n\tloading?: boolean;\n\n\t/**\n\t * Text for the spinner when the button is in a loading state.\n\t */\n\tloadingText?: string;\n\n\t/**\n\t * onClick event for the button.\n\t */\n\tonClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * Changes the state of the button based on user permissions or actions.\n\t */\n\tstate?: MrlButtonState;\n\n\t/**\n\t * Determines which aria setup to use for various toggle/selected styles.\n\t * pressed - use for an traditional “toggle button”\n\t * selected - use for tabs and custom select options\n\t * expanded - use for menus, panels, and popovers\n\t * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)\n\t * \t\tor [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs\n\t */\n\ttoggleAria?: ToggleAria;\n\n\t/**\n\t * Tooltip configuration for the button\n\t */\n\ttooltip?: TooltipConfig;\n\n\t/**\n\t * Enables interaction tracking for this button. Provide a stable, non-PII id\n\t * (e.g. 'workspace-member-avatar'). When omitted, the button emits no analytics.\n\t */\n\teventId?: string;\n\n\t/**\n\t * Reference to the DOM element that is the MrlAvatarButton\n\t */\n\ttriggerRef?: React.RefObject<HTMLButtonElement>;\n}\n\n/**\n * Renders an avatar button\n * @param {MrlAvatarButtonPropTypes} props the props for your MrlAvatarButton\n * @returns {React.ReactElement} an avatar button containing the props you pass\n */\nexport const MrlAvatarButton = ({\n\tbuttonClassName,\n\tdataQa,\n\tid,\n\tincludeInRoving,\n\tisToggleButton,\n\tlabel,\n\tloading = false,\n\tloadingText = 'Loading',\n\tonClick,\n\tsize,\n\tstate = 'default',\n\ttoggleAria = buttonDefaults.toggleAria,\n\ttooltip,\n\teventId,\n\ttriggerRef,\n\t...rest\n}: MrlAvatarButtonPropTypes): React.ReactElement => {\n\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(state));\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlAvatarButton', eventId);\n\n\t/**\n\t * We need to watch the value of state to keep in sync\n\t * the value of state passed as props and the internal\n\t * isSelected piece of state.\n\t */\n\tReact.useEffect(() => {\n\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\tsetIsSelected(_isSelected(state));\n\t}, [state]);\n\n\tconst spinner = (\n\t\t<MrlSpinner\n\t\t\tclassName=\"mrlButton-spinner MrlAvatarButton-spinner\"\n\t\t\tkind=\"default\"\n\t\t\trole=\"none\"\n\t\t\tsize=\"small\"\n\t\t\ttext={loadingText}\n\t\t/>\n\t);\n\n\tconst attributes = setAttributes(\n\t\t{},\n\t\t{\n\t\t\t'aria-disabled': _isDisabled(state, loading),\n\t\t\t'aria-label': label,\n\t\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\t\t'data-roving': includeInRoving ? 'true' : undefined,\n\t\t\trole: 'button',\n\t\t\ttype: 'button'\n\t\t}\n\t);\n\n\t/**\n\t * Handle onClick events\n\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t */\n\tfunction handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {\n\t\te.stopPropagation();\n\n\t\tif (_isDisabled(state, loading)) {\n\t\t\treturn;\n\t\t}\n\n\t\ttrackInteraction({ action: 'click', variant: size });\n\n\t\tif (isToggleButton) {\n\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t}\n\n\t\tif (onClick && typeof onClick === 'function') {\n\t\t\tonClick(e);\n\t\t}\n\t}\n\n\tconst buttonClasses = classNames('MrlAvatarButton', styles['MrlAvatarButton'], buttonClassName, {\n\t\t[styles['MrlAvatarButton--large']]: size && size === 'large'\n\t});\n\n\tconst renderAvatarButton = () => (\n\t\t<button\n\t\t\t{...attributes}\n\t\t\taria-label={tooltip && tooltip.text}\n\t\t\tclassName={buttonClasses}\n\t\t\tdata-qa={dataQa && `${dataQa}-button`}\n\t\t\tid={id}\n\t\t\tonClick={handleOnClick}\n\t\t\tref={triggerRef}\n\t\t>\n\t\t\t{loading ? spinner : <MrlAvatar dataQa={dataQa} size={size} {...rest} />}\n\t\t</button>\n\t);\n\n\treturn !tooltip ? (\n\t\trenderAvatarButton()\n\t) : (\n\t\t<MrlTooltip\n\t\t\tposition={tooltip.position || 'bottom'}\n\t\t\tanchor={tooltip.anchor || 'center'}\n\t\t\ttext={tooltip.text}\n\t\t\tdataQa={tooltip.dataQa}\n\t\t>\n\t\t\t{renderAvatarButton()}\n\t\t</MrlTooltip>\n\t);\n};\n"],"names":["MrlAvatarButton","_ref","buttonClassName","dataQa","id","includeInRoving","isToggleButton","label","_ref$loading","loading","_ref$loadingText","loadingText","onClick","size","_ref$state","state","_ref$toggleAria","toggleAria","buttonDefaults","tooltip","eventId","triggerRef","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_isSelected","_React$useState2","_slicedToArray","isSelected","setIsSelected","trackInteraction","useMrlTrackInteraction","useEffect","spinner","createElement","MrlSpinner","className","kind","role","text","attributes","setAttributes","_objectSpread","_isDisabled","concat","undefined","type","handleOnClick","e","stopPropagation","action","variant","prevIsSelected","buttonClasses","classNames","styles","renderAvatarButton","_extends","ref","MrlAvatar","MrlTooltip","position","anchor"],"mappings":"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"}

package/dist/cjs/components/breadcrumb/MrlBreadcrumbItem/MrlBreadcrumbItem.js

@@ -6,6 +6,7 @@ var classnames = require('classnames');
 var reactRouterDom = require('react-router-dom');
 var MrlBreadcrumbItem_module = require('./MrlBreadcrumbItem.module.scss.js');
 var dsIcons = require('@muraldevkit/ds-icons');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlSvg = require('../../svg/MrlSvg/MrlSvg.js');
 var MrlBreadcrumbSeparator = require('../MrlBreadcrumbSeparator/MrlBreadcrumbSeparator.js');
 
@@ -32,7 +33,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["link", "text", "isSelected", "hasSeparator", "isTruncated"];
+var _excluded = ["link", "text", "isSelected", "hasSeparator", "isTruncated", "eventId"];
 /**
  * MrlBreadcrumbItem component.
  * @param props The MrlBreadcrumbItem component properties.
@@ -46,22 +47,31 @@ function MrlBreadcrumbItem(props) {
     hasSeparator = _props$hasSeparator === void 0 ? true : _props$hasSeparator,
     _props$isTruncated = props.isTruncated,
     isTruncated = _props$isTruncated === void 0 ? false : _props$isTruncated,
+    eventId = props.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlBreadcrumbItem', eventId);
   var breadcrumbItem = React__namespace.useMemo(() => {
+    // the selected crumb is the current page, so it navigates nowhere and emits nothing.
     if (isSelected) {
       // eslint-disable-next-line jsx-a11y/anchor-is-valid
       return /*#__PURE__*/React__namespace.createElement("a", {
         "aria-current": "page"
       }, text);
     }
+    var handleClick = () => trackInteraction({
+      action: 'click'
+    });
     if (typeof link === 'string') {
       return /*#__PURE__*/React__namespace.createElement("a", {
-        href: link
+        href: link,
+        onClick: handleClick
       }, text);
     } else if (typeof link === 'object') {
-      return /*#__PURE__*/React__namespace.createElement(reactRouterDom.Link, link, text);
+      return /*#__PURE__*/React__namespace.createElement(reactRouterDom.Link, _rollupPluginBabelHelpers.extends({}, link, {
+        onClick: handleClick
+      }), text);
     }
-  }, [link, text, isSelected]);
+  }, [link, text, isSelected, trackInteraction]);
   return /*#__PURE__*/React__namespace.createElement("li", _rollupPluginBabelHelpers.extends({}, rest, {
     className: classnames__default.default(MrlBreadcrumbItem_module.default['MrlBreadcrumbItem'], 'MrlBreadcrumbItem', {
       [MrlBreadcrumbItem_module.default['MrlBreadcrumbItem--selected']]: isSelected,

package/dist/cjs/components/breadcrumb/MrlBreadcrumbItem/MrlBreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlBreadcrumbItem.js","sources":["../../../../../src/components/breadcrumb/MrlBreadcrumbItem/MrlBreadcrumbItem.tsx"],"sourcesContent":["/* eslint-disable no-mixed-spaces-and-tabs */\nimport * as React from 'react';\nimport classnames from 'classnames';\nimport { Link } from 'react-router-dom';\nimport styles from './MrlBreadcrumbItem.module.scss';\nimport { MrlSvg } from '../../svg';\nimport { more } from '@muraldevkit/ds-icons';\nimport { MrlBreadcrumbSeparator } from '../MrlBreadcrumbSeparator';\n\nexport type BreadcrumbItemLink =\n\t| {\n\t\t\ttext: string;\n\t\t\tlink: string;\n\t  }\n\t| {\n\t\t\ttext: string;\n\t\t\tlink: React.ComponentPropsWithoutRef<typeof Link>;\n\t  };\n\nexport type BreadcrumbItem = {\n\tisSelected?: boolean;\n\thasSeparator?: boolean;\n\tisTruncated?: boolean;\n} & BreadcrumbItemLink;\n\nexport interface MrlBreadcrumbItemProps extends React.ComponentPropsWithRef<'li'> {\n\t/**\n\t * Children to be rendered within the component\n\t */\n\tchildren?: React.ReactNode;\n\n\t/**\n\t * Determines whether a separator should be displayed after this breadcrumb item.\n\t */\n\thasSeparator?: BreadcrumbItem['hasSeparator'];\n\n\t/**\n\t * Indicates whether this breadcrumb item represents the currently selected or\n\t * active page.\n\t */\n\tisSelected?: BreadcrumbItem['isSelected'];\n\n\t/**\n\t * Specifies whether the text content of this breadcrumb item should be truncated\n\t * if it exceeds a certain width. This is useful for handling long page titles\n\t * or labels within the breadcrumb.\n\t */\n\tisTruncated?: boolean;\n\n\tlink?: BreadcrumbItem['link'];\n\ttext?: BreadcrumbItem['text'];\n}\n\n/**\n * MrlBreadcrumbItem component.\n * @param props The MrlBreadcrumbItem component properties.\n * @returns The MrlBreadcrumbItem component.\n */\nexport function MrlBreadcrumbItem(props: MrlBreadcrumbItemProps): JSX.Element {\n\tconst { link, text, isSelected, hasSeparator = true, isTruncated = false, ...rest } = props;\n\n\tconst breadcrumbItem = React.useMemo(() => {\n\t\tif (isSelected) {\n\t\t\t// eslint-disable-next-line jsx-a11y/anchor-is-valid\n\t\t\treturn <a aria-current=\"page\">{text}</a>;\n\t\t}\n\n\t\tif (typeof link === 'string') {\n\t\t\treturn <a href={link}>{text}</a>;\n\t\t} else if (typeof link === 'object') {\n\t\t\treturn <Link {...link}>{text}</Link>;\n\t\t}\n\t}, [link, text, isSelected]);\n\n\treturn (\n\t\t<li\n\t\t\t{...rest}\n\t\t\tclassName={classnames(styles['MrlBreadcrumbItem'], 'MrlBreadcrumbItem', {\n\t\t\t\t[styles['MrlBreadcrumbItem--selected']]: isSelected,\n\t\t\t\t['MrlBreadcrumbItem--selected']: isSelected\n\t\t\t})}\n\t\t>\n\t\t\t{isTruncated && (\n\t\t\t\t<span className={classnames(styles['MrlBreadcrumbItem--icon'])}>\n\t\t\t\t\t<MrlSvg size=\"auto\" svg={more} />\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{!isTruncated && breadcrumbItem}\n\t\t\t{hasSeparator && <MrlBreadcrumbSeparator />}\n\t\t</li>\n\t);\n}\n"],"names":["MrlBreadcrumbItem","props","link","text","isSelected","_props$hasSeparator","hasSeparator","_props$isTruncated","isTruncated","rest","_objectWithoutProperties","_excluded","breadcrumbItem","React","useMemo","createElement","href","Link","_extends","className","classnames","styles","MrlSvg","size","svg","more","MrlBreadcrumbSeparator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;AACA;AACA;AACA;AACA;AACO,SAASA,iBAAiBA,CAACC,KAA6B,EAAe;AAC7E,EAAA,IAAQC,IAAI,GAA0ED,KAAK,CAAnFC,IAAI;IAAEC,IAAI,GAAoEF,KAAK,CAA7EE,IAAI;IAAEC,UAAU,GAAwDH,KAAK,CAAvEG,UAAU;IAAAC,mBAAA,GAAwDJ,KAAK,CAA3DK,YAAY;AAAZA,IAAAA,YAAY,GAAAD,mBAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,mBAAA;IAAAE,kBAAA,GAAmCN,KAAK,CAAtCO,WAAW;AAAXA,IAAAA,WAAW,GAAAD,kBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,kBAAA;AAAKE,IAAAA,IAAI,GAAAC,iDAAA,CAAKT,KAAK,EAAAU,SAAA,CAAA;AAE3F,EAAA,IAAMC,cAAc,GAAGC,gBAAK,CAACC,OAAO,CAAC,MAAM;AAC1C,IAAA,IAAIV,UAAU,EAAE;AACf;MACA,oBAAOS,gBAAA,CAAAE,aAAA,CAAA,GAAA,EAAA;QAAG,cAAA,EAAa;AAAM,OAAA,EAAEZ,IAAQ,CAAC;AACzC,IAAA;AAEA,IAAA,IAAI,OAAOD,IAAI,KAAK,QAAQ,EAAE;MAC7B,oBAAOW,gBAAA,CAAAE,aAAA,CAAA,GAAA,EAAA;AAAGC,QAAAA,IAAI,EAAEd;AAAK,OAAA,EAAEC,IAAQ,CAAC;AACjC,IAAA,CAAC,MAAM,IAAI,OAAOD,IAAI,KAAK,QAAQ,EAAE;MACpC,oBAAOW,gBAAA,CAAAE,aAAA,CAACE,mBAAI,EAAKf,IAAI,EAAGC,IAAW,CAAC;AACrC,IAAA;EACD,CAAC,EAAE,CAACD,IAAI,EAAEC,IAAI,EAAEC,UAAU,CAAC,CAAC;AAE5B,EAAA,oBACCS,gBAAA,CAAAE,aAAA,CAAA,IAAA,EAAAG,iCAAA,KACKT,IAAI,EAAA;IACRU,SAAS,EAAEC,2BAAU,CAACC,gCAAM,CAAC,mBAAmB,CAAC,EAAE,mBAAmB,EAAE;AACvE,MAAA,CAACA,gCAAM,CAAC,6BAA6B,CAAC,GAAGjB,UAAU;AACnD,MAAA,CAAC,6BAA6B,GAAGA;KACjC;AAAE,GAAA,CAAA,EAEFI,WAAW,iBACXK,gBAAA,CAAAE,aAAA,CAAA,MAAA,EAAA;AAAMI,IAAAA,SAAS,EAAEC,2BAAU,CAACC,gCAAM,CAAC,yBAAyB,CAAC;AAAE,GAAA,eAC9DR,gBAAA,CAAAE,aAAA,CAACO,aAAM,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAM;AAACC,IAAAA,GAAG,EAAEC;AAAK,GAAE,CAC3B,CACN,EACA,CAACjB,WAAW,IAAII,cAAc,EAC9BN,YAAY,iBAAIO,gBAAA,CAAAE,aAAA,CAACW,6CAAsB,EAAA,IAAE,CACvC,CAAC;AAEP;;;;"}
+{"version":3,"file":"MrlBreadcrumbItem.js","sources":["../../../../../src/components/breadcrumb/MrlBreadcrumbItem/MrlBreadcrumbItem.tsx"],"sourcesContent":["/* eslint-disable no-mixed-spaces-and-tabs */\nimport * as React from 'react';\nimport classnames from 'classnames';\nimport { Link } from 'react-router-dom';\nimport styles from './MrlBreadcrumbItem.module.scss';\nimport { MrlSvg } from '../../svg';\nimport { more } from '@muraldevkit/ds-icons';\nimport { MrlBreadcrumbSeparator } from '../MrlBreadcrumbSeparator';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nexport type BreadcrumbItemLink =\n\t| {\n\t\t\ttext: string;\n\t\t\tlink: string;\n\t  }\n\t| {\n\t\t\ttext: string;\n\t\t\tlink: React.ComponentPropsWithoutRef<typeof Link>;\n\t  };\n\nexport type BreadcrumbItem = {\n\tisSelected?: boolean;\n\thasSeparator?: boolean;\n\tisTruncated?: boolean;\n} & BreadcrumbItemLink;\n\nexport interface MrlBreadcrumbItemProps extends React.ComponentPropsWithRef<'li'> {\n\t/**\n\t * Children to be rendered within the component\n\t */\n\tchildren?: React.ReactNode;\n\n\t/**\n\t * Determines whether a separator should be displayed after this breadcrumb item.\n\t */\n\thasSeparator?: BreadcrumbItem['hasSeparator'];\n\n\t/**\n\t * Indicates whether this breadcrumb item represents the currently selected or\n\t * active page.\n\t */\n\tisSelected?: BreadcrumbItem['isSelected'];\n\n\t/**\n\t * Specifies whether the text content of this breadcrumb item should be truncated\n\t * if it exceeds a certain width. This is useful for handling long page titles\n\t * or labels within the breadcrumb.\n\t */\n\tisTruncated?: boolean;\n\n\tlink?: BreadcrumbItem['link'];\n\ttext?: BreadcrumbItem['text'];\n\n\t/**\n\t * Enables interaction tracking for this breadcrumb. Provide a stable, non-PII id\n\t * (e.g. 'room-breadcrumb'). When omitted, the breadcrumb emits no analytics.\n\t */\n\teventId?: string;\n}\n\n/**\n * MrlBreadcrumbItem component.\n * @param props The MrlBreadcrumbItem component properties.\n * @returns The MrlBreadcrumbItem component.\n */\nexport function MrlBreadcrumbItem(props: MrlBreadcrumbItemProps): JSX.Element {\n\tconst {\n\t\tlink,\n\t\ttext,\n\t\tisSelected,\n\t\thasSeparator = true,\n\t\tisTruncated = false,\n\t\teventId,\n\t\t...rest\n\t} = props;\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlBreadcrumbItem', eventId);\n\n\tconst breadcrumbItem = React.useMemo(() => {\n\t\t// the selected crumb is the current page, so it navigates nowhere and emits nothing.\n\t\tif (isSelected) {\n\t\t\t// eslint-disable-next-line jsx-a11y/anchor-is-valid\n\t\t\treturn <a aria-current=\"page\">{text}</a>;\n\t\t}\n\n\t\tconst handleClick = () => trackInteraction({ action: 'click' });\n\n\t\tif (typeof link === 'string') {\n\t\t\treturn (\n\t\t\t\t<a href={link} onClick={handleClick}>\n\t\t\t\t\t{text}\n\t\t\t\t</a>\n\t\t\t);\n\t\t} else if (typeof link === 'object') {\n\t\t\treturn (\n\t\t\t\t<Link {...link} onClick={handleClick}>\n\t\t\t\t\t{text}\n\t\t\t\t</Link>\n\t\t\t);\n\t\t}\n\t}, [link, text, isSelected, trackInteraction]);\n\n\treturn (\n\t\t<li\n\t\t\t{...rest}\n\t\t\tclassName={classnames(styles['MrlBreadcrumbItem'], 'MrlBreadcrumbItem', {\n\t\t\t\t[styles['MrlBreadcrumbItem--selected']]: isSelected,\n\t\t\t\t['MrlBreadcrumbItem--selected']: isSelected\n\t\t\t})}\n\t\t>\n\t\t\t{isTruncated && (\n\t\t\t\t<span className={classnames(styles['MrlBreadcrumbItem--icon'])}>\n\t\t\t\t\t<MrlSvg size=\"auto\" svg={more} />\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{!isTruncated && breadcrumbItem}\n\t\t\t{hasSeparator && <MrlBreadcrumbSeparator />}\n\t\t</li>\n\t);\n}\n"],"names":["MrlBreadcrumbItem","props","link","text","isSelected","_props$hasSeparator","hasSeparator","_props$isTruncated","isTruncated","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","breadcrumbItem","React","useMemo","createElement","handleClick","action","href","onClick","Link","_extends","className","classnames","styles","MrlSvg","size","svg","more","MrlBreadcrumbSeparator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA;AACA;AACA;AACA;AACA;AACO,SAASA,iBAAiBA,CAACC,KAA6B,EAAe;AAC7E,EAAA,IACCC,IAAI,GAODD,KAAK,CAPRC,IAAI;IACJC,IAAI,GAMDF,KAAK,CANRE,IAAI;IACJC,UAAU,GAKPH,KAAK,CALRG,UAAU;IAAAC,mBAAA,GAKPJ,KAAK,CAJRK,YAAY;AAAZA,IAAAA,YAAY,GAAAD,mBAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,mBAAA;IAAAE,kBAAA,GAIhBN,KAAK,CAHRO,WAAW;AAAXA,IAAAA,WAAW,GAAAD,kBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,kBAAA;IACnBE,OAAO,GAEJR,KAAK,CAFRQ,OAAO;AACJC,IAAAA,IAAI,GAAAC,iDAAA,CACJV,KAAK,EAAAW,SAAA,CAAA;AAET,EAAA,IAAMC,gBAAgB,GAAGC,sCAAsB,CAAC,mBAAmB,EAAEL,OAAO,CAAC;AAE7E,EAAA,IAAMM,cAAc,GAAGC,gBAAK,CAACC,OAAO,CAAC,MAAM;AAC1C;AACA,IAAA,IAAIb,UAAU,EAAE;AACf;MACA,oBAAOY,gBAAA,CAAAE,aAAA,CAAA,GAAA,EAAA;QAAG,cAAA,EAAa;AAAM,OAAA,EAAEf,IAAQ,CAAC;AACzC,IAAA;AAEA,IAAA,IAAMgB,WAAW,GAAGA,MAAMN,gBAAgB,CAAC;AAAEO,MAAAA,MAAM,EAAE;AAAQ,KAAC,CAAC;AAE/D,IAAA,IAAI,OAAOlB,IAAI,KAAK,QAAQ,EAAE;MAC7B,oBACCc,gBAAA,CAAAE,aAAA,CAAA,GAAA,EAAA;AAAGG,QAAAA,IAAI,EAAEnB,IAAK;AAACoB,QAAAA,OAAO,EAAEH;AAAY,OAAA,EAClChB,IACC,CAAC;AAEN,IAAA,CAAC,MAAM,IAAI,OAAOD,IAAI,KAAK,QAAQ,EAAE;MACpC,oBACCc,gBAAA,CAAAE,aAAA,CAACK,mBAAI,EAAAC,iCAAA,KAAKtB,IAAI,EAAA;AAAEoB,QAAAA,OAAO,EAAEH;AAAY,OAAA,CAAA,EACnChB,IACI,CAAC;AAET,IAAA;EACD,CAAC,EAAE,CAACD,IAAI,EAAEC,IAAI,EAAEC,UAAU,EAAES,gBAAgB,CAAC,CAAC;AAE9C,EAAA,oBACCG,gBAAA,CAAAE,aAAA,CAAA,IAAA,EAAAM,iCAAA,KACKd,IAAI,EAAA;IACRe,SAAS,EAAEC,2BAAU,CAACC,gCAAM,CAAC,mBAAmB,CAAC,EAAE,mBAAmB,EAAE;AACvE,MAAA,CAACA,gCAAM,CAAC,6BAA6B,CAAC,GAAGvB,UAAU;AACnD,MAAA,CAAC,6BAA6B,GAAGA;KACjC;AAAE,GAAA,CAAA,EAEFI,WAAW,iBACXQ,gBAAA,CAAAE,aAAA,CAAA,MAAA,EAAA;AAAMO,IAAAA,SAAS,EAAEC,2BAAU,CAACC,gCAAM,CAAC,yBAAyB,CAAC;AAAE,GAAA,eAC9DX,gBAAA,CAAAE,aAAA,CAACU,aAAM,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAM;AAACC,IAAAA,GAAG,EAAEC;AAAK,GAAE,CAC3B,CACN,EACA,CAACvB,WAAW,IAAIO,cAAc,EAC9BT,YAAY,iBAAIU,gBAAA,CAAAE,aAAA,CAACc,6CAAsB,EAAA,IAAE,CACvC,CAAC;AAEP;;;;"}

package/dist/cjs/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.js

@@ -7,6 +7,7 @@ var MrlSvgAnimate = require('../../svg/MrlSvgAnimate/MrlSvgAnimate.js');
 var constants = require('../../tooltip/constants.js');
 var constants$1 = require('../constants.js');
 var helpers = require('../helpers.js');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
 var MrlTooltip = require('../../tooltip/MrlTooltip/MrlTooltip.js');
 
@@ -33,7 +34,7 @@ function _interopNamespace(e) {
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var _excluded = ["attrs", "badge", "disableEvents", "icon", "kind", "loading", "onClick", "position", "toggleAria", "toggleStyle", "text", "tipAnchor", "size", "state"];
+var _excluded = ["attrs", "badge", "disableEvents", "icon", "kind", "loading", "onClick", "position", "toggleAria", "toggleStyle", "text", "tipAnchor", "eventId", "size", "state"];
 var MrlAnimatedIconButton = /*#__PURE__*/React__namespace.forwardRef(function MrlAnimatedIconButton(_ref, ref) {
   var _ref$attrs = _ref.attrs,
     attrs = _ref$attrs === void 0 ? {} : _ref$attrs,
@@ -54,6 +55,7 @@ var MrlAnimatedIconButton = /*#__PURE__*/React__namespace.forwardRef(function Mr
     text = _ref.text,
     _ref$tipAnchor = _ref.tipAnchor,
     tipAnchor = _ref$tipAnchor === void 0 ? constants.MrlTooltipDefaults.anchor : _ref$tipAnchor,
+    eventId = _ref.eventId,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? constants$1.buttonDefaults.size : _ref$size,
     _ref$state = _ref.state,
@@ -74,6 +76,7 @@ var MrlAnimatedIconButton = /*#__PURE__*/React__namespace.forwardRef(function Mr
     _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
     isSelected = _React$useState6[0],
     setIsSelected = _React$useState6[1];
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlAnimatedIconButton', eventId);
   var buttonRef = React__namespace.useRef(null);
   /**
    * `useImperativeHandle` customizes the instance value
@@ -105,6 +108,10 @@ var MrlAnimatedIconButton = /*#__PURE__*/React__namespace.forwardRef(function Mr
     if (helpers._isDisabled(state, loading) || disableEvents) {
       return;
     }
+    trackInteraction({
+      action: 'click',
+      variant: kind
+    });
     if (isToggleButton) {
       setIsSelected(prevIsSelected => !prevIsSelected);
     }

package/dist/cjs/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlAnimatedIconButton.js","sources":["../../../../../src/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport * as React from 'react';\nimport { setAttributes } from '../../../utils';\nimport { MrlSvgAnimate, MrlSvgAnimateProps } from '../../svg/MrlSvgAnimate/MrlSvgAnimate';\nimport { AnimatedState } from '../../svg/constants';\nimport { MrlTooltip } from '../../tooltip';\nimport { MrlTooltipDefaults } from '../../tooltip/constants';\nimport { MrlIconButtonProps } from '../MrlIconButton/MrlIconButton';\nimport { buttonDefaults } from '../constants';\nimport { _isDisabled, _isSelected, _isToggleButton } from '../helpers';\n\nimport './MrlAnimatedIconButton.scss';\n\ninterface MrlAnimatedIconButtonProps extends Omit<MrlIconButtonProps, 'icon'> {\n\ticon: MrlSvgAnimateProps;\n}\n\ntype animationEvent = 'hover' | 'blur' | 'focus';\n\nexport const MrlAnimatedIconButton = React.forwardRef<\n\tHTMLButtonElement,\n\tMrlAnimatedIconButtonProps\n>(function MrlAnimatedIconButton(\n\t{\n\t\tattrs = {},\n\t\tbadge,\n\t\tdisableEvents = false,\n\t\ticon,\n\t\t// We intentionally deviate from the basic button for icon-buttons since the vast\n\t\t// majority of icon buttons are ghost buttons. The proptype remains\n\t\t// consistent with the basic button however to keep our code DRY.\n\t\tkind = 'ghost-inverse',\n\t\tloading = false,\n\t\tonClick,\n\t\tposition = MrlTooltipDefaults.position,\n\t\ttoggleAria = buttonDefaults.toggleAria,\n\t\ttoggleStyle,\n\t\ttext,\n\t\ttipAnchor = MrlTooltipDefaults.anchor,\n\t\tsize = buttonDefaults.size,\n\t\tstate = buttonDefaults.state,\n\t\t...remainingProps\n\t}: MrlAnimatedIconButtonProps,\n\tref\n) {\n\t/**\n\t * State value to determine if the icon should be animating\n\t */\n\tconst [isAnimating, setAnimation] = React.useState<AnimatedState>('stop');\n\n\tconst [isHovered, setHover] = React.useState(false);\n\n\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(state));\n\n\tconst buttonRef = React.useRef<HTMLButtonElement>(null);\n\t/**\n\t * `useImperativeHandle` customizes the instance value\n\t * that is exposed to parent components when using ref.\n\t */\n\tReact.useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n\t\tref,\n\t\t() => buttonRef.current\n\t);\n\n\t/**\n\t * MrlAnimatedIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'\n\t */\n\tconst isToggleButton = toggleStyle && _isToggleButton(toggleStyle);\n\n\t/**\n\t * We need to watch the value of state to keep in sync\n\t * the value of state passed as props and the internal\n\t * isSelected piece of state.\n\t */\n\tReact.useEffect(() => {\n\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\tsetIsSelected(_isSelected(state));\n\t}, [state]);\n\n\t/**\n\t * Handle onClick events\n\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t */\n\tconst handleOnClick = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.stopPropagation();\n\n\t\tif (_isDisabled(state, loading) || disableEvents) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isToggleButton) {\n\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t}\n\n\t\tif (onClick && typeof onClick === 'function') {\n\t\t\tonClick(e);\n\t\t}\n\t};\n\n\t/**\n\t * Handle animation status for mouse events exclusively\n\t * @param {boolean} mouseEnter - Determines if this is a mouseEnter event\n\t * @returns {void}\n\t */\n\tconst handleMouseInteraction = (mouseEnter: boolean): void => {\n\t\t/** Set hover status of button */\n\t\tsetHover(mouseEnter);\n\n\t\t/**\n\t\t * If the button is in focus and we trigger a mouse event\n\t\t * we don't need to change the animation state.\n\t\t */\n\t\tif (document.activeElement === buttonRef.current) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isAnimating === 'play') {\n\t\t\tsetAnimation('stop');\n\t\t} else {\n\t\t\tsetAnimation('play');\n\t\t}\n\t};\n\n\t/**\n\t * Handle animation status for mouse and keyboard events\n\t * @param {animationEvent} eventType - The type of interaction that is triggering the animation update.\n\t * @param {boolean} startEvent - Whether or not this event should start an animation\n\t * @returns {void}\n\t */\n\tconst handleAnimation = (eventType: animationEvent, startEvent = false): void => {\n\t\t/** If the button is diabled or selected, the animation must be stopped */\n\t\tif (isSelected || _isDisabled(state, loading)) {\n\t\t\tsetAnimation('stop');\n\t\t\t/** We still need to track the hover state */\n\t\t\tsetHover(startEvent);\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * If the event is a hover interaction, handle them appropriately.\n\t\t * We do this to ensure you can hover and focus without restarting\n\t\t * or stopping the animation incorrectly.\n\t\t */\n\t\tif (eventType === 'hover') {\n\t\t\thandleMouseInteraction(startEvent);\n\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Keyboard events\n\t\t */\n\t\tif (isAnimating === 'play') {\n\t\t\t/**\n\t\t\t * If a button is hovered and focused, do not stop the\n\t\t\t * animation on blur.\n\t\t\t */\n\t\t\tif (isHovered) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetAnimation('stop');\n\t\t\treturn;\n\t\t}\n\n\t\tsetAnimation('play');\n\t};\n\n\tconst handleBlur = () => {\n\t\thandleAnimation('blur');\n\t};\n\n\tconst handleFocus = () => {\n\t\thandleAnimation('focus');\n\t};\n\n\tconst handleMouseEnter = () => {\n\t\thandleAnimation('hover', true);\n\t};\n\n\tconst handleMouseLeave = () => {\n\t\thandleAnimation('hover');\n\t};\n\n\tconst classNames = classnames(\n\t\t'mrlIconButton',\n\t\t`mrlIconButton--${size}`,\n\t\t`mrlIconButton--${kind}`,\n\t\t'mrlAnimatedIconButton',\n\t\t`toggleStyle--${toggleStyle}`\n\t);\n\n\tconst attributes = setAttributes(attrs, {\n\t\t'aria-disabled': _isDisabled(state, loading),\n\t\t'aria-label': text,\n\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\ttype: 'button'\n\t});\n\n\treturn (\n\t\t<MrlTooltip anchor={tipAnchor} position={position} text={text}>\n\t\t\t<button\n\t\t\t\t{...attributes}\n\t\t\t\t{...remainingProps}\n\t\t\t\tclassName={classNames}\n\t\t\t\tref={buttonRef}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tonClick={handleOnClick}\n\t\t\t\tonFocus={handleFocus}\n\t\t\t\tonMouseEnter={handleMouseEnter}\n\t\t\t\tonMouseLeave={handleMouseLeave}\n\t\t\t>\n\t\t\t\t<div className=\"mrlAnimatedIconButton-iconContainer\">\n\t\t\t\t\t<MrlSvgAnimate {...icon} state={isAnimating} />\n\t\t\t\t</div>\n\t\t\t\t{badge}\n\t\t\t</button>\n\t\t</MrlTooltip>\n\t);\n});\n"],"names":["MrlAnimatedIconButton","React","forwardRef","_ref","ref","_ref$attrs","attrs","badge","_ref$disableEvents","disableEvents","icon","_ref$kind","kind","_ref$loading","loading","onClick","_ref$position","position","MrlTooltipDefaults","_ref$toggleAria","toggleAria","buttonDefaults","toggleStyle","text","_ref$tipAnchor","tipAnchor","anchor","_ref$size","size","_ref$state","state","remainingProps","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","isAnimating","setAnimation","_React$useState3","_React$useState4","isHovered","setHover","_React$useState5","_isSelected","_React$useState6","isSelected","setIsSelected","buttonRef","useRef","useImperativeHandle","current","isToggleButton","_isToggleButton","useEffect","handleOnClick","e","stopPropagation","_isDisabled","prevIsSelected","handleMouseInteraction","mouseEnter","document","activeElement","handleAnimation","eventType","startEvent","arguments","length","undefined","handleBlur","handleFocus","handleMouseEnter","handleMouseLeave","classNames","classnames","concat","attributes","setAttributes","_objectSpread","type","createElement","MrlTooltip","_extends","className","onBlur","onFocus","onMouseEnter","onMouseLeave","MrlSvgAnimate"],"mappings":"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"}
+{"version":3,"file":"MrlAnimatedIconButton.js","sources":["../../../../../src/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport * as React from 'react';\nimport { setAttributes } from '../../../utils';\nimport { MrlSvgAnimate, MrlSvgAnimateProps } from '../../svg/MrlSvgAnimate/MrlSvgAnimate';\nimport { AnimatedState } from '../../svg/constants';\nimport { MrlTooltip } from '../../tooltip';\nimport { MrlTooltipDefaults } from '../../tooltip/constants';\nimport { MrlIconButtonProps } from '../MrlIconButton/MrlIconButton';\nimport { buttonDefaults } from '../constants';\nimport { _isDisabled, _isSelected, _isToggleButton } from '../helpers';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nimport './MrlAnimatedIconButton.scss';\n\ninterface MrlAnimatedIconButtonProps extends Omit<MrlIconButtonProps, 'icon'> {\n\ticon: MrlSvgAnimateProps;\n}\n\ntype animationEvent = 'hover' | 'blur' | 'focus';\n\nexport const MrlAnimatedIconButton = React.forwardRef<\n\tHTMLButtonElement,\n\tMrlAnimatedIconButtonProps\n>(function MrlAnimatedIconButton(\n\t{\n\t\tattrs = {},\n\t\tbadge,\n\t\tdisableEvents = false,\n\t\ticon,\n\t\t// We intentionally deviate from the basic button for icon-buttons since the vast\n\t\t// majority of icon buttons are ghost buttons. The proptype remains\n\t\t// consistent with the basic button however to keep our code DRY.\n\t\tkind = 'ghost-inverse',\n\t\tloading = false,\n\t\tonClick,\n\t\tposition = MrlTooltipDefaults.position,\n\t\ttoggleAria = buttonDefaults.toggleAria,\n\t\ttoggleStyle,\n\t\ttext,\n\t\ttipAnchor = MrlTooltipDefaults.anchor,\n\t\teventId,\n\t\tsize = buttonDefaults.size,\n\t\tstate = buttonDefaults.state,\n\t\t...remainingProps\n\t}: MrlAnimatedIconButtonProps,\n\tref\n) {\n\t/**\n\t * State value to determine if the icon should be animating\n\t */\n\tconst [isAnimating, setAnimation] = React.useState<AnimatedState>('stop');\n\n\tconst [isHovered, setHover] = React.useState(false);\n\n\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(state));\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlAnimatedIconButton', eventId);\n\n\tconst buttonRef = React.useRef<HTMLButtonElement>(null);\n\t/**\n\t * `useImperativeHandle` customizes the instance value\n\t * that is exposed to parent components when using ref.\n\t */\n\tReact.useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n\t\tref,\n\t\t() => buttonRef.current\n\t);\n\n\t/**\n\t * MrlAnimatedIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'\n\t */\n\tconst isToggleButton = toggleStyle && _isToggleButton(toggleStyle);\n\n\t/**\n\t * We need to watch the value of state to keep in sync\n\t * the value of state passed as props and the internal\n\t * isSelected piece of state.\n\t */\n\tReact.useEffect(() => {\n\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\tsetIsSelected(_isSelected(state));\n\t}, [state]);\n\n\t/**\n\t * Handle onClick events\n\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t */\n\tconst handleOnClick = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.stopPropagation();\n\n\t\tif (_isDisabled(state, loading) || disableEvents) {\n\t\t\treturn;\n\t\t}\n\n\t\ttrackInteraction({ action: 'click', variant: kind });\n\n\t\tif (isToggleButton) {\n\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t}\n\n\t\tif (onClick && typeof onClick === 'function') {\n\t\t\tonClick(e);\n\t\t}\n\t};\n\n\t/**\n\t * Handle animation status for mouse events exclusively\n\t * @param {boolean} mouseEnter - Determines if this is a mouseEnter event\n\t * @returns {void}\n\t */\n\tconst handleMouseInteraction = (mouseEnter: boolean): void => {\n\t\t/** Set hover status of button */\n\t\tsetHover(mouseEnter);\n\n\t\t/**\n\t\t * If the button is in focus and we trigger a mouse event\n\t\t * we don't need to change the animation state.\n\t\t */\n\t\tif (document.activeElement === buttonRef.current) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isAnimating === 'play') {\n\t\t\tsetAnimation('stop');\n\t\t} else {\n\t\t\tsetAnimation('play');\n\t\t}\n\t};\n\n\t/**\n\t * Handle animation status for mouse and keyboard events\n\t * @param {animationEvent} eventType - The type of interaction that is triggering the animation update.\n\t * @param {boolean} startEvent - Whether or not this event should start an animation\n\t * @returns {void}\n\t */\n\tconst handleAnimation = (eventType: animationEvent, startEvent = false): void => {\n\t\t/** If the button is diabled or selected, the animation must be stopped */\n\t\tif (isSelected || _isDisabled(state, loading)) {\n\t\t\tsetAnimation('stop');\n\t\t\t/** We still need to track the hover state */\n\t\t\tsetHover(startEvent);\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * If the event is a hover interaction, handle them appropriately.\n\t\t * We do this to ensure you can hover and focus without restarting\n\t\t * or stopping the animation incorrectly.\n\t\t */\n\t\tif (eventType === 'hover') {\n\t\t\thandleMouseInteraction(startEvent);\n\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Keyboard events\n\t\t */\n\t\tif (isAnimating === 'play') {\n\t\t\t/**\n\t\t\t * If a button is hovered and focused, do not stop the\n\t\t\t * animation on blur.\n\t\t\t */\n\t\t\tif (isHovered) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetAnimation('stop');\n\t\t\treturn;\n\t\t}\n\n\t\tsetAnimation('play');\n\t};\n\n\tconst handleBlur = () => {\n\t\thandleAnimation('blur');\n\t};\n\n\tconst handleFocus = () => {\n\t\thandleAnimation('focus');\n\t};\n\n\tconst handleMouseEnter = () => {\n\t\thandleAnimation('hover', true);\n\t};\n\n\tconst handleMouseLeave = () => {\n\t\thandleAnimation('hover');\n\t};\n\n\tconst classNames = classnames(\n\t\t'mrlIconButton',\n\t\t`mrlIconButton--${size}`,\n\t\t`mrlIconButton--${kind}`,\n\t\t'mrlAnimatedIconButton',\n\t\t`toggleStyle--${toggleStyle}`\n\t);\n\n\tconst attributes = setAttributes(attrs, {\n\t\t'aria-disabled': _isDisabled(state, loading),\n\t\t'aria-label': text,\n\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\ttype: 'button'\n\t});\n\n\treturn (\n\t\t<MrlTooltip anchor={tipAnchor} position={position} text={text}>\n\t\t\t<button\n\t\t\t\t{...attributes}\n\t\t\t\t{...remainingProps}\n\t\t\t\tclassName={classNames}\n\t\t\t\tref={buttonRef}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tonClick={handleOnClick}\n\t\t\t\tonFocus={handleFocus}\n\t\t\t\tonMouseEnter={handleMouseEnter}\n\t\t\t\tonMouseLeave={handleMouseLeave}\n\t\t\t>\n\t\t\t\t<div className=\"mrlAnimatedIconButton-iconContainer\">\n\t\t\t\t\t<MrlSvgAnimate {...icon} state={isAnimating} />\n\t\t\t\t</div>\n\t\t\t\t{badge}\n\t\t\t</button>\n\t\t</MrlTooltip>\n\t);\n});\n"],"names":["MrlAnimatedIconButton","React","forwardRef","_ref","ref","_ref$attrs","attrs","badge","_ref$disableEvents","disableEvents","icon","_ref$kind","kind","_ref$loading","loading","onClick","_ref$position","position","MrlTooltipDefaults","_ref$toggleAria","toggleAria","buttonDefaults","toggleStyle","text","_ref$tipAnchor","tipAnchor","anchor","eventId","_ref$size","size","_ref$state","state","remainingProps","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","isAnimating","setAnimation","_React$useState3","_React$useState4","isHovered","setHover","_React$useState5","_isSelected","_React$useState6","isSelected","setIsSelected","trackInteraction","useMrlTrackInteraction","buttonRef","useRef","useImperativeHandle","current","isToggleButton","_isToggleButton","useEffect","handleOnClick","e","stopPropagation","_isDisabled","action","variant","prevIsSelected","handleMouseInteraction","mouseEnter","document","activeElement","handleAnimation","eventType","startEvent","arguments","length","undefined","handleBlur","handleFocus","handleMouseEnter","handleMouseLeave","classNames","classnames","concat","attributes","setAttributes","_objectSpread","type","createElement","MrlTooltip","_extends","className","onBlur","onFocus","onMouseEnter","onMouseLeave","MrlSvgAnimate"],"mappings":"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"}

package/dist/cjs/components/button/MrlButton/MrlButton.js

@@ -34,7 +34,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["attrs", "badge", "className", "disabled", "disableEvents", "icon", "iconPos", "kind", "loading", "loadingText", "onClick", "toggleAria", "toggleStyle", "text", "trackingId", "size", "state", "tooltip"];
+var _excluded = ["attrs", "badge", "className", "disabled", "disableEvents", "icon", "iconPos", "kind", "loading", "loadingText", "onClick", "toggleAria", "toggleStyle", "text", "eventId", "size", "state", "tooltip"];
 var MrlButton = /*#__PURE__*/React__namespace.forwardRef(function MrlButton(_ref, ref) {
   var attrs = _ref.attrs,
     badge = _ref.badge,
@@ -57,7 +57,7 @@ var MrlButton = /*#__PURE__*/React__namespace.forwardRef(function MrlButton(_ref
     toggleAria = _ref$toggleAria === void 0 ? constants$1.buttonDefaults.toggleAria : _ref$toggleAria,
     toggleStyle = _ref.toggleStyle,
     text = _ref.text,
-    trackingId = _ref.trackingId,
+    eventId = _ref.eventId,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? constants$1.buttonDefaults.size : _ref$size,
     _ref$state = _ref.state,
@@ -68,7 +68,7 @@ var MrlButton = /*#__PURE__*/React__namespace.forwardRef(function MrlButton(_ref
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isSelected = _React$useState2[0],
     setIsSelected = _React$useState2[1];
-  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlButton', trackingId);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlButton', eventId);
 
   /**
    * MrlButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'

package/dist/cjs/components/button/MrlButton/MrlButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlButton.js","sources":["../../../../../src/components/button/MrlButton/MrlButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport {\n\tallowedButtonValues,\n\tbuttonDefaults,\n\tMrlButtonKind,\n\tMrlButtonSize,\n\tToggleAria,\n\tIconPosition\n} from '../constants';\nimport { _isDisabled, _isSelected, _spinnerProps } from '../helpers';\nimport { MrlSpinner, MrlTooltipAnchor, MrlTooltipPosition, MrlTooltip } from '../../';\nimport { spinnerDefaults } from '../../loader/constants';\nimport { AttrsObject, MrlComponentProps, setAttributes } from '../../../utils';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nimport './MrlButton.global.scss';\n\nexport type MrlButtonState = (typeof allowedButtonValues.states)[number];\nexport type ToggleStyle = (typeof allowedButtonValues.toggleStyles)[number];\n\nexport interface TooltipConfig {\n\t/**\n\t * The text to display in the tooltip\n\t */\n\ttext: string;\n\t/**\n\t * The position of the tooltip relative to the button\n\t */\n\tposition?: MrlTooltipPosition;\n\n\t/**\n\t * The anchor of the tooltip relative to the button\n\t */\n\tanchor?: MrlTooltipAnchor;\n\n\t/**\n\t * The data-qa attribute for the tooltip\n\t */\n\tdataQa?: string;\n}\n\nexport interface MrlButtonProps\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tReact.ComponentProps<'button'> {\n\t/**\n\t * Applies additional HTML attributes to the button element.\n\t *\n\t * @deprecated\n\t */\n\tattrs?: AttrsObject;\n\t/**\n\t * Allow developers to add badge to buttons.\n\t */\n\tbadge?: React.ReactElement;\n\n\t/**\n\t * @deprecated - Use state=\"disabled\" or \"selected-disabled\" or \"skeleton\" instead.\n\t * Allow developers to change the disabled state based on user interactions.\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Allows developers the ability to disable built in event listeners so they can manage user\n\t * interactions from the application.\n\t */\n\tdisableEvents?: boolean;\n\t/**\n\t * Allow developers to add icon to buttons.\n\t */\n\ticon?: React.ReactElement;\n\t/**\n\t * Allows developers to right-align an icon within a button.\n\t */\n\ticonPos?: IconPosition;\n\t/**\n\t * Changes the visual emphasis of the button.\n\t */\n\tkind?: MrlButtonKind;\n\t/**\n\t * Displays a spinner in the button to indicate some action is in progress.\n\t */\n\tloading?: boolean;\n\t/**\n\t * Text for the spinner when the button is in a loading state.\n\t */\n\tloadingText?: string;\n\t/**\n\t * onClick event for the button.\n\t */\n\tonClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Changes the size of the button so it can scale with its surrounding context.\n\t */\n\tsize?: MrlButtonSize;\n\t/**\n\t * Changes the state of the button based on user permissions or actions.\n\t */\n\tstate?: MrlButtonState;\n\t/**\n\t * The textual label describing the button's purpose/action.\n\t * Icon buttons require a text label to ensure accessibility.\n\t */\n\ttext: string;\n\t/**\n\t * Enables interaction tracking for this button. Provide a stable, non-PII id\n\t * (e.g. 'board-share-cta'). When omitted, the button emits no analytics.\n\t */\n\ttrackingId?: string;\n\t/**\n\t * Determines which aria setup to use for various toggle/selected styles.\n\t * pressed - use for an traditional “toggle button”\n\t * selected - use for tabs and custom select options\n\t * expanded - use for menus, panels, and popovers\n\t * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)\n\t * \t\tor [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs\n\t */\n\ttoggleAria?: ToggleAria;\n\n\t/**\n\t * Tooltip configuration for the button\n\t */\n\ttooltip?: TooltipConfig;\n\n\t/**\n\t * Selected state variant when the button is a Toggle Button. The visual styles\n\t * are also impacted by the \"kind\" prop. Toggle buttons are only supported\n\t * when \"kind\" is set to either \"ghost\" or \"ghost-inverse\". Setting this prop\n\t * informs the component that this is a toggle button and to add that functionality\n\t */\n\ttoggleStyle?: ToggleStyle;\n}\n\nexport const MrlButton = React.forwardRef<HTMLButtonElement, MrlButtonProps>(function MrlButton(\n\t{\n\t\tattrs,\n\t\tbadge,\n\t\tclassName,\n\t\tdisabled = buttonDefaults.disabled,\n\t\tdisableEvents = false,\n\t\ticon,\n\t\ticonPos = buttonDefaults.iconPos,\n\t\tkind = buttonDefaults.kind,\n\t\tloading = false,\n\t\tloadingText = spinnerDefaults.text,\n\t\tonClick,\n\t\ttoggleAria = buttonDefaults.toggleAria,\n\t\ttoggleStyle,\n\t\ttext,\n\t\ttrackingId,\n\t\tsize = buttonDefaults.size,\n\t\tstate = buttonDefaults.state,\n\t\ttooltip,\n\t\t...remainingProps\n\t}: MrlButtonProps,\n\tref\n) {\n\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(state));\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlButton', trackingId);\n\n\t/**\n\t * MrlButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'\n\t */\n\tconst isToggleButton = toggleStyle && allowedButtonValues.toggleStyles.includes(toggleStyle);\n\n\t/**\n\t * We need to watch the value of state to keep in sync\n\t * the value of state passed as props and the internal\n\t * isSelected piece of state.\n\t */\n\tReact.useEffect(() => {\n\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\tsetIsSelected(_isSelected(state));\n\t}, [state]);\n\n\t/**\n\t * Handle onClick events\n\t *\n\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t */\n\tfunction handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {\n\t\te.stopPropagation();\n\n\t\tif (_isDisabled(state, loading) || disabled || disableEvents) {\n\t\t\treturn;\n\t\t}\n\n\t\ttrackInteraction({ action: 'click', variant: kind });\n\n\t\tif (isToggleButton) {\n\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t}\n\n\t\tif (onClick && typeof onClick === 'function') {\n\t\t\tonClick(e);\n\t\t}\n\t}\n\n\tconst classNames = classnames(\n\t\t'mrlButton',\n\t\t`mrlButton--${size}`,\n\t\t`mrlButton--${kind}`,\n\t\tstate === 'skeleton' && `mrlButton--skeleton`,\n\t\t!icon && loading && `mrlButton--loading`,\n\t\tisToggleButton && `toggleStyle--${toggleStyle}`,\n\t\ticon && `mrlButton--icon-${iconPos}`,\n\t\tclassName,\n\t\tattrs?.class || attrs?.className\n\t);\n\n\tif (attrs && attrs.class) delete attrs.class;\n\tif (attrs && attrs.className) delete attrs.className;\n\n\tconst spinnerProps = _spinnerProps(kind, size);\n\tconst spinner = (\n\t\t<MrlSpinner kind={spinnerProps.kind} role=\"none\" size={spinnerProps.size} text={loadingText} />\n\t);\n\n\tconst attributes = setAttributes(attrs || {}, {\n\t\t'aria-disabled': _isDisabled(state, loading) || disabled,\n\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\trole: 'button',\n\t\ttype: 'button'\n\t});\n\n\tconst renderButton = () => (\n\t\t<button\n\t\t\t{...attributes}\n\t\t\t{...remainingProps}\n\t\t\tclassName={classNames}\n\t\t\tref={ref}\n\t\t\tonClick={handleOnClick}\n\t\t>\n\t\t\t{loading ? spinner : icon}\n\t\t\t<span className=\"mrlButton-text\">{text}</span>\n\t\t\t{badge}\n\t\t</button>\n\t);\n\n\treturn !tooltip ? (\n\t\trenderButton()\n\t) : (\n\t\t<MrlTooltip\n\t\t\tposition={tooltip.position || 'bottom'}\n\t\t\tanchor={tooltip.anchor || 'center'}\n\t\t\ttext={tooltip.text}\n\t\t\tdataQa={tooltip.dataQa}\n\t\t>\n\t\t\t{renderButton()}\n\t\t</MrlTooltip>\n\t);\n});\n"],"names":["MrlButton","React","forwardRef","_ref","ref","attrs","badge","className","_ref$disabled","disabled","buttonDefaults","_ref$disableEvents","disableEvents","icon","_ref$iconPos","iconPos","_ref$kind","kind","_ref$loading","loading","_ref$loadingText","loadingText","spinnerDefaults","text","onClick","_ref$toggleAria","toggleAria","toggleStyle","trackingId","_ref$size","size","_ref$state","state","tooltip","remainingProps","_objectWithoutProperties","_excluded","_React$useState","useState","_isSelected","_React$useState2","_slicedToArray","isSelected","setIsSelected","trackInteraction","useMrlTrackInteraction","isToggleButton","allowedButtonValues","toggleStyles","includes","useEffect","handleOnClick","e","stopPropagation","_isDisabled","action","variant","prevIsSelected","classNames","classnames","concat","class","spinnerProps","_spinnerProps","spinner","createElement","MrlSpinner","role","attributes","setAttributes","_objectSpread","type","renderButton","_extends","MrlTooltip","position","anchor","dataQa"],"mappings":"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"}
+{"version":3,"file":"MrlButton.js","sources":["../../../../../src/components/button/MrlButton/MrlButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport {\n\tallowedButtonValues,\n\tbuttonDefaults,\n\tMrlButtonKind,\n\tMrlButtonSize,\n\tToggleAria,\n\tIconPosition\n} from '../constants';\nimport { _isDisabled, _isSelected, _spinnerProps } from '../helpers';\nimport { MrlSpinner, MrlTooltipAnchor, MrlTooltipPosition, MrlTooltip } from '../../';\nimport { spinnerDefaults } from '../../loader/constants';\nimport { AttrsObject, MrlComponentProps, setAttributes } from '../../../utils';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nimport './MrlButton.global.scss';\n\nexport type MrlButtonState = (typeof allowedButtonValues.states)[number];\nexport type ToggleStyle = (typeof allowedButtonValues.toggleStyles)[number];\n\nexport interface TooltipConfig {\n\t/**\n\t * The text to display in the tooltip\n\t */\n\ttext: string;\n\t/**\n\t * The position of the tooltip relative to the button\n\t */\n\tposition?: MrlTooltipPosition;\n\n\t/**\n\t * The anchor of the tooltip relative to the button\n\t */\n\tanchor?: MrlTooltipAnchor;\n\n\t/**\n\t * The data-qa attribute for the tooltip\n\t */\n\tdataQa?: string;\n}\n\nexport interface MrlButtonProps\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tReact.ComponentProps<'button'> {\n\t/**\n\t * Applies additional HTML attributes to the button element.\n\t *\n\t * @deprecated\n\t */\n\tattrs?: AttrsObject;\n\t/**\n\t * Allow developers to add badge to buttons.\n\t */\n\tbadge?: React.ReactElement;\n\n\t/**\n\t * @deprecated - Use state=\"disabled\" or \"selected-disabled\" or \"skeleton\" instead.\n\t * Allow developers to change the disabled state based on user interactions.\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Allows developers the ability to disable built in event listeners so they can manage user\n\t * interactions from the application.\n\t */\n\tdisableEvents?: boolean;\n\t/**\n\t * Allow developers to add icon to buttons.\n\t */\n\ticon?: React.ReactElement;\n\t/**\n\t * Allows developers to right-align an icon within a button.\n\t */\n\ticonPos?: IconPosition;\n\t/**\n\t * Changes the visual emphasis of the button.\n\t */\n\tkind?: MrlButtonKind;\n\t/**\n\t * Displays a spinner in the button to indicate some action is in progress.\n\t */\n\tloading?: boolean;\n\t/**\n\t * Text for the spinner when the button is in a loading state.\n\t */\n\tloadingText?: string;\n\t/**\n\t * onClick event for the button.\n\t */\n\tonClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Changes the size of the button so it can scale with its surrounding context.\n\t */\n\tsize?: MrlButtonSize;\n\t/**\n\t * Changes the state of the button based on user permissions or actions.\n\t */\n\tstate?: MrlButtonState;\n\t/**\n\t * The textual label describing the button's purpose/action.\n\t * Icon buttons require a text label to ensure accessibility.\n\t */\n\ttext: string;\n\t/**\n\t * Enables interaction tracking for this button. Provide a stable, non-PII id\n\t * (e.g. 'board-share-cta'). When omitted, the button emits no analytics.\n\t */\n\teventId?: string;\n\t/**\n\t * Determines which aria setup to use for various toggle/selected styles.\n\t * pressed - use for an traditional “toggle button”\n\t * selected - use for tabs and custom select options\n\t * expanded - use for menus, panels, and popovers\n\t * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)\n\t * \t\tor [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs\n\t */\n\ttoggleAria?: ToggleAria;\n\n\t/**\n\t * Tooltip configuration for the button\n\t */\n\ttooltip?: TooltipConfig;\n\n\t/**\n\t * Selected state variant when the button is a Toggle Button. The visual styles\n\t * are also impacted by the \"kind\" prop. Toggle buttons are only supported\n\t * when \"kind\" is set to either \"ghost\" or \"ghost-inverse\". Setting this prop\n\t * informs the component that this is a toggle button and to add that functionality\n\t */\n\ttoggleStyle?: ToggleStyle;\n}\n\nexport const MrlButton = React.forwardRef<HTMLButtonElement, MrlButtonProps>(function MrlButton(\n\t{\n\t\tattrs,\n\t\tbadge,\n\t\tclassName,\n\t\tdisabled = buttonDefaults.disabled,\n\t\tdisableEvents = false,\n\t\ticon,\n\t\ticonPos = buttonDefaults.iconPos,\n\t\tkind = buttonDefaults.kind,\n\t\tloading = false,\n\t\tloadingText = spinnerDefaults.text,\n\t\tonClick,\n\t\ttoggleAria = buttonDefaults.toggleAria,\n\t\ttoggleStyle,\n\t\ttext,\n\t\teventId,\n\t\tsize = buttonDefaults.size,\n\t\tstate = buttonDefaults.state,\n\t\ttooltip,\n\t\t...remainingProps\n\t}: MrlButtonProps,\n\tref\n) {\n\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(state));\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlButton', eventId);\n\n\t/**\n\t * MrlButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'\n\t */\n\tconst isToggleButton = toggleStyle && allowedButtonValues.toggleStyles.includes(toggleStyle);\n\n\t/**\n\t * We need to watch the value of state to keep in sync\n\t * the value of state passed as props and the internal\n\t * isSelected piece of state.\n\t */\n\tReact.useEffect(() => {\n\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\tsetIsSelected(_isSelected(state));\n\t}, [state]);\n\n\t/**\n\t * Handle onClick events\n\t *\n\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t */\n\tfunction handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {\n\t\te.stopPropagation();\n\n\t\tif (_isDisabled(state, loading) || disabled || disableEvents) {\n\t\t\treturn;\n\t\t}\n\n\t\ttrackInteraction({ action: 'click', variant: kind });\n\n\t\tif (isToggleButton) {\n\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t}\n\n\t\tif (onClick && typeof onClick === 'function') {\n\t\t\tonClick(e);\n\t\t}\n\t}\n\n\tconst classNames = classnames(\n\t\t'mrlButton',\n\t\t`mrlButton--${size}`,\n\t\t`mrlButton--${kind}`,\n\t\tstate === 'skeleton' && `mrlButton--skeleton`,\n\t\t!icon && loading && `mrlButton--loading`,\n\t\tisToggleButton && `toggleStyle--${toggleStyle}`,\n\t\ticon && `mrlButton--icon-${iconPos}`,\n\t\tclassName,\n\t\tattrs?.class || attrs?.className\n\t);\n\n\tif (attrs && attrs.class) delete attrs.class;\n\tif (attrs && attrs.className) delete attrs.className;\n\n\tconst spinnerProps = _spinnerProps(kind, size);\n\tconst spinner = (\n\t\t<MrlSpinner kind={spinnerProps.kind} role=\"none\" size={spinnerProps.size} text={loadingText} />\n\t);\n\n\tconst attributes = setAttributes(attrs || {}, {\n\t\t'aria-disabled': _isDisabled(state, loading) || disabled,\n\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\trole: 'button',\n\t\ttype: 'button'\n\t});\n\n\tconst renderButton = () => (\n\t\t<button\n\t\t\t{...attributes}\n\t\t\t{...remainingProps}\n\t\t\tclassName={classNames}\n\t\t\tref={ref}\n\t\t\tonClick={handleOnClick}\n\t\t>\n\t\t\t{loading ? spinner : icon}\n\t\t\t<span className=\"mrlButton-text\">{text}</span>\n\t\t\t{badge}\n\t\t</button>\n\t);\n\n\treturn !tooltip ? (\n\t\trenderButton()\n\t) : (\n\t\t<MrlTooltip\n\t\t\tposition={tooltip.position || 'bottom'}\n\t\t\tanchor={tooltip.anchor || 'center'}\n\t\t\ttext={tooltip.text}\n\t\t\tdataQa={tooltip.dataQa}\n\t\t>\n\t\t\t{renderButton()}\n\t\t</MrlTooltip>\n\t);\n});\n"],"names":["MrlButton","React","forwardRef","_ref","ref","attrs","badge","className","_ref$disabled","disabled","buttonDefaults","_ref$disableEvents","disableEvents","icon","_ref$iconPos","iconPos","_ref$kind","kind","_ref$loading","loading","_ref$loadingText","loadingText","spinnerDefaults","text","onClick","_ref$toggleAria","toggleAria","toggleStyle","eventId","_ref$size","size","_ref$state","state","tooltip","remainingProps","_objectWithoutProperties","_excluded","_React$useState","useState","_isSelected","_React$useState2","_slicedToArray","isSelected","setIsSelected","trackInteraction","useMrlTrackInteraction","isToggleButton","allowedButtonValues","toggleStyles","includes","useEffect","handleOnClick","e","stopPropagation","_isDisabled","action","variant","prevIsSelected","classNames","classnames","concat","class","spinnerProps","_spinnerProps","spinner","createElement","MrlSpinner","role","attributes","setAttributes","_objectSpread","type","renderButton","_extends","MrlTooltip","position","anchor","dataQa"],"mappings":"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"}

package/dist/cjs/components/button/MrlIconButton/MrlIconButton.js

@@ -7,6 +7,7 @@ var constants$2 = require('../constants.js');
 var helpers = require('../helpers.js');
 var constants$1 = require('../../tooltip/constants.js');
 var constants = require('../../loader/constants.js');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
 var MrlTooltip = require('../../tooltip/MrlTooltip/MrlTooltip.js');
 var MrlSpinner = require('../../loader/MrlSpinner/MrlSpinner.js');
@@ -34,7 +35,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["aria-label", "attrs", "badge", "className", "disableEvents", "disableTooltipHover", "icon", "kind", "loading", "loadingText", "onClick", "onKeyUp", "onMouseUp", "position", "toggleAria", "toggleStyle", "text", "tipAnchor", "size", "state", "wrapperClassName", "controlledState"];
+var _excluded = ["aria-label", "attrs", "badge", "className", "disableEvents", "disableTooltipHover", "icon", "kind", "loading", "loadingText", "onClick", "onKeyUp", "onMouseUp", "position", "toggleAria", "toggleStyle", "text", "tipAnchor", "eventId", "size", "state", "wrapperClassName", "controlledState"];
 var MrlIconButton = /*#__PURE__*/React__namespace.forwardRef(function MrlIconButton(_ref, ref) {
   var ariaLabel = _ref['aria-label'],
     _ref$attrs = _ref.attrs,
@@ -63,6 +64,7 @@ var MrlIconButton = /*#__PURE__*/React__namespace.forwardRef(function MrlIconBut
     text = _ref.text,
     _ref$tipAnchor = _ref.tipAnchor,
     tipAnchor = _ref$tipAnchor === void 0 ? constants$1.MrlTooltipDefaults.anchor : _ref$tipAnchor,
+    eventId = _ref.eventId,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? constants$2.buttonDefaults.size : _ref$size,
     _ref$state = _ref.state,
@@ -81,6 +83,7 @@ var MrlIconButton = /*#__PURE__*/React__namespace.forwardRef(function MrlIconBut
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isSelected = _React$useState2[0],
     setIsSelected = _React$useState2[1];
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlIconButton', eventId);
   var buttonRef = React__namespace.useRef(null);
   React__namespace.useImperativeHandle(ref, () => buttonRef.current);
 
@@ -108,6 +111,10 @@ var MrlIconButton = /*#__PURE__*/React__namespace.forwardRef(function MrlIconBut
     if (helpers._isDisabled(effectiveButtonState, loading) || disableEvents) {
       return;
     }
+    trackInteraction({
+      action: 'click',
+      variant: kind
+    });
     if (isToggleButton && !controlledState) {
       setIsSelected(prevIsSelected => !prevIsSelected);
     }

package/dist/cjs/components/button/MrlIconButton/MrlIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlIconButton.js","sources":["../../../../../src/components/button/MrlIconButton/MrlIconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport {\n\tbuttonDefaults,\n\tMrlButtonKind,\n\tMrlButtonSize,\n\tMrlGhostIconButtonSize,\n\tToggleAria\n} from '../constants';\nimport { _isDisabled, _isSelected, _isToggleButton, _spinnerProps } from '../helpers';\nimport { AttrsObject, MrlComponentProps, setAttributes, getUniqueId } from '../../../utils';\nimport { MrlTooltipAnchor, MrlTooltipDefaults, MrlTooltipPosition } from '../../tooltip/constants';\nimport { MrlButtonState, MrlSpinner, MrlTooltip, ToggleStyle } from '../../';\nimport { spinnerDefaults } from '../../loader/constants';\nimport './MrlIconButton.scss';\n\nexport interface MrlIconButtonProps\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tReact.ComponentProps<'button'> {\n\t/**\n\t * Applies additional HTML attributes to the button element.\n\t * @deprecated\n\t */\n\tattrs?: AttrsObject;\n\t/**\n\t * Allow developers to add badge to buttons.\n\t */\n\tbadge?: React.ReactElement;\n\t/** Additional class to add to the button */\n\tclassName?: string;\n\t/**\n\t * Allows developers the ability to disable built in event listeners so they can manage user\n\t * interactions from the application.\n\t */\n\tdisableEvents?: boolean;\n\n\t/** Whether to disable the tooltip hover action that keeps it open */\n\tdisableTooltipHover?: boolean;\n\n\t/**\n\t * The icon that will be rendered.\n\t */\n\ticon: React.ReactElement;\n\t/**\n\t * Changes the visual emphasis of the button.\n\t *\n\t * Note: size=\"xsmall\" should ONLY be used with a kind of `ghost` or `ghost-inverse`.\n\t */\n\tkind?: MrlButtonKind;\n\t/**\n\t * Displays a spinner in the button to indicate some action is in progress.\n\t */\n\tloading?: boolean;\n\t/**\n\t * Text for the spinner when the button is in a loading state.\n\t */\n\tloadingText?: string;\n\n\t/**\n\t * onClick event for the button.\n\t */\n\tonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * onKeyDown event for the button.\n\t */\n\tonKeyUp?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * onMouseUp event for the button.\n\t */\n\tonMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * The placement of the tooltip in relation to the button.\n\t */\n\tposition?: MrlTooltipPosition;\n\t/**\n\t * Changes the size of the button so it can scale with its surrounding context.\n\t *\n\t * Note: size=\"xsmall\" should ONLY be used with a kind of `ghost` or `ghost-inverse`.\n\t */\n\tsize?: MrlButtonSize | MrlGhostIconButtonSize;\n\t/**\n\t * Changes the state of the button based on user permissions or actions.\n\t *\n\t * Note: The Basic Button does not fully support state=\"disabled\", use\n\t * the 'disabled' prop instead. Since it does not support state=\"disabled\",\n\t * it also doesn't not support state=\"selected-disabled\".\n\t */\n\tstate?: MrlButtonState;\n\t/**\n\t * The textual label describing the button's purpose/action.\n\t * Icon buttons require a text label to ensure accessibility.\n\t */\n\ttext: string;\n\t/**\n\t * The arrow position of the tooltip in relation to the button.\n\t */\n\ttipAnchor?: MrlTooltipAnchor;\n\n\t/**\n\t * Determines which aria setup to use for various toggle/selected styles.\n\t * pressed - use for an traditional “toggle button”\n\t * selected - use for tabs and custom select options\n\t * expanded - use for menus, panels, and popovers\n\t * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)\n\t * \t\tor [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs\n\t */\n\ttoggleAria?: ToggleAria;\n\t/**\n\t * Selected state variant when the button is a Toggle Button. The visual styles\n\t * are also impacted by the \"kind\" prop. Toggle buttons are only supported\n\t * when \"kind\" is set to either \"ghost\" or \"ghost-inverse\". Setting this prop\n\t * informs the component that this is a toggle button and to add that functionality\n\t */\n\ttoggleStyle?: ToggleStyle;\n\n\t/**\n\t * An optional class name to add to the tooltip wrapper.\n\t */\n\twrapperClassName?: string;\n\n\t/**\n\t * Controlled state that overrides the internal state management.\n\t * When provided, this takes precedence over the `state` prop and allows\n\t * the parent component to fully control the icon button's state.\n\t */\n\tcontrolledState?: MrlButtonState;\n}\n\nexport const MrlIconButton = React.forwardRef<HTMLButtonElement, MrlIconButtonProps>(\n\tfunction MrlIconButton(\n\t\t{\n\t\t\t['aria-label']: ariaLabel,\n\t\t\tattrs = {},\n\t\t\tbadge,\n\t\t\tclassName,\n\t\t\tdisableEvents = false,\n\t\t\tdisableTooltipHover = false,\n\t\t\ticon,\n\t\t\t// We intentionally deviate from the basic button for icon-buttons since the vast\n\t\t\t// majority of icon buttons are ghost buttons. The proptype remains\n\t\t\t// consistent with the basic button however to keep our code DRY.\n\t\t\tkind = 'ghost',\n\t\t\tloading = false,\n\t\t\tloadingText = spinnerDefaults.text,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tonMouseUp,\n\t\t\tposition = MrlTooltipDefaults.position,\n\t\t\ttoggleAria = buttonDefaults.toggleAria,\n\t\t\ttoggleStyle,\n\t\t\ttext,\n\t\t\ttipAnchor = MrlTooltipDefaults.anchor,\n\t\t\tsize = buttonDefaults.size,\n\t\t\tstate = buttonDefaults.state,\n\t\t\twrapperClassName,\n\t\t\tcontrolledState,\n\t\t\t...remainingProps\n\t\t}: MrlIconButtonProps,\n\t\tref\n\t) {\n\t\t/**\n\t\t * Determine the effective button state.\n\t\t * Uses controlledState if provided (controlled mode),\n\t\t * otherwise falls back to the state prop (uncontrolled mode).\n\t\t * This allows the component to work in both controlled and uncontrolled scenarios.\n\t\t */\n\t\tconst effectiveButtonState = controlledState ?? state;\n\n\t\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(effectiveButtonState));\n\n\t\tconst buttonRef = React.useRef<HTMLButtonElement>(null);\n\t\tReact.useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n\t\t\tref,\n\t\t\t() => buttonRef.current\n\t\t);\n\n\t\t/**\n\t\t * MrlIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'\n\t\t */\n\t\tconst isToggleButton = toggleStyle && _isToggleButton(toggleStyle);\n\n\t\t/**\n\t\t * We need to watch the value of state to keep in sync\n\t\t * the value of state passed as props and the internal\n\t\t * isSelected piece of state.\n\t\t */\n\t\tReact.useEffect(() => {\n\t\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\t\tsetIsSelected(_isSelected(effectiveButtonState));\n\t\t}, [effectiveButtonState]);\n\n\t\t/**\n\t\t * Handle onClick events\n\t\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t\t */\n\t\tfunction handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {\n\t\t\te.stopPropagation();\n\n\t\t\tif (_isDisabled(effectiveButtonState, loading) || disableEvents) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (isToggleButton && !controlledState) {\n\t\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t\t}\n\n\t\t\tif (onClick && typeof onClick === 'function') {\n\t\t\t\tonClick(e);\n\t\t\t}\n\t\t}\n\n\t\tconst classNames = classnames(\n\t\t\t'mrlIconButton',\n\t\t\t`mrlIconButton--${size}`,\n\t\t\t`mrlIconButton--${kind}`,\n\t\t\tisToggleButton && toggleStyle && `toggleStyle--${toggleStyle}`,\n\t\t\tattrs.class || attrs.className,\n\t\t\tclassName\n\t\t);\n\n\t\tdelete attrs.class;\n\t\tdelete attrs.className;\n\n\t\tconst getAriaLabel = (): string => {\n\t\t\t// Set loading text if loading\n\t\t\tif (loading) return `${loadingText} ${text}`;\n\n\t\t\t// Only set aria-label if we have actual content\n\t\t\tconst hasAriaLabel = ariaLabel && ariaLabel.trim() !== '';\n\n\t\t\t// If we have a custom ariaLabel, override the default text\n\t\t\tif (hasAriaLabel) return ariaLabel;\n\n\t\t\t// Fallback to icon button text\n\t\t\treturn text;\n\t\t};\n\n\t\tconst ariaLabelValue = getAriaLabel();\n\n\t\tconst attributes = setAttributes(attrs, {\n\t\t\t'aria-disabled': _isDisabled(effectiveButtonState, loading),\n\t\t\t'aria-label': ariaLabelValue,\n\t\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\t\ttype: 'button'\n\t\t});\n\n\t\t// MrlSvg should always have size=\"auto\"\n\t\tconst iconWithSizeAuto = React.useMemo(\n\t\t\t() =>\n\t\t\t\tReact.cloneElement(icon, {\n\t\t\t\t\tsize: 'auto'\n\t\t\t\t}),\n\t\t\t[icon]\n\t\t);\n\n\t\tconst spinnerProps = _spinnerProps(kind, size);\n\t\tconst spinner = <MrlSpinner kind={spinnerProps.kind} size={spinnerProps.size} />;\n\n\t\tconst dataQaProp = (remainingProps as { 'data-qa'?: string })['data-qa'];\n\t\tconst tooltipQa = dataQaProp ? `${dataQaProp}-tooltip` : getUniqueId('tooltip');\n\t\tconst tooltipContentClass =\n\t\t\tsize === 'xsmall' || size === 'small' ? `mrlIconButton--${size}-wrapper` : undefined;\n\n\t\treturn (\n\t\t\t<MrlTooltip\n\t\t\t\tanchor={tipAnchor}\n\t\t\t\tdataQa={tooltipQa}\n\t\t\t\tposition={position}\n\t\t\t\ttext={text}\n\t\t\t\ttooltipClass={classnames('mrlIconButton-wrapper', wrapperClassName)}\n\t\t\t\ttooltipContentClass={tooltipContentClass}\n\t\t\t\tdisableTooltipHover={disableTooltipHover}\n\t\t\t\tsrAnnouncement={false}\n\t\t\t>\n\t\t\t\t<button\n\t\t\t\t\t{...attributes}\n\t\t\t\t\t{...remainingProps}\n\t\t\t\t\tclassName={classNames}\n\t\t\t\t\tref={buttonRef}\n\t\t\t\t\tonClick={handleOnClick}\n\t\t\t\t\tonKeyUp={onKeyUp}\n\t\t\t\t\tonMouseUp={onMouseUp}\n\t\t\t\t>\n\t\t\t\t\t{loading ? spinner : iconWithSizeAuto}\n\t\t\t\t\t{badge}\n\t\t\t\t</button>\n\t\t\t</MrlTooltip>\n\t\t);\n\t}\n);\n"],"names":["MrlIconButton","React","forwardRef","_ref","ref","ariaLabel","_ref$attrs","attrs","badge","className","_ref$disableEvents","disableEvents","_ref$disableTooltipHo","disableTooltipHover","icon","_ref$kind","kind","_ref$loading","loading","_ref$loadingText","loadingText","spinnerDefaults","text","onClick","onKeyUp","onMouseUp","_ref$position","position","MrlTooltipDefaults","_ref$toggleAria","toggleAria","buttonDefaults","toggleStyle","_ref$tipAnchor","tipAnchor","anchor","_ref$size","size","_ref$state","state","wrapperClassName","controlledState","remainingProps","_objectWithoutProperties","_excluded","effectiveButtonState","_React$useState","useState","_isSelected","_React$useState2","_slicedToArray","isSelected","setIsSelected","buttonRef","useRef","useImperativeHandle","current","isToggleButton","_isToggleButton","useEffect","handleOnClick","e","stopPropagation","_isDisabled","prevIsSelected","classNames","classnames","concat","class","getAriaLabel","hasAriaLabel","trim","ariaLabelValue","attributes","setAttributes","_objectSpread","type","iconWithSizeAuto","useMemo","cloneElement","spinnerProps","_spinnerProps","spinner","createElement","MrlSpinner","dataQaProp","tooltipQa","getUniqueId","tooltipContentClass","undefined","MrlTooltip","dataQa","tooltipClass","srAnnouncement","_extends"],"mappings":"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"}
+{"version":3,"file":"MrlIconButton.js","sources":["../../../../../src/components/button/MrlIconButton/MrlIconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport {\n\tbuttonDefaults,\n\tMrlButtonKind,\n\tMrlButtonSize,\n\tMrlGhostIconButtonSize,\n\tToggleAria\n} from '../constants';\nimport { _isDisabled, _isSelected, _isToggleButton, _spinnerProps } from '../helpers';\nimport { AttrsObject, MrlComponentProps, setAttributes, getUniqueId } from '../../../utils';\nimport { MrlTooltipAnchor, MrlTooltipDefaults, MrlTooltipPosition } from '../../tooltip/constants';\nimport { MrlButtonState, MrlSpinner, MrlTooltip, ToggleStyle } from '../../';\nimport { spinnerDefaults } from '../../loader/constants';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\nimport './MrlIconButton.scss';\n\nexport interface MrlIconButtonProps\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tReact.ComponentProps<'button'> {\n\t/**\n\t * Applies additional HTML attributes to the button element.\n\t * @deprecated\n\t */\n\tattrs?: AttrsObject;\n\t/**\n\t * Allow developers to add badge to buttons.\n\t */\n\tbadge?: React.ReactElement;\n\t/** Additional class to add to the button */\n\tclassName?: string;\n\t/**\n\t * Allows developers the ability to disable built in event listeners so they can manage user\n\t * interactions from the application.\n\t */\n\tdisableEvents?: boolean;\n\n\t/** Whether to disable the tooltip hover action that keeps it open */\n\tdisableTooltipHover?: boolean;\n\n\t/**\n\t * The icon that will be rendered.\n\t */\n\ticon: React.ReactElement;\n\t/**\n\t * Changes the visual emphasis of the button.\n\t *\n\t * Note: size=\"xsmall\" should ONLY be used with a kind of `ghost` or `ghost-inverse`.\n\t */\n\tkind?: MrlButtonKind;\n\t/**\n\t * Displays a spinner in the button to indicate some action is in progress.\n\t */\n\tloading?: boolean;\n\t/**\n\t * Text for the spinner when the button is in a loading state.\n\t */\n\tloadingText?: string;\n\n\t/**\n\t * onClick event for the button.\n\t */\n\tonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * onKeyDown event for the button.\n\t */\n\tonKeyUp?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * onMouseUp event for the button.\n\t */\n\tonMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * The placement of the tooltip in relation to the button.\n\t */\n\tposition?: MrlTooltipPosition;\n\t/**\n\t * Changes the size of the button so it can scale with its surrounding context.\n\t *\n\t * Note: size=\"xsmall\" should ONLY be used with a kind of `ghost` or `ghost-inverse`.\n\t */\n\tsize?: MrlButtonSize | MrlGhostIconButtonSize;\n\t/**\n\t * Changes the state of the button based on user permissions or actions.\n\t *\n\t * Note: The Basic Button does not fully support state=\"disabled\", use\n\t * the 'disabled' prop instead. Since it does not support state=\"disabled\",\n\t * it also doesn't not support state=\"selected-disabled\".\n\t */\n\tstate?: MrlButtonState;\n\t/**\n\t * The textual label describing the button's purpose/action.\n\t * Icon buttons require a text label to ensure accessibility.\n\t */\n\ttext: string;\n\t/**\n\t * The arrow position of the tooltip in relation to the button.\n\t */\n\ttipAnchor?: MrlTooltipAnchor;\n\n\t/**\n\t * Enables interaction tracking for this button. Provide a stable, non-PII id\n\t * (e.g. 'board-share-cta'). When omitted, the button emits no analytics.\n\t */\n\teventId?: string;\n\n\t/**\n\t * Determines which aria setup to use for various toggle/selected styles.\n\t * pressed - use for an traditional “toggle button”\n\t * selected - use for tabs and custom select options\n\t * expanded - use for menus, panels, and popovers\n\t * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)\n\t * \t\tor [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs\n\t */\n\ttoggleAria?: ToggleAria;\n\t/**\n\t * Selected state variant when the button is a Toggle Button. The visual styles\n\t * are also impacted by the \"kind\" prop. Toggle buttons are only supported\n\t * when \"kind\" is set to either \"ghost\" or \"ghost-inverse\". Setting this prop\n\t * informs the component that this is a toggle button and to add that functionality\n\t */\n\ttoggleStyle?: ToggleStyle;\n\n\t/**\n\t * An optional class name to add to the tooltip wrapper.\n\t */\n\twrapperClassName?: string;\n\n\t/**\n\t * Controlled state that overrides the internal state management.\n\t * When provided, this takes precedence over the `state` prop and allows\n\t * the parent component to fully control the icon button's state.\n\t */\n\tcontrolledState?: MrlButtonState;\n}\n\nexport const MrlIconButton = React.forwardRef<HTMLButtonElement, MrlIconButtonProps>(\n\tfunction MrlIconButton(\n\t\t{\n\t\t\t['aria-label']: ariaLabel,\n\t\t\tattrs = {},\n\t\t\tbadge,\n\t\t\tclassName,\n\t\t\tdisableEvents = false,\n\t\t\tdisableTooltipHover = false,\n\t\t\ticon,\n\t\t\t// We intentionally deviate from the basic button for icon-buttons since the vast\n\t\t\t// majority of icon buttons are ghost buttons. The proptype remains\n\t\t\t// consistent with the basic button however to keep our code DRY.\n\t\t\tkind = 'ghost',\n\t\t\tloading = false,\n\t\t\tloadingText = spinnerDefaults.text,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tonMouseUp,\n\t\t\tposition = MrlTooltipDefaults.position,\n\t\t\ttoggleAria = buttonDefaults.toggleAria,\n\t\t\ttoggleStyle,\n\t\t\ttext,\n\t\t\ttipAnchor = MrlTooltipDefaults.anchor,\n\t\t\teventId,\n\t\t\tsize = buttonDefaults.size,\n\t\t\tstate = buttonDefaults.state,\n\t\t\twrapperClassName,\n\t\t\tcontrolledState,\n\t\t\t...remainingProps\n\t\t}: MrlIconButtonProps,\n\t\tref\n\t) {\n\t\t/**\n\t\t * Determine the effective button state.\n\t\t * Uses controlledState if provided (controlled mode),\n\t\t * otherwise falls back to the state prop (uncontrolled mode).\n\t\t * This allows the component to work in both controlled and uncontrolled scenarios.\n\t\t */\n\t\tconst effectiveButtonState = controlledState ?? state;\n\n\t\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(effectiveButtonState));\n\n\t\tconst trackInteraction = useMrlTrackInteraction('MrlIconButton', eventId);\n\n\t\tconst buttonRef = React.useRef<HTMLButtonElement>(null);\n\t\tReact.useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n\t\t\tref,\n\t\t\t() => buttonRef.current\n\t\t);\n\n\t\t/**\n\t\t * MrlIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'\n\t\t */\n\t\tconst isToggleButton = toggleStyle && _isToggleButton(toggleStyle);\n\n\t\t/**\n\t\t * We need to watch the value of state to keep in sync\n\t\t * the value of state passed as props and the internal\n\t\t * isSelected piece of state.\n\t\t */\n\t\tReact.useEffect(() => {\n\t\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\t\tsetIsSelected(_isSelected(effectiveButtonState));\n\t\t}, [effectiveButtonState]);\n\n\t\t/**\n\t\t * Handle onClick events\n\t\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t\t */\n\t\tfunction handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {\n\t\t\te.stopPropagation();\n\n\t\t\tif (_isDisabled(effectiveButtonState, loading) || disableEvents) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\ttrackInteraction({ action: 'click', variant: kind });\n\n\t\t\tif (isToggleButton && !controlledState) {\n\t\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t\t}\n\n\t\t\tif (onClick && typeof onClick === 'function') {\n\t\t\t\tonClick(e);\n\t\t\t}\n\t\t}\n\n\t\tconst classNames = classnames(\n\t\t\t'mrlIconButton',\n\t\t\t`mrlIconButton--${size}`,\n\t\t\t`mrlIconButton--${kind}`,\n\t\t\tisToggleButton && toggleStyle && `toggleStyle--${toggleStyle}`,\n\t\t\tattrs.class || attrs.className,\n\t\t\tclassName\n\t\t);\n\n\t\tdelete attrs.class;\n\t\tdelete attrs.className;\n\n\t\tconst getAriaLabel = (): string => {\n\t\t\t// Set loading text if loading\n\t\t\tif (loading) return `${loadingText} ${text}`;\n\n\t\t\t// Only set aria-label if we have actual content\n\t\t\tconst hasAriaLabel = ariaLabel && ariaLabel.trim() !== '';\n\n\t\t\t// If we have a custom ariaLabel, override the default text\n\t\t\tif (hasAriaLabel) return ariaLabel;\n\n\t\t\t// Fallback to icon button text\n\t\t\treturn text;\n\t\t};\n\n\t\tconst ariaLabelValue = getAriaLabel();\n\n\t\tconst attributes = setAttributes(attrs, {\n\t\t\t'aria-disabled': _isDisabled(effectiveButtonState, loading),\n\t\t\t'aria-label': ariaLabelValue,\n\t\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\t\ttype: 'button'\n\t\t});\n\n\t\t// MrlSvg should always have size=\"auto\"\n\t\tconst iconWithSizeAuto = React.useMemo(\n\t\t\t() =>\n\t\t\t\tReact.cloneElement(icon, {\n\t\t\t\t\tsize: 'auto'\n\t\t\t\t}),\n\t\t\t[icon]\n\t\t);\n\n\t\tconst spinnerProps = _spinnerProps(kind, size);\n\t\tconst spinner = <MrlSpinner kind={spinnerProps.kind} size={spinnerProps.size} />;\n\n\t\tconst dataQaProp = (remainingProps as { 'data-qa'?: string })['data-qa'];\n\t\tconst tooltipQa = dataQaProp ? `${dataQaProp}-tooltip` : getUniqueId('tooltip');\n\t\tconst tooltipContentClass =\n\t\t\tsize === 'xsmall' || size === 'small' ? `mrlIconButton--${size}-wrapper` : undefined;\n\n\t\treturn (\n\t\t\t<MrlTooltip\n\t\t\t\tanchor={tipAnchor}\n\t\t\t\tdataQa={tooltipQa}\n\t\t\t\tposition={position}\n\t\t\t\ttext={text}\n\t\t\t\ttooltipClass={classnames('mrlIconButton-wrapper', wrapperClassName)}\n\t\t\t\ttooltipContentClass={tooltipContentClass}\n\t\t\t\tdisableTooltipHover={disableTooltipHover}\n\t\t\t\tsrAnnouncement={false}\n\t\t\t>\n\t\t\t\t<button\n\t\t\t\t\t{...attributes}\n\t\t\t\t\t{...remainingProps}\n\t\t\t\t\tclassName={classNames}\n\t\t\t\t\tref={buttonRef}\n\t\t\t\t\tonClick={handleOnClick}\n\t\t\t\t\tonKeyUp={onKeyUp}\n\t\t\t\t\tonMouseUp={onMouseUp}\n\t\t\t\t>\n\t\t\t\t\t{loading ? spinner : iconWithSizeAuto}\n\t\t\t\t\t{badge}\n\t\t\t\t</button>\n\t\t\t</MrlTooltip>\n\t\t);\n\t}\n);\n"],"names":["MrlIconButton","React","forwardRef","_ref","ref","ariaLabel","_ref$attrs","attrs","badge","className","_ref$disableEvents","disableEvents","_ref$disableTooltipHo","disableTooltipHover","icon","_ref$kind","kind","_ref$loading","loading","_ref$loadingText","loadingText","spinnerDefaults","text","onClick","onKeyUp","onMouseUp","_ref$position","position","MrlTooltipDefaults","_ref$toggleAria","toggleAria","buttonDefaults","toggleStyle","_ref$tipAnchor","tipAnchor","anchor","eventId","_ref$size","size","_ref$state","state","wrapperClassName","controlledState","remainingProps","_objectWithoutProperties","_excluded","effectiveButtonState","_React$useState","useState","_isSelected","_React$useState2","_slicedToArray","isSelected","setIsSelected","trackInteraction","useMrlTrackInteraction","buttonRef","useRef","useImperativeHandle","current","isToggleButton","_isToggleButton","useEffect","handleOnClick","e","stopPropagation","_isDisabled","action","variant","prevIsSelected","classNames","classnames","concat","class","getAriaLabel","hasAriaLabel","trim","ariaLabelValue","attributes","setAttributes","_objectSpread","type","iconWithSizeAuto","useMemo","cloneElement","spinnerProps","_spinnerProps","spinner","createElement","MrlSpinner","dataQaProp","tooltipQa","getUniqueId","tooltipContentClass","undefined","MrlTooltip","dataQa","tooltipClass","srAnnouncement","_extends"],"mappings":"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"}

package/dist/cjs/components/button/MrlProcessingButton/MrlProcessingButton.js

@@ -5,6 +5,7 @@ var React = require('react');
 var classnames = require('classnames');
 var dsIcons = require('@muraldevkit/ds-icons');
 var MrlProcessingButton_module = require('./MrlProcessingButton.module.scss.js');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlButton = require('../MrlButton/MrlButton.js');
 var MrlSvg = require('../../svg/MrlSvg/MrlSvg.js');
 var MrlLiveRegion = require('../../live-region/MrlLiveRegion/MrlLiveRegion.js');
@@ -32,7 +33,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["data-qa", "processingButtonConfig", "resetTime", "className"];
+var _excluded = ["data-qa", "processingButtonConfig", "resetTime", "className", "eventId"];
 var DEFAULT_RESET_TIME = 4000;
 var DEFAULT_FEEDBACK_TIME = 500;
 /**
@@ -52,32 +53,50 @@ function MrlProcessingButton(props) {
     _props$resetTime = props.resetTime,
     resetTime = _props$resetTime === void 0 ? DEFAULT_RESET_TIME : _props$resetTime,
     className = props.className,
+    eventId = props.eventId,
     buttonProps = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
   var _React$useState = React__namespace.useState('normal'),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     currentState = _React$useState2[0],
     setCurrentState = _React$useState2[1];
   var timeoutRef = React__namespace.useRef(null);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlProcessingButton', eventId);
   var handleClick = () => {
     if (currentState === 'processing') return;
+    trackInteraction({
+      action: 'click',
+      variant: buttonProps.kind
+    });
     setCurrentState('processing');
   };
   var feedbackTime = (_processingButtonConf = processingButtonConfig.processing.feedbackTime) !== null && _processingButtonConf !== void 0 ? _processingButtonConf : DEFAULT_FEEDBACK_TIME;
   var executeAction = React__namespace.useCallback(() => {
     processingButtonConfig.processing.action().then(() => {
+      trackInteraction({
+        action: 'submit',
+        metadata: {
+          outcome: 'success'
+        }
+      });
       if (processingButtonConfig.success) {
         setCurrentState('success');
       } else {
         setCurrentState('normal');
       }
     }).catch(() => {
+      trackInteraction({
+        action: 'submit',
+        metadata: {
+          outcome: 'error'
+        }
+      });
       if (processingButtonConfig.error) {
         setCurrentState('error');
       } else {
         setCurrentState('normal');
       }
     });
-  }, [processingButtonConfig.error, processingButtonConfig.processing, processingButtonConfig.success]);
+  }, [processingButtonConfig.error, processingButtonConfig.processing, processingButtonConfig.success, trackInteraction]);
   React__namespace.useEffect(() => {
     switch (currentState) {
       case 'processing':