npm - @muraldevkit/ui-toolkit - Versions diffs - 4.72.0 → 4.73.0-dev-t0WE.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (273) hide show

package/dist/esm/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.js.map CHANGED Viewed

	@@ -1 +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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"}
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';\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/esm/components/button/MrlButton/MrlButton.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { setAttributes } from '../../../utils/setAttributes/setAttributes.js';
 import { MrlTooltip } from '../../tooltip/MrlTooltip/MrlTooltip.js';
 import { MrlSpinner } from '../../loader/MrlSpinner/MrlSpinner.js';
-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.forwardRef(function MrlButton(_ref, ref) {
   var attrs = _ref.attrs,
     badge = _ref.badge,
@@ -32,7 +32,7 @@ var MrlButton = /*#__PURE__*/React.forwardRef(function MrlButton(_ref, ref) {
     toggleAria = _ref$toggleAria === void 0 ? 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 ? buttonDefaults.size : _ref$size,
     _ref$state = _ref.state,
@@ -43,7 +43,7 @@ var MrlButton = /*#__PURE__*/React.forwardRef(function MrlButton(_ref, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isSelected = _React$useState2[0],
     setIsSelected = _React$useState2[1];
-  var trackInteraction = useMrlTrackInteraction('MrlButton', trackingId);
+  var trackInteraction = useMrlTrackInteraction('MrlButton', eventId);
   /**
    * MrlButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'

package/dist/esm/components/button/MrlButton/MrlButton.js.map CHANGED Viewed

	@@ -1 +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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"}
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\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":";;;;;;;;;;;;AAoIO,IAAMA,SAAS,gBAAGC,KAAK,CAACC,UAAU,CAAoC,SAASF,SAASA,CAAAG,IAAA,EAsB9FC,GAAG,EACF;AAAA,EAAA,IArBAC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IAAAC,aAAA,GAAAL,IAAA,CACTM,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAA,MAAA,GAAGE,cAAc,CAACD,QAAQ,GAAAD,aAAA;IAAAG,kBAAA,GAAAR,IAAA,CAClCS,aAAa;AAAbA,IAAAA,aAAa,GAAAD,kBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,kBAAA;IACrBE,IAAI,GAAAV,IAAA,CAAJU,IAAI;IAAAC,YAAA,GAAAX,IAAA,CACJY,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAA,MAAA,GAAGJ,cAAc,CAACK,OAAO,GAAAD,YAAA;IAAAE,SAAA,GAAAb,IAAA,CAChCc,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAGN,cAAc,CAACO,IAAI,GAAAD,SAAA;IAAAE,YAAA,GAAAf,IAAA,CAC1BgB,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,YAAA;IAAAE,gBAAA,GAAAjB,IAAA,CACfkB,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAA,MAAA,GAAGE,eAAe,CAACC,IAAI,GAAAH,gBAAA;IAClCI,OAAO,GAAArB,IAAA,CAAPqB,OAAO;IAAAC,eAAA,GAAAtB,IAAA,CACPuB,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAA,MAAA,GAAGf,cAAc,CAACgB,UAAU,GAAAD,eAAA;IACtCE,WAAW,GAAAxB,IAAA,CAAXwB,WAAW;IACXJ,IAAI,GAAApB,IAAA,CAAJoB,IAAI;IACJK,OAAO,GAAAzB,IAAA,CAAPyB,OAAO;IAAAC,SAAA,GAAA1B,IAAA,CACP2B,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAGnB,cAAc,CAACoB,IAAI,GAAAD,SAAA;IAAAE,UAAA,GAAA5B,IAAA,CAC1B6B,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAGrB,cAAc,CAACsB,KAAK,GAAAD,UAAA;IAC5BE,OAAO,GAAA9B,IAAA,CAAP8B,OAAO;AACJC,IAAAA,cAAc,GAAAC,wBAAA,CAAAhC,IAAA,EAAAiC,SAAA,CAAA;EAIlB,IAAAC,eAAA,GAAoCpC,KAAK,CAACqC,QAAQ,CAAC,MAAMC,WAAW,CAACP,KAAK,CAAC,CAAC;IAAAQ,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAArEK,IAAAA,UAAU,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,aAAa,GAAAH,gBAAA,CAAA,CAAA,CAAA;AAEhC,EAAA,IAAMI,gBAAgB,GAAGC,sBAAsB,CAAC,WAAW,EAAEjB,OAAO,CAAC;;AAErE;AACD;AACA;EACC,IAAMkB,cAAc,GAAGnB,WAAW,IAAIoB,mBAAmB,CAACC,YAAY,CAACC,QAAQ,CAACtB,WAAW,CAAC;;AAE5F;AACD;AACA;AACA;AACA;EACC1B,KAAK,CAACiD,SAAS,CAAC,MAAM;AACrB;AACAP,IAAAA,aAAa,CAACJ,WAAW,CAACP,KAAK,CAAC,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;;AAEX;AACD;AACA;AACA;AACA;EACC,SAASmB,aAAaA,CAACC,CAAsC,EAAE;IAC9DA,CAAC,CAACC,eAAe,EAAE;IAEnB,IAAIC,WAAW,CAACtB,KAAK,EAAEb,OAAO,CAAC,IAAIV,QAAQ,IAAIG,aAAa,EAAE;AAC7D,MAAA;AACD,IAAA;AAEAgC,IAAAA,gBAAgB,CAAC;AAAEW,MAAAA,MAAM,EAAE,OAAO;AAAEC,MAAAA,OAAO,EAAEvC;AAAK,KAAC,CAAC;AAEpD,IAAA,IAAI6B,cAAc,EAAE;AACnBH,MAAAA,aAAa,CAAEc,cAAc,IAAK,CAACA,cAAc,CAAC;AACnD,IAAA;AAEA,IAAA,IAAIjC,OAAO,IAAI,OAAOA,OAAO,KAAK,UAAU,EAAE;MAC7CA,OAAO,CAAC4B,CAAC,CAAC;AACX,IAAA;AACD,EAAA;EAEA,IAAMM,UAAU,GAAGC,UAAU,CAC5B,WAAW,EAAA,aAAA,CAAAC,MAAA,CACG9B,IAAI,CAAA,EAAA,aAAA,CAAA8B,MAAA,CACJ3C,IAAI,CAAA,EAClBe,KAAK,KAAK,UAAU,IAAA,qBAAyB,EAC7C,CAACnB,IAAI,IAAIM,OAAO,IAAA,oBAAwB,EACxC2B,cAAc,IAAA,eAAA,CAAAc,MAAA,CAAoBjC,WAAW,CAAE,EAC/Cd,IAAI,IAAA,kBAAA,CAAA+C,MAAA,CAAuB7C,OAAO,CAAE,EACpCR,SAAS,EACT,CAAAF,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAEwD,KAAK,MAAIxD,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAEE,SAAS,CACjC,CAAC;EAED,IAAIF,KAAK,IAAIA,KAAK,CAACwD,KAAK,EAAE,OAAOxD,KAAK,CAACwD,KAAK;EAC5C,IAAIxD,KAAK,IAAIA,KAAK,CAACE,SAAS,EAAE,OAAOF,KAAK,CAACE,SAAS;AAEpD,EAAA,IAAMuD,YAAY,GAAGC,aAAa,CAAC9C,IAAI,EAAEa,IAAI,CAAC;AAC9C,EAAA,IAAMkC,OAAO,gBACZ/D,KAAA,CAAAgE,aAAA,CAACC,UAAU,EAAA;IAACjD,IAAI,EAAE6C,YAAY,CAAC7C,IAAK;AAACkD,IAAAA,IAAI,EAAC,MAAM;IAACrC,IAAI,EAAEgC,YAAY,CAAChC,IAAK;AAACP,IAAAA,IAAI,EAAEF;AAAY,GAAE,CAC9F;EAED,IAAM+C,UAAU,GAAGC,aAAa,CAAChE,KAAK,IAAI,EAAE,EAAAiE,cAAA,CAAAA,cAAA,CAAA;AAC3C,IAAA,eAAe,EAAEhB,WAAW,CAACtB,KAAK,EAAEb,OAAO,CAAC,IAAIV;AAAQ,GAAA,EACpDqC,cAAc,IAAI;AAAE,IAAA,CAAA,OAAA,CAAAc,MAAA,CAASlC,UAAU,CAAA,GAAKgB,UAAU,IAAI;GAAO,CAAA,EAAA,EAAA,EAAA;AACrEyB,IAAAA,IAAI,EAAE,QAAQ;AACdI,IAAAA,IAAI,EAAE;AAAQ,GAAA,CACd,CAAC;AAEF,EAAA,IAAMC,YAAY,GAAGA,mBACpBvE,KAAA,CAAAgE,aAAA,CAAA,QAAA,EAAAQ,QAAA,CAAA,EAAA,EACKL,UAAU,EACVlC,cAAc,EAAA;AAClB3B,IAAAA,SAAS,EAAEmD,UAAW;AACtBtD,IAAAA,GAAG,EAAEA,GAAI;AACToB,IAAAA,OAAO,EAAE2B;GAAc,CAAA,EAEtBhC,OAAO,GAAG6C,OAAO,GAAGnD,IAAI,eACzBZ,KAAA,CAAAgE,aAAA,CAAA,MAAA,EAAA;AAAM1D,IAAAA,SAAS,EAAC;AAAgB,GAAA,EAAEgB,IAAW,CAAC,EAC7CjB,KACM,CACR;EAED,OAAO,CAAC2B,OAAO,GACduC,YAAY,EAAE,gBAEdvE,KAAA,CAAAgE,aAAA,CAACS,UAAU,EAAA;AACVC,IAAAA,QAAQ,EAAE1C,OAAO,CAAC0C,QAAQ,IAAI,QAAS;AACvCC,IAAAA,MAAM,EAAE3C,OAAO,CAAC2C,MAAM,IAAI,QAAS;IACnCrD,IAAI,EAAEU,OAAO,CAACV,IAAK;IACnBsD,MAAM,EAAE5C,OAAO,CAAC4C;GAAO,EAEtBL,YAAY,EACF,CACZ;AACF,CAAC;;;;"}

package/dist/esm/components/button/MrlIconButton/MrlIconButton.js CHANGED Viewed

@@ -5,11 +5,12 @@ import { buttonDefaults } from '../constants.js';
 import { _isSelected, _isDisabled, _isToggleButton, _spinnerProps } from '../helpers.js';
 import { MrlTooltipDefaults } from '../../tooltip/constants.js';
 import { spinnerDefaults } from '../../loader/constants.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { setAttributes, getUniqueId } from '../../../utils/setAttributes/setAttributes.js';
 import { MrlTooltip } from '../../tooltip/MrlTooltip/MrlTooltip.js';
 import { MrlSpinner } from '../../loader/MrlSpinner/MrlSpinner.js';
-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.forwardRef(function MrlIconButton(_ref, ref) {
   var ariaLabel = _ref['aria-label'],
     _ref$attrs = _ref.attrs,
@@ -38,6 +39,7 @@ var MrlIconButton = /*#__PURE__*/React.forwardRef(function MrlIconButton(_ref, r
     text = _ref.text,
     _ref$tipAnchor = _ref.tipAnchor,
     tipAnchor = _ref$tipAnchor === void 0 ? MrlTooltipDefaults.anchor : _ref$tipAnchor,
+    eventId = _ref.eventId,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? buttonDefaults.size : _ref$size,
     _ref$state = _ref.state,
@@ -56,6 +58,7 @@ var MrlIconButton = /*#__PURE__*/React.forwardRef(function MrlIconButton(_ref, r
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isSelected = _React$useState2[0],
     setIsSelected = _React$useState2[1];
+  var trackInteraction = useMrlTrackInteraction('MrlIconButton', eventId);
   var buttonRef = React.useRef(null);
   React.useImperativeHandle(ref, () => buttonRef.current);
@@ -83,6 +86,10 @@ var MrlIconButton = /*#__PURE__*/React.forwardRef(function MrlIconButton(_ref, r
     if (_isDisabled(effectiveButtonState, loading) || disableEvents) {
       return;
     }
+    trackInteraction({
+      action: 'click',
+      variant: kind
+    });
     if (isToggleButton && !controlledState) {
       setIsSelected(prevIsSelected => !prevIsSelected);
     }

package/dist/esm/components/button/MrlIconButton/MrlIconButton.js.map CHANGED Viewed

	@@ -1 +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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"}
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 { 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/esm/components/button/MrlProcessingButton/MrlProcessingButton.js CHANGED Viewed

@@ -3,11 +3,12 @@ import * as React from 'react';
 import classnames from 'classnames';
 import { placeholder } from '@muraldevkit/ds-icons';
 import styles from './MrlProcessingButton.module.scss.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlButton } from '../MrlButton/MrlButton.js';
 import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
 import { MrlLiveRegion } from '../../live-region/MrlLiveRegion/MrlLiveRegion.js';
-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;
 /**
@@ -27,32 +28,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 = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState('normal'),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     currentState = _React$useState2[0],
     setCurrentState = _React$useState2[1];
   var timeoutRef = React.useRef(null);
+  var trackInteraction = 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.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.useEffect(() => {
     switch (currentState) {
       case 'processing':

package/dist/esm/components/button/MrlProcessingButton/MrlProcessingButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlProcessingButton.js","sources":["../../../../../src/components/button/MrlProcessingButton/MrlProcessingButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { MrlButtonProps, MrlButton } from '../MrlButton';\nimport { DSIconType, MrlSvg } from '../../svg';\nimport { DataQa } from '../../../utils/dataQa';\nimport { placeholder } from '@muraldevkit/ds-icons';\nimport { MrlLiveRegion } from '../../live-region';\nimport styles from './MrlProcessingButton.module.scss';\n\nexport const DEFAULT_RESET_TIME = 4000;\nexport const DEFAULT_FEEDBACK_TIME = 500;\n\nexport type PossibleState = 'normal' \| 'processing' \| 'success' \| 'error';\n\nexport type MrlProcessingButtonConfig = {\n\tnormal: {\n\t\ttext: string;\n\t\ticon?: DSIconType;\n\t};\n\tprocessing: {\n\t\taction: () => Promise<void>;\n\t\t/*\n\t\t The minimum time to show the processing state before executing the action.\n\t\t * This provides visual feedback to users that their action was registered.\n\t\t /\n\t\tfeedbackTime?: number;\n\t\ttext?: string;\n\t};\n\tsuccess?: {\n\t\ttext: string;\n\t\ticon?: DSIconType;\n\t};\n\terror?: {\n\t\ttext: string;\n\t\ticon?: DSIconType;\n\t};\n};\n\nexport interface MrlProcessingButtonProps extends Omit<MrlButtonProps, 'ref' \| 'text'>, DataQa {\n\t/\n\t The configuration for the processing button.\n\t /\n\tprocessingButtonConfig: MrlProcessingButtonConfig;\n\t/\n\t The time to wait before resetting the button to the normal state.\n\t /\n\tresetTime?: number;\n}\n\n/\n A specialized button component that provides visual feedback during processing operations.\n \n The MrlProcessingButton extends the standard MrlButton with additional processing state\n * management and user feedback capabilities. It automatically handles the transition between\n * normal, loading, and completion states to provide clear visual feedback to users.\n \n @param props - The component props extending MrlButtonProps with additional processing capabilities\n * @returns a MrlProcessingButton React component\n */\nexport function MrlProcessingButton(props: MrlProcessingButtonProps) {\n\tconst {\n\t\t['data-qa']: dataQa,\n\t\tprocessingButtonConfig,\n\t\tresetTime = DEFAULT_RESET_TIME,\n\t\tclassName,\n\t\t...buttonProps\n\t} = props;\n\n\tconst [currentState, setCurrentState] = React.useState<PossibleState>('normal');\n\tconst timeoutRef = React.useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n\tconst handleClick = () => {\n\t\tif (currentState === 'processing') return;\n\t\tsetCurrentState('processing');\n\t};\n\n\tconst feedbackTime = processingButtonConfig.processing.feedbackTime ?? DEFAULT_FEEDBACK_TIME;\n\n\tconst executeAction = React.useCallback(() => {\n\t\tprocessingButtonConfig.processing\n\t\t\t.action()\n\t\t\t.then(() => {\n\t\t\t\tif (processingButtonConfig.success) {\n\t\t\t\t\tsetCurrentState('success');\n\t\t\t\t} else {\n\t\t\t\t\tsetCurrentState('normal');\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(() => {\n\t\t\t\tif (processingButtonConfig.error) {\n\t\t\t\t\tsetCurrentState('error');\n\t\t\t\t} else {\n\t\t\t\t\tsetCurrentState('normal');\n\t\t\t\t}\n\t\t\t});\n\t}, [\n\t\tprocessingButtonConfig.error,\n\t\tprocessingButtonConfig.processing,\n\t\tprocessingButtonConfig.success\n\t]);\n\n\tReact.useEffect(() => {\n\t\tswitch (currentState) {\n\t\t\tcase 'processing':\n\t\t\t\ttimeoutRef.current = setTimeout(executeAction, feedbackTime);\n\t\t\t\tbreak;\n\t\t\tcase 'success':\n\t\t\tcase 'error':\n\t\t\t\ttimeoutRef.current = setTimeout(() => {\n\t\t\t\t\tsetCurrentState('normal');\n\t\t\t\t}, resetTime);\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (timeoutRef.current) {\n\t\t\t\tclearTimeout(timeoutRef.current);\n\t\t\t}\n\t\t};\n\t}, [currentState, processingButtonConfig, resetTime, executeAction, feedbackTime]);\n\n\tconst button =\n\t\tcurrentState === 'processing' ? (\n\t\t\t<MrlButton\n\t\t\t\tdata-qa={dataQa}\n\t\t\t\t{...buttonProps}\n\t\t\t\tclassName={classnames(\n\t\t\t\t\tstyles['MrlProcessingButton'],\n\t\t\t\t\tstyles['MrlProcessingButton-is-processing'],\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\taria-busy={true}\n\t\t\t\taria-disabled={false}\n\t\t\t\t// We need to use a placeholder icon to display text and the MrlSpinner\n\t\t\t\ticon={<MrlSvg svg={placeholder} />}\n\t\t\t\tloading={true}\n\t\t\t\tloadingText=\" \"\n\t\t\t\tstate=\"disabled\"\n\t\t\t\ttext={processingButtonConfig.processing.text \|\| processingButtonConfig.normal.text}\n\t\t\t/>\n\t\t) : (\n\t\t\t<MrlButton\n\t\t\t\tdata-qa={dataQa}\n\t\t\t\tclassName={className}\n\t\t\t\t{...buttonProps}\n\t\t\t\ticon={\n\t\t\t\t\tprocessingButtonConfig[currentState]?.icon && (\n\t\t\t\t\t\t<MrlSvg svg={processingButtonConfig[currentState]?.icon} />\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\tonClick={handleClick}\n\t\t\t\tstate=\"default\"\n\t\t\t\ttext={processingButtonConfig[currentState]?.text \|\| ''}\n\t\t\t/>\n\t\t);\n\n\treturn (\n\t\t<>\n\t\t\t{button}\n\t\t\t<MrlLiveRegion\n\t\t\t\tariaLive=\"assertive\"\n\t\t\t\tsrContent={processingButtonConfig[currentState]?.text \|\| ''}\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"names":["DEFAULT_RESET_TIME","DEFAULT_FEEDBACK_TIME","MrlProcessingButton","props","_processingButtonConf","_processingButtonConf2","_processingButtonConf3","_processingButtonConf4","_processingButtonConf5","dataQa","processingButtonConfig","_props$resetTime","resetTime","className","buttonProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","currentState","setCurrentState","timeoutRef","useRef","handleClick","feedbackTime","processing","executeAction","useCallback","action","then","success","catch","error","useEffect","current","setTimeout","clearTimeout","button","createElement","MrlButton","_extends","classnames","styles","icon","MrlSvg","svg","placeholder","loading","loadingText","state","text","normal","onClick","Fragment","MrlLiveRegion","ariaLive","srContent"],"mappings":"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"}
1	+ {"version":3,"file":"MrlProcessingButton.js","sources":["../../../../../src/components/button/MrlProcessingButton/MrlProcessingButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { MrlButtonProps, MrlButton } from '../MrlButton';\nimport { DSIconType, MrlSvg } from '../../svg';\nimport { DataQa } from '../../../utils/dataQa';\nimport { placeholder } from '@muraldevkit/ds-icons';\nimport { MrlLiveRegion } from '../../live-region';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\nimport styles from './MrlProcessingButton.module.scss';\n\nexport const DEFAULT_RESET_TIME = 4000;\nexport const DEFAULT_FEEDBACK_TIME = 500;\n\nexport type PossibleState = 'normal' \| 'processing' \| 'success' \| 'error';\n\nexport type MrlProcessingButtonConfig = {\n\tnormal: {\n\t\ttext: string;\n\t\ticon?: DSIconType;\n\t};\n\tprocessing: {\n\t\taction: () => Promise<void>;\n\t\t/*\n\t\t The minimum time to show the processing state before executing the action.\n\t\t * This provides visual feedback to users that their action was registered.\n\t\t /\n\t\tfeedbackTime?: number;\n\t\ttext?: string;\n\t};\n\tsuccess?: {\n\t\ttext: string;\n\t\ticon?: DSIconType;\n\t};\n\terror?: {\n\t\ttext: string;\n\t\ticon?: DSIconType;\n\t};\n};\n\nexport interface MrlProcessingButtonProps extends Omit<MrlButtonProps, 'ref' \| 'text'>, DataQa {\n\t/\n\t The configuration for the processing button.\n\t /\n\tprocessingButtonConfig: MrlProcessingButtonConfig;\n\t/\n\t The time to wait before resetting the button to the normal state.\n\t /\n\tresetTime?: number;\n}\n\n/\n A specialized button component that provides visual feedback during processing operations.\n \n The MrlProcessingButton extends the standard MrlButton with additional processing state\n * management and user feedback capabilities. It automatically handles the transition between\n * normal, loading, and completion states to provide clear visual feedback to users.\n \n @param props - The component props extending MrlButtonProps with additional processing capabilities\n * @returns a MrlProcessingButton React component\n */\nexport function MrlProcessingButton(props: MrlProcessingButtonProps) {\n\tconst {\n\t\t['data-qa']: dataQa,\n\t\tprocessingButtonConfig,\n\t\tresetTime = DEFAULT_RESET_TIME,\n\t\tclassName,\n\t\t// pulled out of buttonProps so the inner MrlButton doesn't emit a second,\n\t\t// less specific event for the same interaction.\n\t\teventId,\n\t\t...buttonProps\n\t} = props;\n\n\tconst [currentState, setCurrentState] = React.useState<PossibleState>('normal');\n\tconst timeoutRef = React.useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlProcessingButton', eventId);\n\n\tconst handleClick = () => {\n\t\tif (currentState === 'processing') return;\n\t\ttrackInteraction({ action: 'click', variant: buttonProps.kind });\n\t\tsetCurrentState('processing');\n\t};\n\n\tconst feedbackTime = processingButtonConfig.processing.feedbackTime ?? DEFAULT_FEEDBACK_TIME;\n\n\tconst executeAction = React.useCallback(() => {\n\t\tprocessingButtonConfig.processing\n\t\t\t.action()\n\t\t\t.then(() => {\n\t\t\t\ttrackInteraction({ action: 'submit', metadata: { outcome: 'success' } });\n\n\t\t\t\tif (processingButtonConfig.success) {\n\t\t\t\t\tsetCurrentState('success');\n\t\t\t\t} else {\n\t\t\t\t\tsetCurrentState('normal');\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(() => {\n\t\t\t\ttrackInteraction({ action: 'submit', metadata: { outcome: 'error' } });\n\n\t\t\t\tif (processingButtonConfig.error) {\n\t\t\t\t\tsetCurrentState('error');\n\t\t\t\t} else {\n\t\t\t\t\tsetCurrentState('normal');\n\t\t\t\t}\n\t\t\t});\n\t}, [\n\t\tprocessingButtonConfig.error,\n\t\tprocessingButtonConfig.processing,\n\t\tprocessingButtonConfig.success,\n\t\ttrackInteraction\n\t]);\n\n\tReact.useEffect(() => {\n\t\tswitch (currentState) {\n\t\t\tcase 'processing':\n\t\t\t\ttimeoutRef.current = setTimeout(executeAction, feedbackTime);\n\t\t\t\tbreak;\n\t\t\tcase 'success':\n\t\t\tcase 'error':\n\t\t\t\ttimeoutRef.current = setTimeout(() => {\n\t\t\t\t\tsetCurrentState('normal');\n\t\t\t\t}, resetTime);\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (timeoutRef.current) {\n\t\t\t\tclearTimeout(timeoutRef.current);\n\t\t\t}\n\t\t};\n\t}, [currentState, processingButtonConfig, resetTime, executeAction, feedbackTime]);\n\n\tconst button =\n\t\tcurrentState === 'processing' ? (\n\t\t\t<MrlButton\n\t\t\t\tdata-qa={dataQa}\n\t\t\t\t{...buttonProps}\n\t\t\t\tclassName={classnames(\n\t\t\t\t\tstyles['MrlProcessingButton'],\n\t\t\t\t\tstyles['MrlProcessingButton-is-processing'],\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\taria-busy={true}\n\t\t\t\taria-disabled={false}\n\t\t\t\t// We need to use a placeholder icon to display text and the MrlSpinner\n\t\t\t\ticon={<MrlSvg svg={placeholder} />}\n\t\t\t\tloading={true}\n\t\t\t\tloadingText=\" \"\n\t\t\t\tstate=\"disabled\"\n\t\t\t\ttext={processingButtonConfig.processing.text \|\| processingButtonConfig.normal.text}\n\t\t\t/>\n\t\t) : (\n\t\t\t<MrlButton\n\t\t\t\tdata-qa={dataQa}\n\t\t\t\tclassName={className}\n\t\t\t\t{...buttonProps}\n\t\t\t\ticon={\n\t\t\t\t\tprocessingButtonConfig[currentState]?.icon && (\n\t\t\t\t\t\t<MrlSvg svg={processingButtonConfig[currentState]?.icon} />\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\tonClick={handleClick}\n\t\t\t\tstate=\"default\"\n\t\t\t\ttext={processingButtonConfig[currentState]?.text \|\| ''}\n\t\t\t/>\n\t\t);\n\n\treturn (\n\t\t<>\n\t\t\t{button}\n\t\t\t<MrlLiveRegion\n\t\t\t\tariaLive=\"assertive\"\n\t\t\t\tsrContent={processingButtonConfig[currentState]?.text \|\| ''}\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"names":["DEFAULT_RESET_TIME","DEFAULT_FEEDBACK_TIME","MrlProcessingButton","props","_processingButtonConf","_processingButtonConf2","_processingButtonConf3","_processingButtonConf4","_processingButtonConf5","dataQa","processingButtonConfig","_props$resetTime","resetTime","className","eventId","buttonProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","currentState","setCurrentState","timeoutRef","useRef","trackInteraction","useMrlTrackInteraction","handleClick","action","variant","kind","feedbackTime","processing","executeAction","useCallback","then","metadata","outcome","success","catch","error","useEffect","current","setTimeout","clearTimeout","button","createElement","MrlButton","_extends","classnames","styles","icon","MrlSvg","svg","placeholder","loading","loadingText","state","text","normal","onClick","Fragment","MrlLiveRegion","ariaLive","srContent"],"mappings":"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"}

package/dist/esm/components/callout/MrlCallout/MrlCallout.js CHANGED Viewed

@@ -3,13 +3,14 @@ import * as React from 'react';
 import { useRef } from 'react';
 import styles from './MrlCallout.module.scss.js';
 import { PORTAL_LAYERS } from '../../../utils/layers/index.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { getUniqueId } from '../../../utils/setAttributes/setAttributes.js';
 import { MrlPopover } from '../../popover/MrlPopover/MrlPopover.js';
 import { MrlText } from '../../text/MrlText/MrlText.js';
 import { MrlTextHeading } from '../../text/MrlTextHeading/MrlTextHeading.js';
 import { MrlButton } from '../../button/MrlButton/MrlButton.js';
-var _excluded = ["ariaControls", "alignment", "children", "description", "disableClickOutside", "disableFocusTrap", "eyebrow", "hasCloseButton", "image", "kind", "onOpen", "onClose", "point", "position", "primaryCta", "secondaryCta", "show", "spacing", "title"];
+var _excluded = ["ariaControls", "alignment", "children", "description", "disableClickOutside", "disableFocusTrap", "eyebrow", "hasCloseButton", "image", "kind", "onOpen", "onClose", "point", "position", "primaryCta", "secondaryCta", "show", "spacing", "title", "eventId"];
 /**
  * MrlCallout component.
  *
@@ -59,7 +60,21 @@ var MrlCallout = props => {
     show = _ref$show === void 0 ? true : _ref$show,
     spacing = _ref.spacing,
     title = _ref.title,
+    eventId = _ref.eventId,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlTrackInteraction('MrlCallout', eventId);
+  // the callout's visibility is consumer-controlled through `show`, so open/close
+  // is emitted from that rather than from the popover's internal state.
+  var wasShownRef = React.useRef(false);
+  React.useEffect(() => {
+    if (wasShownRef.current === show) return;
+    wasShownRef.current = show;
+    trackInteraction({
+      action: show ? 'open' : 'close',
+      variant: kind
+    });
+  }, [show, kind, trackInteraction]);
   if (/*#__PURE__*/React.isValidElement(children) && children.type === React.Fragment) {
     throw new Error('MrlCallout accepts a single child and does not accept a React.Fragment as a child.');
   }
@@ -131,13 +146,31 @@ var MrlCallout = props => {
   }, secondaryCta && /*#__PURE__*/React.createElement(MrlButton, {
     "data-qa": secondaryCta.dataQa,
     kind: secondaryCtaKind,
-    onClick: secondaryCta.onClick,
+    onClick: () => {
+      trackInteraction({
+        action: 'click',
+        metadata: {
+          cta: 'secondary'
+        },
+        variant: kind
+      });
+      secondaryCta.onClick();
+    },
     text: secondaryCta.text,
     size: "small"
   }), primaryCta && /*#__PURE__*/React.createElement(MrlButton, {
     "data-qa": primaryCta.dataQa,
     kind: primaryCtaKind,
-    onClick: primaryCta.onClick,
+    onClick: () => {
+      trackInteraction({
+        action: 'click',
+        metadata: {
+          cta: 'primary'
+        },
+        variant: kind
+      });
+      primaryCta.onClick();
+    },
     text: primaryCta.text,
     size: "small"
   })))));

package/dist/esm/components/callout/MrlCallout/MrlCallout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlCallout.js","sources":["../../../../../src/components/callout/MrlCallout/MrlCallout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MrlPopover, MrlPopoverProps } from '../../popover';\nimport { MrlText, MrlTextHeading } from '../../text';\nimport styles from './MrlCallout.module.scss';\nimport { MrlButton } from '../../button';\nimport { getUniqueId } from '../../../utils';\nimport { PORTAL_LAYERS } from '../../../utils/layers';\nimport { useRef } from 'react';\n\nexport type MrlCalloutPopoverProps = Omit<\n\tMrlPopoverProps,\n\t'children' \| 'actionState' \| 'isSubMenu' \| 'triggerRef' \| 'kind'\n>;\n\ninterface MrlCalloutCTA {\n\tonClick: () => void;\n\tdataQa?: string;\n\ttext: string;\n}\n\nexport type CalloutKind = 'primary' \| 'secondary';\n\nexport interface MrlCalloutProps extends MrlCalloutPopoverProps {\n\t/** a unique id that binds the callout content and the trigger for assistive technologies /\n\tariaControls?: string;\n\tautoFocus?: boolean;\n\tchildren: React.ReactElement;\n\tdisableClickOutside?: boolean;\n\tdescription?: string \| JSX.Element;\n\teyebrow?: string;\n\tid?: string;\n\timage?: JSX.Element;\n\tkind?: CalloutKind;\n\trenderWithPortal?: boolean;\n\tshow: boolean;\n\ttitle?: string;\n\tprimaryCta?: MrlCalloutCTA;\n\tsecondaryCta?: MrlCalloutCTA;\n}\n\ntype MrlCalloutContent = Pick<\n\tMrlCalloutProps,\n\t'alignment' \| 'description' \| 'eyebrow' \| 'image' \| 'kind' \| 'title'\n>;\n\n/\n MrlCallout component.\n \n @param props - The props.\n * @returns {React.ReactElement} The MrlCallout component.\n /\nexport const MrlCallout = (props: MrlCalloutProps): React.ReactElement => {\n\t// In some cases when `show` is false, the content is also null or empty.\n\t// At the same time callout shows fade-out animation and do not disappear immediately.\n\t// Saving last visible content to show it while animating on close.\n\tconst savedContent = useRef<MrlCalloutContent>();\n\tif (props.show) {\n\t\tsavedContent.current = {\n\t\t\talignment: props.alignment,\n\t\t\tdescription: props.description,\n\t\t\teyebrow: props.eyebrow,\n\t\t\timage: props.image,\n\t\t\tkind: props.kind,\n\t\t\ttitle: props.title\n\t\t};\n\t}\n\n\tconst {\n\t\tariaControls,\n\t\talignment = 'center',\n\t\tchildren,\n\t\tdescription,\n\t\tdisableClickOutside = true,\n\t\tdisableFocusTrap = true,\n\t\teyebrow,\n\t\thasCloseButton = true,\n\t\timage,\n\t\tkind = 'primary',\n\t\tonOpen,\n\t\tonClose,\n\t\tpoint = true,\n\t\tposition = 'bottom',\n\t\tprimaryCta,\n\t\tsecondaryCta,\n\t\tshow = true,\n\t\tspacing,\n\t\ttitle,\n\t\t...rest\n\t} = props.show ? props : { ...props, ...savedContent.current };\n\n\tif (React.isValidElement(children) && children.type === React.Fragment) {\n\t\tthrow new Error(\n\t\t\t'MrlCallout accepts a single child and does not accept a React.Fragment as a child.'\n\t\t);\n\t}\n\n\tconst calloutId = React.useMemo(() => getUniqueId('callout-append'), []);\n\tconst triggerRef = React.useRef<HTMLElement \| null>(null);\n\n\tconst childElement = React.useMemo(() => {\n\t\treturn React.Children.map(children, (child) => {\n\t\t\treturn React.cloneElement(child, {\n\t\t\t\t...child.props,\n\t\t\t\t/* if the callout is tied to an interactive element we need to ensure that it has role=\"button\" */\n\t\t\t\t...(child.type !== 'button' && { role: 'button' }),\n\t\t\t\t'aria-controls': ariaControls,\n\t\t\t\t'aria-expanded': show,\n\t\t\t\tid: calloutId\n\t\t\t});\n\t\t});\n\t}, [calloutId, children, show, ariaControls]);\n\n\t// Setting trigger ref to the element with the calloutId (set above in the childElement useMemo)\n\t//\n\t// We are using querySelector to set the triggerRef instead of assigning a ref directly in childElement because\n\t// a child element may already have a ref assigned to it and we don't want to override it.\n\tReact.useEffect(() => {\n\t\ttriggerRef.current = document.querySelector(`#${calloutId}`) as HTMLElement;\n\t}, [calloutId]);\n\n\tconst popoverKind = kind === 'primary' ? 'inverse' : 'primary';\n\tconst primaryCtaKind = kind === 'primary' ? 'inverse' : 'secondary';\n\tconst secondaryCtaKind = kind === 'primary' ? 'ghost-inverse' : 'ghost';\n\n\treturn (\n\t\t<>\n\t\t\t{childElement}\n\t\t\t{triggerRef && (\n\t\t\t\t<MrlPopover\n\t\t\t\t\tactionState={{ actionType: 'click', isOpen: show }}\n\t\t\t\t\talignment={alignment}\n\t\t\t\t\tclassName={styles['MrlCallout']}\n\t\t\t\t\tdisableClickToOpen\n\t\t\t\t\tdisableClickOutside={disableClickOutside}\n\t\t\t\t\tdisableFocusTrap={disableFocusTrap}\n\t\t\t\t\thasCloseButton={hasCloseButton}\n\t\t\t\t\tkind={popoverKind}\n\t\t\t\t\tonClose={onClose}\n\t\t\t\t\tonOpen={onOpen}\n\t\t\t\t\tpoint={point}\n\t\t\t\t\tportalProps={{\n\t\t\t\t\t\tid: PORTAL_LAYERS.CALLOUT.name,\n\t\t\t\t\t\tlayer: PORTAL_LAYERS.CALLOUT\n\t\t\t\t\t}}\n\t\t\t\t\tposition={position}\n\t\t\t\t\tspacing={spacing}\n\t\t\t\t\ttriggerRef={triggerRef}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<div className={styles['MrlCallout--content']}>\n\t\t\t\t\t\t{eyebrow && (\n\t\t\t\t\t\t\t<MrlText attrs={{ className: styles['MrlCallout--eyebrow'] }} text={eyebrow} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t<MrlTextHeading className={styles['MrlCallout--title']} level=\"2\" text={title} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t<div className={styles['MrlCallout--description']}>\n\t\t\t\t\t\t\t\t{typeof description === 'string' ? <MrlText text={description} /> : description}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{image && <div className={styles['MrlCallout--image']}>{image}</div>}\n\t\t\t\t\t\t{(primaryCta \|\| secondaryCta) && (\n\t\t\t\t\t\t\t<div className={styles['MrlCallout--footer']}>\n\t\t\t\t\t\t\t\t{secondaryCta && (\n\t\t\t\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\t\t\t\tdata-qa={secondaryCta.dataQa}\n\t\t\t\t\t\t\t\t\t\tkind={secondaryCtaKind}\n\t\t\t\t\t\t\t\t\t\tonClick={secondaryCta.onClick}\n\t\t\t\t\t\t\t\t\t\ttext={secondaryCta.text}\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{primaryCta && (\n\t\t\t\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\t\t\t\tdata-qa={primaryCta.dataQa}\n\t\t\t\t\t\t\t\t\t\tkind={primaryCtaKind}\n\t\t\t\t\t\t\t\t\t\tonClick={primaryCta.onClick}\n\t\t\t\t\t\t\t\t\t\ttext={primaryCta.text}\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</MrlPopover>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["MrlCallout","props","savedContent","useRef","show","current","alignment","description","eyebrow","image","kind","title","_ref","_objectSpread","ariaControls","_ref$alignment","children","_ref$disableClickOuts","disableClickOutside","_ref$disableFocusTrap","disableFocusTrap","_ref$hasCloseButton","hasCloseButton","_ref$kind","onOpen","onClose","_ref$point","point","_ref$position","position","primaryCta","secondaryCta","_ref$show","spacing","rest","_objectWithoutProperties","_excluded","React","isValidElement","type","Fragment","Error","calloutId","useMemo","getUniqueId","triggerRef","childElement","Children","map","child","cloneElement","role","id","useEffect","document","querySelector","concat","popoverKind","primaryCtaKind","secondaryCtaKind","createElement","MrlPopover","_extends","actionState","actionType","isOpen","className","styles","disableClickToOpen","portalProps","PORTAL_LAYERS","CALLOUT","name","layer","MrlText","attrs","text","MrlTextHeading","level","MrlButton","dataQa","onClick","size"],"mappings":"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"}
1	+ {"version":3,"file":"MrlCallout.js","sources":["../../../../../src/components/callout/MrlCallout/MrlCallout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MrlPopover, MrlPopoverProps } from '../../popover';\nimport { MrlText, MrlTextHeading } from '../../text';\nimport styles from './MrlCallout.module.scss';\nimport { MrlButton } from '../../button';\nimport { getUniqueId } from '../../../utils';\nimport { PORTAL_LAYERS } from '../../../utils/layers';\nimport { useRef } from 'react';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nexport type MrlCalloutPopoverProps = Omit<\n\tMrlPopoverProps,\n\t'children' \| 'actionState' \| 'isSubMenu' \| 'triggerRef' \| 'kind'\n>;\n\ninterface MrlCalloutCTA {\n\tonClick: () => void;\n\tdataQa?: string;\n\ttext: string;\n}\n\nexport type CalloutKind = 'primary' \| 'secondary';\n\nexport interface MrlCalloutProps extends MrlCalloutPopoverProps {\n\t/** a unique id that binds the callout content and the trigger for assistive technologies /\n\tariaControls?: string;\n\tautoFocus?: boolean;\n\tchildren: React.ReactElement;\n\tdisableClickOutside?: boolean;\n\tdescription?: string \| JSX.Element;\n\teyebrow?: string;\n\tid?: string;\n\timage?: JSX.Element;\n\tkind?: CalloutKind;\n\trenderWithPortal?: boolean;\n\tshow: boolean;\n\ttitle?: string;\n\tprimaryCta?: MrlCalloutCTA;\n\tsecondaryCta?: MrlCalloutCTA;\n\t/\n\t Enables interaction tracking for this callout. Provide a stable, non-PII id\n\t * (e.g. 'ai-onboarding-callout'). When omitted, the callout emits no analytics.\n\t \n\t Note: title, eyebrow and description text are never emitted.\n\t /\n\teventId?: string;\n}\n\ntype MrlCalloutContent = Pick<\n\tMrlCalloutProps,\n\t'alignment' \| 'description' \| 'eyebrow' \| 'image' \| 'kind' \| 'title'\n>;\n\n/\n MrlCallout component.\n \n @param props - The props.\n * @returns {React.ReactElement} The MrlCallout component.\n /\nexport const MrlCallout = (props: MrlCalloutProps): React.ReactElement => {\n\t// In some cases when `show` is false, the content is also null or empty.\n\t// At the same time callout shows fade-out animation and do not disappear immediately.\n\t// Saving last visible content to show it while animating on close.\n\tconst savedContent = useRef<MrlCalloutContent>();\n\tif (props.show) {\n\t\tsavedContent.current = {\n\t\t\talignment: props.alignment,\n\t\t\tdescription: props.description,\n\t\t\teyebrow: props.eyebrow,\n\t\t\timage: props.image,\n\t\t\tkind: props.kind,\n\t\t\ttitle: props.title\n\t\t};\n\t}\n\n\tconst {\n\t\tariaControls,\n\t\talignment = 'center',\n\t\tchildren,\n\t\tdescription,\n\t\tdisableClickOutside = true,\n\t\tdisableFocusTrap = true,\n\t\teyebrow,\n\t\thasCloseButton = true,\n\t\timage,\n\t\tkind = 'primary',\n\t\tonOpen,\n\t\tonClose,\n\t\tpoint = true,\n\t\tposition = 'bottom',\n\t\tprimaryCta,\n\t\tsecondaryCta,\n\t\tshow = true,\n\t\tspacing,\n\t\ttitle,\n\t\t// pulled out of `rest` so the nested MrlPopover doesn't emit a second, less\n\t\t// specific event for the same callout.\n\t\teventId,\n\t\t...rest\n\t} = props.show ? props : { ...props, ...savedContent.current };\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlCallout', eventId);\n\n\t// the callout's visibility is consumer-controlled through `show`, so open/close\n\t// is emitted from that rather than from the popover's internal state.\n\tconst wasShownRef = React.useRef(false);\n\n\tReact.useEffect(() => {\n\t\tif (wasShownRef.current === show) return;\n\n\t\twasShownRef.current = show;\n\n\t\ttrackInteraction({ action: show ? 'open' : 'close', variant: kind });\n\t}, [show, kind, trackInteraction]);\n\n\tif (React.isValidElement(children) && children.type === React.Fragment) {\n\t\tthrow new Error(\n\t\t\t'MrlCallout accepts a single child and does not accept a React.Fragment as a child.'\n\t\t);\n\t}\n\n\tconst calloutId = React.useMemo(() => getUniqueId('callout-append'), []);\n\tconst triggerRef = React.useRef<HTMLElement \| null>(null);\n\n\tconst childElement = React.useMemo(() => {\n\t\treturn React.Children.map(children, (child) => {\n\t\t\treturn React.cloneElement(child, {\n\t\t\t\t...child.props,\n\t\t\t\t/* if the callout is tied to an interactive element we need to ensure that it has role=\"button\" */\n\t\t\t\t...(child.type !== 'button' && { role: 'button' }),\n\t\t\t\t'aria-controls': ariaControls,\n\t\t\t\t'aria-expanded': show,\n\t\t\t\tid: calloutId\n\t\t\t});\n\t\t});\n\t}, [calloutId, children, show, ariaControls]);\n\n\t// Setting trigger ref to the element with the calloutId (set above in the childElement useMemo)\n\t//\n\t// We are using querySelector to set the triggerRef instead of assigning a ref directly in childElement because\n\t// a child element may already have a ref assigned to it and we don't want to override it.\n\tReact.useEffect(() => {\n\t\ttriggerRef.current = document.querySelector(`#${calloutId}`) as HTMLElement;\n\t}, [calloutId]);\n\n\tconst popoverKind = kind === 'primary' ? 'inverse' : 'primary';\n\tconst primaryCtaKind = kind === 'primary' ? 'inverse' : 'secondary';\n\tconst secondaryCtaKind = kind === 'primary' ? 'ghost-inverse' : 'ghost';\n\n\treturn (\n\t\t<>\n\t\t\t{childElement}\n\t\t\t{triggerRef && (\n\t\t\t\t<MrlPopover\n\t\t\t\t\tactionState={{ actionType: 'click', isOpen: show }}\n\t\t\t\t\talignment={alignment}\n\t\t\t\t\tclassName={styles['MrlCallout']}\n\t\t\t\t\tdisableClickToOpen\n\t\t\t\t\tdisableClickOutside={disableClickOutside}\n\t\t\t\t\tdisableFocusTrap={disableFocusTrap}\n\t\t\t\t\thasCloseButton={hasCloseButton}\n\t\t\t\t\tkind={popoverKind}\n\t\t\t\t\tonClose={onClose}\n\t\t\t\t\tonOpen={onOpen}\n\t\t\t\t\tpoint={point}\n\t\t\t\t\tportalProps={{\n\t\t\t\t\t\tid: PORTAL_LAYERS.CALLOUT.name,\n\t\t\t\t\t\tlayer: PORTAL_LAYERS.CALLOUT\n\t\t\t\t\t}}\n\t\t\t\t\tposition={position}\n\t\t\t\t\tspacing={spacing}\n\t\t\t\t\ttriggerRef={triggerRef}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<div className={styles['MrlCallout--content']}>\n\t\t\t\t\t\t{eyebrow && (\n\t\t\t\t\t\t\t<MrlText attrs={{ className: styles['MrlCallout--eyebrow'] }} text={eyebrow} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t<MrlTextHeading className={styles['MrlCallout--title']} level=\"2\" text={title} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t<div className={styles['MrlCallout--description']}>\n\t\t\t\t\t\t\t\t{typeof description === 'string' ? <MrlText text={description} /> : description}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{image && <div className={styles['MrlCallout--image']}>{image}</div>}\n\t\t\t\t\t\t{(primaryCta \|\| secondaryCta) && (\n\t\t\t\t\t\t\t<div className={styles['MrlCallout--footer']}>\n\t\t\t\t\t\t\t\t{secondaryCta && (\n\t\t\t\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\t\t\t\tdata-qa={secondaryCta.dataQa}\n\t\t\t\t\t\t\t\t\t\tkind={secondaryCtaKind}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\ttrackInteraction({\n\t\t\t\t\t\t\t\t\t\t\t\taction: 'click',\n\t\t\t\t\t\t\t\t\t\t\t\tmetadata: { cta: 'secondary' },\n\t\t\t\t\t\t\t\t\t\t\t\tvariant: kind\n\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\tsecondaryCta.onClick();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttext={secondaryCta.text}\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{primaryCta && (\n\t\t\t\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\t\t\t\tdata-qa={primaryCta.dataQa}\n\t\t\t\t\t\t\t\t\t\tkind={primaryCtaKind}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\ttrackInteraction({\n\t\t\t\t\t\t\t\t\t\t\t\taction: 'click',\n\t\t\t\t\t\t\t\t\t\t\t\tmetadata: { cta: 'primary' },\n\t\t\t\t\t\t\t\t\t\t\t\tvariant: kind\n\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\tprimaryCta.onClick();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttext={primaryCta.text}\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</MrlPopover>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["MrlCallout","props","savedContent","useRef","show","current","alignment","description","eyebrow","image","kind","title","_ref","_objectSpread","ariaControls","_ref$alignment","children","_ref$disableClickOuts","disableClickOutside","_ref$disableFocusTrap","disableFocusTrap","_ref$hasCloseButton","hasCloseButton","_ref$kind","onOpen","onClose","_ref$point","point","_ref$position","position","primaryCta","secondaryCta","_ref$show","spacing","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","wasShownRef","React","useEffect","action","variant","isValidElement","type","Fragment","Error","calloutId","useMemo","getUniqueId","triggerRef","childElement","Children","map","child","cloneElement","role","id","document","querySelector","concat","popoverKind","primaryCtaKind","secondaryCtaKind","createElement","MrlPopover","_extends","actionState","actionType","isOpen","className","styles","disableClickToOpen","portalProps","PORTAL_LAYERS","CALLOUT","name","layer","MrlText","attrs","text","MrlTextHeading","level","MrlButton","dataQa","onClick","metadata","cta","size"],"mappings":"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"}

package/dist/esm/components/filter/MrlFilter/MrlFilter.js CHANGED Viewed

@@ -2,10 +2,11 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlFilter.module.scss.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlFilterContextProvider } from '../MrlFilterContext/MrlFilterContext.js';
 import { MrlRovingTabindex } from '../../rovingTabindex/MrlRovingTabindex/MrlRovingTabindex.js';
-var _excluded = ["children", "className", "defaultCheckedValue", "onFilterChange", "orientation", "radioGroupLabel", "data-qa"];
+var _excluded = ["children", "className", "defaultCheckedValue", "onFilterChange", "orientation", "radioGroupLabel", "eventId", "data-qa"];
 /**
  * MrlFilter component.
  *
@@ -19,11 +20,26 @@ function MrlFilter(props) {
     onFilterChange = props.onFilterChange,
     orientation = props.orientation,
     radioGroupLabel = props.radioGroupLabel,
+    eventId = props.eventId,
     dataQa = props['data-qa'],
     rest = _objectWithoutProperties(props, _excluded);
+  var trackInteraction = useMrlTrackInteraction('MrlFilter', eventId);
+  /**
+   * Handles a change in the selected filter option.
+   *
+   * @param {string} checked - the newly selected value
+   */
+  var handleFilterChange = React.useCallback(checked => {
+    // the selected value is consumer data and is never emitted.
+    trackInteraction({
+      action: 'change'
+    });
+    onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(checked);
+  }, [onFilterChange, trackInteraction]);
   return /*#__PURE__*/React.createElement(MrlFilterContextProvider, {
     defaultCheckedValue: defaultCheckedValue,
-    onFilterChange: onFilterChange
+    onFilterChange: handleFilterChange
   }, /*#__PURE__*/React.createElement(MrlRovingTabindex, {
     orientation: orientation
   }, /*#__PURE__*/React.createElement("div", _extends({}, rest, {