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

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

@@ -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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"}
+{"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/cjs/components/callout/MrlCallout/MrlCallout.js

@@ -4,6 +4,7 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var React = require('react');
 var MrlCallout_module = require('./MrlCallout.module.scss.js');
 var index = require('../../../utils/layers/index.js');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
 var MrlPopover = require('../../popover/MrlPopover/MrlPopover.js');
 var MrlText = require('../../text/MrlText/MrlText.js');
@@ -30,7 +31,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-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.
  *
@@ -80,7 +81,21 @@ var MrlCallout = props => {
     show = _ref$show === void 0 ? true : _ref$show,
     spacing = _ref.spacing,
     title = _ref.title,
+    eventId = _ref.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlAnalytics.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__namespace.useRef(false);
+  React__namespace.useEffect(() => {
+    if (wasShownRef.current === show) return;
+    wasShownRef.current = show;
+    trackInteraction({
+      action: show ? 'open' : 'close',
+      variant: kind
+    });
+  }, [show, kind, trackInteraction]);
   if (/*#__PURE__*/React__namespace.isValidElement(children) && children.type === React__namespace.Fragment) {
     throw new Error('MrlCallout accepts a single child and does not accept a React.Fragment as a child.');
   }
@@ -152,13 +167,31 @@ var MrlCallout = props => {
   }, secondaryCta && /*#__PURE__*/React__namespace.createElement(MrlButton.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__namespace.createElement(MrlButton.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/cjs/components/callout/MrlCallout/MrlCallout.js.map

@@ -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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"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,UAAU,GAAIC,KAAsB,IAAyB;AACzE;AACA;AACA;AACA,EAAA,IAAMC,YAAY,GAAGC,YAAM,EAAqB;EAChD,IAAIF,KAAK,CAACG,IAAI,EAAE;IACfF,YAAY,CAACG,OAAO,GAAG;MACtBC,SAAS,EAAEL,KAAK,CAACK,SAAS;MAC1BC,WAAW,EAAEN,KAAK,CAACM,WAAW;MAC9BC,OAAO,EAAEP,KAAK,CAACO,OAAO;MACtBC,KAAK,EAAER,KAAK,CAACQ,KAAK;MAClBC,IAAI,EAAET,KAAK,CAACS,IAAI;MAChBC,KAAK,EAAEV,KAAK,CAACU;KACb;AACF,EAAA;AAEA,EAAA,IAAAC,IAAA,GAwBIX,KAAK,CAACG,IAAI,GAAGH,KAAK,GAAAY,uCAAA,CAAAA,uCAAA,CAAA,EAAA,EAAQZ,KAAK,GAAKC,YAAY,CAACG,OAAO,CAAE;IAvB7DS,YAAY,GAAAF,IAAA,CAAZE,YAAY;IAAAC,cAAA,GAAAH,IAAA,CACZN,SAAS;AAATA,IAAAA,SAAS,GAAAS,cAAA,KAAA,MAAA,GAAG,QAAQ,GAAAA,cAAA;IACpBC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRT,WAAW,GAAAK,IAAA,CAAXL,WAAW;IAAAU,qBAAA,GAAAL,IAAA,CACXM,mBAAmB;AAAnBA,IAAAA,mBAAmB,GAAAD,qBAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,qBAAA;IAAAE,qBAAA,GAAAP,IAAA,CAC1BQ,gBAAgB;AAAhBA,IAAAA,gBAAgB,GAAAD,qBAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,qBAAA;IACvBX,OAAO,GAAAI,IAAA,CAAPJ,OAAO;IAAAa,mBAAA,GAAAT,IAAA,CACPU,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,mBAAA;IACrBZ,KAAK,GAAAG,IAAA,CAALH,KAAK;IAAAc,SAAA,GAAAX,IAAA,CACLF,IAAI;AAAJA,IAAAA,IAAI,GAAAa,SAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,SAAA;IAChBC,MAAM,GAAAZ,IAAA,CAANY,MAAM;IACNC,OAAO,GAAAb,IAAA,CAAPa,OAAO;IAAAC,UAAA,GAAAd,IAAA,CACPe,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,UAAA;IAAAE,aAAA,GAAAhB,IAAA,CACZiB,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAA,MAAA,GAAG,QAAQ,GAAAA,aAAA;IACnBE,UAAU,GAAAlB,IAAA,CAAVkB,UAAU;IACVC,YAAY,GAAAnB,IAAA,CAAZmB,YAAY;IAAAC,SAAA,GAAApB,IAAA,CACZR,IAAI;AAAJA,IAAAA,IAAI,GAAA4B,SAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,SAAA;IACXC,OAAO,GAAArB,IAAA,CAAPqB,OAAO;IACPtB,KAAK,GAAAC,IAAA,CAALD,KAAK;IAGLuB,OAAO,GAAAtB,IAAA,CAAPsB,OAAO;AACJC,IAAAA,IAAI,GAAAC,iDAAA,CAAAxB,IAAA,EAAAyB,SAAA,CAAA;AAGR,EAAA,IAAMC,gBAAgB,GAAGC,sCAAsB,CAAC,YAAY,EAAEL,OAAO,CAAC;;AAEtE;AACA;AACA,EAAA,IAAMM,WAAW,GAAGC,gBAAK,CAACtC,MAAM,CAAC,KAAK,CAAC;EAEvCsC,gBAAK,CAACC,SAAS,CAAC,MAAM;AACrB,IAAA,IAAIF,WAAW,CAACnC,OAAO,KAAKD,IAAI,EAAE;IAElCoC,WAAW,CAACnC,OAAO,GAAGD,IAAI;AAE1BkC,IAAAA,gBAAgB,CAAC;AAAEK,MAAAA,MAAM,EAAEvC,IAAI,GAAG,MAAM,GAAG,OAAO;AAAEwC,MAAAA,OAAO,EAAElC;AAAK,KAAC,CAAC;EACrE,CAAC,EAAE,CAACN,IAAI,EAAEM,IAAI,EAAE4B,gBAAgB,CAAC,CAAC;AAElC,EAAA,iBAAIG,gBAAK,CAACI,cAAc,CAAC7B,QAAQ,CAAC,IAAIA,QAAQ,CAAC8B,IAAI,KAAKL,gBAAK,CAACM,QAAQ,EAAE;AACvE,IAAA,MAAM,IAAIC,KAAK,CACd,oFACD,CAAC;AACF,EAAA;AAEA,EAAA,IAAMC,SAAS,GAAGR,gBAAK,CAACS,OAAO,CAAC,MAAMC,yBAAW,CAAC,gBAAgB,CAAC,EAAE,EAAE,CAAC;AACxE,EAAA,IAAMC,UAAU,GAAGX,gBAAK,CAACtC,MAAM,CAAqB,IAAI,CAAC;AAEzD,EAAA,IAAMkD,YAAY,GAAGZ,gBAAK,CAACS,OAAO,CAAC,MAAM;IACxC,OAAOT,gBAAK,CAACa,QAAQ,CAACC,GAAG,CAACvC,QAAQ,EAAGwC,KAAK,IAAK;MAC9C,oBAAOf,gBAAK,CAACgB,YAAY,CAACD,KAAK,EAAA3C,uCAAA,CAAAA,uCAAA,CAAAA,uCAAA,CAAA,EAAA,EAC3B2C,KAAK,CAACvD,KAAK,CAAA,EAEVuD,KAAK,CAACV,IAAI,KAAK,QAAQ,IAAI;AAAEY,QAAAA,IAAI,EAAE;OAAU,CAAA,EAAA,EAAA,EAAA;AACjD,QAAA,eAAe,EAAE5C,YAAY;AAC7B,QAAA,eAAe,EAAEV,IAAI;AACrBuD,QAAAA,EAAE,EAAEV;AAAS,OAAA,CACb,CAAC;AACH,IAAA,CAAC,CAAC;EACH,CAAC,EAAE,CAACA,SAAS,EAAEjC,QAAQ,EAAEZ,IAAI,EAAEU,YAAY,CAAC,CAAC;;AAE7C;AACA;AACA;AACA;EACA2B,gBAAK,CAACC,SAAS,CAAC,MAAM;IACrBU,UAAU,CAAC/C,OAAO,GAAGuD,QAAQ,CAACC,aAAa,CAAA,GAAA,CAAAC,MAAA,CAAKb,SAAS,CAAE,CAAgB;AAC5E,EAAA,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,IAAMc,WAAW,GAAGrD,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS;EAC9D,IAAMsD,cAAc,GAAGtD,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG,WAAW;EACnE,IAAMuD,gBAAgB,GAAGvD,IAAI,KAAK,SAAS,GAAG,eAAe,GAAG,OAAO;AAEvE,EAAA,oBACC+B,gBAAA,CAAAyB,aAAA,CAAAzB,gBAAA,CAAAM,QAAA,EAAA,IAAA,EACEM,YAAY,EACZD,UAAU,iBACVX,gBAAA,CAAAyB,aAAA,CAACC,qBAAU,EAAAC,iCAAA,CAAA;AACVC,IAAAA,WAAW,EAAE;AAAEC,MAAAA,UAAU,EAAE,OAAO;AAAEC,MAAAA,MAAM,EAAEnE;KAAO;AACnDE,IAAAA,SAAS,EAAEA,SAAU;AACrBkE,IAAAA,SAAS,EAAEC,yBAAM,CAAC,YAAY,CAAE;IAChCC,kBAAkB,EAAA,IAAA;AAClBxD,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCE,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCE,IAAAA,cAAc,EAAEA,cAAe;AAC/BZ,IAAAA,IAAI,EAAEqD,WAAY;AAClBtC,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,MAAM,EAAEA,MAAO;AACfG,IAAAA,KAAK,EAAEA,KAAM;AACbgD,IAAAA,WAAW,EAAE;AACZhB,MAAAA,EAAE,EAAEiB,mBAAa,CAACC,OAAO,CAACC,IAAI;MAC9BC,KAAK,EAAEH,mBAAa,CAACC;KACpB;AACFhD,IAAAA,QAAQ,EAAEA,QAAS;AACnBI,IAAAA,OAAO,EAAEA,OAAQ;AACjBmB,IAAAA,UAAU,EAAEA;AAAW,GAAA,EACnBjB,IAAI,CAAA,eAERM,gBAAA,CAAAyB,aAAA,CAAA,KAAA,EAAA;IAAKM,SAAS,EAAEC,yBAAM,CAAC,qBAAqB;AAAE,GAAA,EAC5CjE,OAAO,iBACPiC,gBAAA,CAAAyB,aAAA,CAACc,eAAO,EAAA;AAACC,IAAAA,KAAK,EAAE;MAAET,SAAS,EAAEC,yBAAM,CAAC,qBAAqB;KAAI;AAACS,IAAAA,IAAI,EAAE1E;GAAU,CAC9E,EACAG,KAAK,iBACL8B,gBAAA,CAAAyB,aAAA,CAACiB,6BAAc,EAAA;AAACX,IAAAA,SAAS,EAAEC,yBAAM,CAAC,mBAAmB,CAAE;AAACW,IAAAA,KAAK,EAAC,GAAG;AAACF,IAAAA,IAAI,EAAEvE;AAAM,GAAE,CAChF,EACAJ,WAAW,iBACXkC,gBAAA,CAAAyB,aAAA,CAAA,KAAA,EAAA;IAAKM,SAAS,EAAEC,yBAAM,CAAC,yBAAyB;GAAE,EAChD,OAAOlE,WAAW,KAAK,QAAQ,gBAAGkC,gBAAA,CAAAyB,aAAA,CAACc,eAAO,EAAA;AAACE,IAAAA,IAAI,EAAE3E;GAAc,CAAC,GAAGA,WAChE,CACL,EACAE,KAAK,iBAAIgC,gBAAA,CAAAyB,aAAA,CAAA,KAAA,EAAA;IAAKM,SAAS,EAAEC,yBAAM,CAAC,mBAAmB;GAAE,EAAEhE,KAAW,CAAC,EACnE,CAACqB,UAAU,IAAIC,YAAY,kBAC3BU,gBAAA,CAAAyB,aAAA,CAAA,KAAA,EAAA;IAAKM,SAAS,EAAEC,yBAAM,CAAC,oBAAoB;AAAE,GAAA,EAC3C1C,YAAY,iBACZU,gBAAA,CAAAyB,aAAA,CAACmB,mBAAS,EAAA;IACT,SAAA,EAAStD,YAAY,CAACuD,MAAO;AAC7B5E,IAAAA,IAAI,EAAEuD,gBAAiB;IACvBsB,OAAO,EAAEA,MAAM;AACdjD,MAAAA,gBAAgB,CAAC;AAChBK,QAAAA,MAAM,EAAE,OAAO;AACf6C,QAAAA,QAAQ,EAAE;AAAEC,UAAAA,GAAG,EAAE;SAAa;AAC9B7C,QAAAA,OAAO,EAAElC;AACV,OAAC,CAAC;MAEFqB,YAAY,CAACwD,OAAO,EAAE;IACvB,CAAE;IACFL,IAAI,EAAEnD,YAAY,CAACmD,IAAK;AACxBQ,IAAAA,IAAI,EAAC;GACL,CACD,EACA5D,UAAU,iBACVW,gBAAA,CAAAyB,aAAA,CAACmB,mBAAS,EAAA;IACT,SAAA,EAASvD,UAAU,CAACwD,MAAO;AAC3B5E,IAAAA,IAAI,EAAEsD,cAAe;IACrBuB,OAAO,EAAEA,MAAM;AACdjD,MAAAA,gBAAgB,CAAC;AAChBK,QAAAA,MAAM,EAAE,OAAO;AACf6C,QAAAA,QAAQ,EAAE;AAAEC,UAAAA,GAAG,EAAE;SAAW;AAC5B7C,QAAAA,OAAO,EAAElC;AACV,OAAC,CAAC;MAEFoB,UAAU,CAACyD,OAAO,EAAE;IACrB,CAAE;IACFL,IAAI,EAAEpD,UAAU,CAACoD,IAAK;AACtBQ,IAAAA,IAAI,EAAC;AAAO,GACZ,CAEE,CAEF,CACM,CAEZ,CAAC;AAEL;;;;"}

package/dist/cjs/components/filter/MrlFilter/MrlFilter.js

@@ -4,6 +4,7 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var React = require('react');
 var classnames = require('classnames');
 var MrlFilter_module = require('./MrlFilter.module.scss.js');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlFilterContext = require('../MrlFilterContext/MrlFilterContext.js');
 var MrlRovingTabindex = require('../../rovingTabindex/MrlRovingTabindex/MrlRovingTabindex.js');
 
@@ -30,7 +31,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["children", "className", "defaultCheckedValue", "onFilterChange", "orientation", "radioGroupLabel", "data-qa"];
+var _excluded = ["children", "className", "defaultCheckedValue", "onFilterChange", "orientation", "radioGroupLabel", "eventId", "data-qa"];
 /**
  * MrlFilter component.
  *
@@ -44,11 +45,26 @@ function MrlFilter(props) {
     onFilterChange = props.onFilterChange,
     orientation = props.orientation,
     radioGroupLabel = props.radioGroupLabel,
+    eventId = props.eventId,
     dataQa = props['data-qa'],
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlFilter', eventId);
+
+  /**
+   * Handles a change in the selected filter option.
+   *
+   * @param {string} checked - the newly selected value
+   */
+  var handleFilterChange = React__namespace.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__namespace.createElement(MrlFilterContext.MrlFilterContextProvider, {
     defaultCheckedValue: defaultCheckedValue,
-    onFilterChange: onFilterChange
+    onFilterChange: handleFilterChange
   }, /*#__PURE__*/React__namespace.createElement(MrlRovingTabindex.MrlRovingTabindex, {
     orientation: orientation
   }, /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {

package/dist/cjs/components/filter/MrlFilter/MrlFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlFilter.js","sources":["../../../../../src/components/filter/MrlFilter/MrlFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MrlFilterContextProvider } from '../MrlFilterContext';\nimport classnames from 'classnames';\nimport styles from './MrlFilter.module.scss';\nimport { MrlRovingTabindex, RovingPropTypes } from '../../rovingTabindex';\nimport { DataQa } from '../../../utils/dataQa';\n\nexport type MrlFilterProps = {\n\t/**\n\t * The label for the radio group.\n\t */\n\tradioGroupLabel: string;\n\t/**\n\t * The children elements to be rendered within the MrlFilter component.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Callback function that is called when the filter value changes.\n\t */\n\tonFilterChange?: (checked: string) => void;\n\t/**\n\t * The default checked value for the filter. It will match the value of the MrlFilterItem.\n\t */\n\tdefaultCheckedValue?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultChecked' | 'defaultValue'> &\n\tRequired<Pick<RovingPropTypes, 'orientation'>> &\n\tDataQa;\n\n/**\n * MrlFilter component.\n *\n * @param props - The component props.\n * @returns The MrlFilter component.\n */\nexport function MrlFilter(props: MrlFilterProps): React.ReactElement {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdefaultCheckedValue,\n\t\tonFilterChange,\n\t\torientation,\n\t\tradioGroupLabel,\n\t\t['data-qa']: dataQa,\n\t\t...rest\n\t} = props;\n\n\treturn (\n\t\t<MrlFilterContextProvider\n\t\t\tdefaultCheckedValue={defaultCheckedValue}\n\t\t\tonFilterChange={onFilterChange}\n\t\t>\n\t\t\t<MrlRovingTabindex orientation={orientation}>\n\t\t\t\t<div\n\t\t\t\t\t{...rest}\n\t\t\t\t\tdata-qa={dataQa}\n\t\t\t\t\taria-label={radioGroupLabel}\n\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\tclassName={classnames(styles['MrlFilter'], 'MrlFilter', className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</MrlRovingTabindex>\n\t\t</MrlFilterContextProvider>\n\t);\n}\n"],"names":["MrlFilter","props","children","className","defaultCheckedValue","onFilterChange","orientation","radioGroupLabel","dataQa","rest","_objectWithoutProperties","_excluded","React","createElement","MrlFilterContextProvider","MrlRovingTabindex","_extends","role","classnames","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,SAASA,CAACC,KAAqB,EAAsB;AACpE,EAAA,IACCC,QAAQ,GAQLD,KAAK,CARRC,QAAQ;IACRC,SAAS,GAONF,KAAK,CAPRE,SAAS;IACTC,mBAAmB,GAMhBH,KAAK,CANRG,mBAAmB;IACnBC,cAAc,GAKXJ,KAAK,CALRI,cAAc;IACdC,WAAW,GAIRL,KAAK,CAJRK,WAAW;IACXC,eAAe,GAGZN,KAAK,CAHRM,eAAe;IACFC,MAAM,GAEhBP,KAAK,CAFP,SAAS,CAAA;AACPQ,IAAAA,IAAI,GAAAC,iDAAA,CACJT,KAAK,EAAAU,SAAA,CAAA;AAET,EAAA,oBACCC,gBAAA,CAAAC,aAAA,CAACC,yCAAwB,EAAA;AACxBV,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,cAAc,EAAEA;AAAe,GAAA,eAE/BO,gBAAA,CAAAC,aAAA,CAACE,mCAAiB,EAAA;AAACT,IAAAA,WAAW,EAAEA;AAAY,GAAA,eAC3CM,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAG,iCAAA,KACKP,IAAI,EAAA;AACR,IAAA,SAAA,EAASD,MAAO;AAChB,IAAA,YAAA,EAAYD,eAAgB;AAC5BU,IAAAA,IAAI,EAAC,YAAY;IACjBd,SAAS,EAAEe,2BAAU,CAACC,wBAAM,CAAC,WAAW,CAAC,EAAE,WAAW,EAAEhB,SAAS;GAAE,CAAA,EAElED,QACG,CACa,CACM,CAAC;AAE7B;;;;"}
+{"version":3,"file":"MrlFilter.js","sources":["../../../../../src/components/filter/MrlFilter/MrlFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MrlFilterContextProvider } from '../MrlFilterContext';\nimport classnames from 'classnames';\nimport styles from './MrlFilter.module.scss';\nimport { MrlRovingTabindex, RovingPropTypes } from '../../rovingTabindex';\nimport { DataQa } from '../../../utils/dataQa';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nexport type MrlFilterProps = {\n\t/**\n\t * The label for the radio group.\n\t */\n\tradioGroupLabel: string;\n\t/**\n\t * The children elements to be rendered within the MrlFilter component.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Callback function that is called when the filter value changes.\n\t */\n\tonFilterChange?: (checked: string) => void;\n\t/**\n\t * The default checked value for the filter. It will match the value of the MrlFilterItem.\n\t */\n\tdefaultCheckedValue?: string;\n\t/**\n\t * Enables interaction tracking for this filter group. Provide a stable, non-PII id\n\t * (e.g. 'templates-filter'). When omitted, the filter emits no analytics.\n\t *\n\t * Note: the selected value is never emitted.\n\t */\n\teventId?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultChecked' | 'defaultValue'> &\n\tRequired<Pick<RovingPropTypes, 'orientation'>> &\n\tDataQa;\n\n/**\n * MrlFilter component.\n *\n * @param props - The component props.\n * @returns The MrlFilter component.\n */\nexport function MrlFilter(props: MrlFilterProps): React.ReactElement {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdefaultCheckedValue,\n\t\tonFilterChange,\n\t\torientation,\n\t\tradioGroupLabel,\n\t\teventId,\n\t\t['data-qa']: dataQa,\n\t\t...rest\n\t} = props;\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlFilter', eventId);\n\n\t/**\n\t * Handles a change in the selected filter option.\n\t *\n\t * @param {string} checked - the newly selected value\n\t */\n\tconst handleFilterChange = React.useCallback(\n\t\t(checked: string) => {\n\t\t\t// the selected value is consumer data and is never emitted.\n\t\t\ttrackInteraction({ action: 'change' });\n\n\t\t\tonFilterChange?.(checked);\n\t\t},\n\t\t[onFilterChange, trackInteraction]\n\t);\n\n\treturn (\n\t\t<MrlFilterContextProvider\n\t\t\tdefaultCheckedValue={defaultCheckedValue}\n\t\t\tonFilterChange={handleFilterChange}\n\t\t>\n\t\t\t<MrlRovingTabindex orientation={orientation}>\n\t\t\t\t<div\n\t\t\t\t\t{...rest}\n\t\t\t\t\tdata-qa={dataQa}\n\t\t\t\t\taria-label={radioGroupLabel}\n\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\tclassName={classnames(styles['MrlFilter'], 'MrlFilter', className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</MrlRovingTabindex>\n\t\t</MrlFilterContextProvider>\n\t);\n}\n"],"names":["MrlFilter","props","children","className","defaultCheckedValue","onFilterChange","orientation","radioGroupLabel","eventId","dataQa","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","handleFilterChange","React","useCallback","checked","action","createElement","MrlFilterContextProvider","MrlRovingTabindex","_extends","role","classnames","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,SAASA,CAACC,KAAqB,EAAsB;AACpE,EAAA,IACCC,QAAQ,GASLD,KAAK,CATRC,QAAQ;IACRC,SAAS,GAQNF,KAAK,CARRE,SAAS;IACTC,mBAAmB,GAOhBH,KAAK,CAPRG,mBAAmB;IACnBC,cAAc,GAMXJ,KAAK,CANRI,cAAc;IACdC,WAAW,GAKRL,KAAK,CALRK,WAAW;IACXC,eAAe,GAIZN,KAAK,CAJRM,eAAe;IACfC,OAAO,GAGJP,KAAK,CAHRO,OAAO;IACMC,MAAM,GAEhBR,KAAK,CAFP,SAAS,CAAA;AACPS,IAAAA,IAAI,GAAAC,iDAAA,CACJV,KAAK,EAAAW,SAAA,CAAA;AAET,EAAA,IAAMC,gBAAgB,GAAGC,sCAAsB,CAAC,WAAW,EAAEN,OAAO,CAAC;;AAErE;AACD;AACA;AACA;AACA;AACC,EAAA,IAAMO,kBAAkB,GAAGC,gBAAK,CAACC,WAAW,CAC1CC,OAAe,IAAK;AACpB;AACAL,IAAAA,gBAAgB,CAAC;AAAEM,MAAAA,MAAM,EAAE;AAAS,KAAC,CAAC;AAEtCd,IAAAA,cAAc,aAAdA,cAAc,KAAA,MAAA,GAAA,MAAA,GAAdA,cAAc,CAAGa,OAAO,CAAC;AAC1B,EAAA,CAAC,EACD,CAACb,cAAc,EAAEQ,gBAAgB,CAClC,CAAC;AAED,EAAA,oBACCG,gBAAA,CAAAI,aAAA,CAACC,yCAAwB,EAAA;AACxBjB,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,cAAc,EAAEU;AAAmB,GAAA,eAEnCC,gBAAA,CAAAI,aAAA,CAACE,mCAAiB,EAAA;AAAChB,IAAAA,WAAW,EAAEA;AAAY,GAAA,eAC3CU,gBAAA,CAAAI,aAAA,CAAA,KAAA,EAAAG,iCAAA,KACKb,IAAI,EAAA;AACR,IAAA,SAAA,EAASD,MAAO;AAChB,IAAA,YAAA,EAAYF,eAAgB;AAC5BiB,IAAAA,IAAI,EAAC,YAAY;IACjBrB,SAAS,EAAEsB,2BAAU,CAACC,wBAAM,CAAC,WAAW,CAAC,EAAE,WAAW,EAAEvB,SAAS;GAAE,CAAA,EAElED,QACG,CACa,CACM,CAAC;AAE7B;;;;"}

package/dist/cjs/components/filter/MrlFilterItem/MrlFilterItem.js

@@ -5,6 +5,7 @@ var React = require('react');
 var classnames = require('classnames');
 var MrlFilterItem_module = require('./MrlFilterItem.module.scss.js');
 var MrlFilterContext = require('../MrlFilterContext/MrlFilterContext.js');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
 var MrlBadge = require('../../badge/MrlBadge/MrlBadge.js');
 
@@ -31,7 +32,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["data-qa", "id", "children", "className", "value", "count"];
+var _excluded = ["data-qa", "id", "children", "className", "value", "count", "eventId"];
 /**
  * MrlFilterItem component.
  *
@@ -45,11 +46,20 @@ function MrlFilterItem(props) {
     className = props.className,
     value = props.value,
     count = props.count,
+    eventId = props.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
   var _useMrlFilterContext = MrlFilterContext.useMrlFilterContext(),
     state = _useMrlFilterContext.state,
     dispatch = _useMrlFilterContext.dispatch;
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlFilterItem', eventId);
   function handleFilterChange() {
+    // click also focuses the item, so only an actual change in selection is emitted.
+    // the option's value is consumer data and is never emitted.
+    if (state.checked !== value) {
+      trackInteraction({
+        action: 'select'
+      });
+    }
     dispatch({
       payload: value,
       type: 'SET_CHECKED'

package/dist/cjs/components/filter/MrlFilterItem/MrlFilterItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlFilterItem.js","sources":["../../../../../src/components/filter/MrlFilterItem/MrlFilterItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlFilterItem.module.scss';\nimport { DataQa } from '../../../utils/dataQa';\nimport { getUniqueId } from '../../../utils';\nimport { useMrlFilterContext } from '../MrlFilterContext';\nimport { MrlBadge } from '../../badge';\n\nexport type MrlFilterItemProps = {\n\t/**\n\t * The filter item's value.\n\t */\n\tvalue: string;\n\t/**\n\t * The content to be displayed within the filter item.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * The count of items for this filter option.\n\t */\n\tcount?: number;\n} & React.ComponentPropsWithoutRef<'span'> &\n\tDataQa;\n\n/**\n * MrlFilterItem component.\n *\n * @param props - The component props.\n * @returns The MrlFilterItem component.\n */\nexport function MrlFilterItem(props: MrlFilterItemProps): React.ReactElement {\n\tconst { ['data-qa']: dataQa, id, children, className, value, count, ...rest } = props;\n\n\tconst { state, dispatch } = useMrlFilterContext();\n\n\tfunction handleFilterChange() {\n\t\tdispatch({\n\t\t\tpayload: value,\n\t\t\ttype: 'SET_CHECKED'\n\t\t});\n\t}\n\n\tconst filterItemIdRef = React.useRef<string>(id || getUniqueId('mrl-filter-item'));\n\tconst isChecked = state.checked === value;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus, jsx-a11y/click-events-have-key-events\n\t\t<span\n\t\t\t{...rest}\n\t\t\tdata-qa={dataQa}\n\t\t\tdata-roving=\"true\"\n\t\t\tonClick={handleFilterChange}\n\t\t\tonFocus={handleFilterChange}\n\t\t\taria-checked={isChecked}\n\t\t\trole=\"radio\"\n\t\t\tid={filterItemIdRef.current}\n\t\t\tclassName={classnames(\n\t\t\t\tstyles['MrlFilterItem'],\n\t\t\t\t'MrlFilterItem',\n\t\t\t\t{\n\t\t\t\t\t[styles['MrlFilterItem-has-count']]: typeof count !== 'undefined'\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t\t{typeof count !== 'undefined' && (\n\t\t\t\t<MrlBadge text={String(count)} aria-label={`, ${count} items`} />\n\t\t\t)}\n\t\t</span>\n\t);\n}\n"],"names":["MrlFilterItem","props","dataQa","id","children","className","value","count","rest","_objectWithoutProperties","_excluded","_useMrlFilterContext","useMrlFilterContext","state","dispatch","handleFilterChange","payload","type","filterItemIdRef","React","useRef","getUniqueId","isChecked","checked","createElement","_extends","onClick","onFocus","role","current","classnames","styles","MrlBadge","text","String","concat"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAaA,CAACC,KAAyB,EAAsB;AAC5E,EAAA,IAAqBC,MAAM,GAAqDD,KAAK,CAA5E,SAAS,CAAA;IAAWE,EAAE,GAAiDF,KAAK,CAAxDE,EAAE;IAAEC,QAAQ,GAAuCH,KAAK,CAApDG,QAAQ;IAAEC,SAAS,GAA4BJ,KAAK,CAA1CI,SAAS;IAAEC,KAAK,GAAqBL,KAAK,CAA/BK,KAAK;IAAEC,KAAK,GAAcN,KAAK,CAAxBM,KAAK;AAAKC,IAAAA,IAAI,GAAAC,iDAAA,CAAKR,KAAK,EAAAS,SAAA,CAAA;AAErF,EAAA,IAAAC,oBAAA,GAA4BC,oCAAmB,EAAE;IAAzCC,KAAK,GAAAF,oBAAA,CAALE,KAAK;IAAEC,QAAQ,GAAAH,oBAAA,CAARG,QAAQ;EAEvB,SAASC,kBAAkBA,GAAG;AAC7BD,IAAAA,QAAQ,CAAC;AACRE,MAAAA,OAAO,EAAEV,KAAK;AACdW,MAAAA,IAAI,EAAE;AACP,KAAC,CAAC;AACH,EAAA;AAEA,EAAA,IAAMC,eAAe,GAAGC,gBAAK,CAACC,MAAM,CAASjB,EAAE,IAAIkB,yBAAW,CAAC,iBAAiB,CAAC,CAAC;AAClF,EAAA,IAAMC,SAAS,GAAGT,KAAK,CAACU,OAAO,KAAKjB,KAAK;AAEzC,EAAA;AAAA;AACC;AACAa,IAAAA,gBAAA,CAAAK,aAAA,CAAA,MAAA,EAAAC,iCAAA,KACKjB,IAAI,EAAA;AACR,MAAA,SAAA,EAASN,MAAO;AAChB,MAAA,aAAA,EAAY,MAAM;AAClBwB,MAAAA,OAAO,EAAEX,kBAAmB;AAC5BY,MAAAA,OAAO,EAAEZ,kBAAmB;AAC5B,MAAA,cAAA,EAAcO,SAAU;AACxBM,MAAAA,IAAI,EAAC,OAAO;MACZzB,EAAE,EAAEe,eAAe,CAACW,OAAQ;MAC5BxB,SAAS,EAAEyB,2BAAU,CACpBC,4BAAM,CAAC,eAAe,CAAC,EACvB,eAAe,EACf;AACC,QAAA,CAACA,4BAAM,CAAC,yBAAyB,CAAC,GAAG,OAAOxB,KAAK,KAAK;AACvD,OAAC,EACDF,SACD;KAAE,CAAA,EAEDD,QAAQ,EACR,OAAOG,KAAK,KAAK,WAAW,iBAC5BY,gBAAA,CAAAK,aAAA,CAACQ,iBAAQ,EAAA;AAACC,MAAAA,IAAI,EAAEC,MAAM,CAAC3B,KAAK,CAAE;MAAC,YAAA,EAAA,IAAA,CAAA4B,MAAA,CAAiB5B,KAAK,EAAA,QAAA;AAAS,KAAE,CAE5D;AAAC;AAET;;;;"}
+{"version":3,"file":"MrlFilterItem.js","sources":["../../../../../src/components/filter/MrlFilterItem/MrlFilterItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlFilterItem.module.scss';\nimport { DataQa } from '../../../utils/dataQa';\nimport { getUniqueId } from '../../../utils';\nimport { useMrlFilterContext } from '../MrlFilterContext';\nimport { MrlBadge } from '../../badge';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nexport type MrlFilterItemProps = {\n\t/**\n\t * The filter item's value.\n\t */\n\tvalue: string;\n\t/**\n\t * The content to be displayed within the filter item.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * The count of items for this filter option.\n\t */\n\tcount?: number;\n\t/**\n\t * Enables interaction tracking for this filter option. Provide a stable, non-PII id\n\t * (e.g. 'templates-category-filter'). When omitted, the option emits no analytics.\n\t *\n\t * Note: the option's value and content are never emitted.\n\t */\n\teventId?: string;\n} & React.ComponentPropsWithoutRef<'span'> &\n\tDataQa;\n\n/**\n * MrlFilterItem component.\n *\n * @param props - The component props.\n * @returns The MrlFilterItem component.\n */\nexport function MrlFilterItem(props: MrlFilterItemProps): React.ReactElement {\n\tconst { ['data-qa']: dataQa, id, children, className, value, count, eventId, ...rest } = props;\n\n\tconst { state, dispatch } = useMrlFilterContext();\n\tconst trackInteraction = useMrlTrackInteraction('MrlFilterItem', eventId);\n\n\tfunction handleFilterChange() {\n\t\t// click also focuses the item, so only an actual change in selection is emitted.\n\t\t// the option's value is consumer data and is never emitted.\n\t\tif (state.checked !== value) {\n\t\t\ttrackInteraction({ action: 'select' });\n\t\t}\n\n\t\tdispatch({\n\t\t\tpayload: value,\n\t\t\ttype: 'SET_CHECKED'\n\t\t});\n\t}\n\n\tconst filterItemIdRef = React.useRef<string>(id || getUniqueId('mrl-filter-item'));\n\tconst isChecked = state.checked === value;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus, jsx-a11y/click-events-have-key-events\n\t\t<span\n\t\t\t{...rest}\n\t\t\tdata-qa={dataQa}\n\t\t\tdata-roving=\"true\"\n\t\t\tonClick={handleFilterChange}\n\t\t\tonFocus={handleFilterChange}\n\t\t\taria-checked={isChecked}\n\t\t\trole=\"radio\"\n\t\t\tid={filterItemIdRef.current}\n\t\t\tclassName={classnames(\n\t\t\t\tstyles['MrlFilterItem'],\n\t\t\t\t'MrlFilterItem',\n\t\t\t\t{\n\t\t\t\t\t[styles['MrlFilterItem-has-count']]: typeof count !== 'undefined'\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t\t{typeof count !== 'undefined' && (\n\t\t\t\t<MrlBadge text={String(count)} aria-label={`, ${count} items`} />\n\t\t\t)}\n\t\t</span>\n\t);\n}\n"],"names":["MrlFilterItem","props","dataQa","id","children","className","value","count","eventId","rest","_objectWithoutProperties","_excluded","_useMrlFilterContext","useMrlFilterContext","state","dispatch","trackInteraction","useMrlTrackInteraction","handleFilterChange","checked","action","payload","type","filterItemIdRef","React","useRef","getUniqueId","isChecked","createElement","_extends","onClick","onFocus","role","current","classnames","styles","MrlBadge","text","String","concat"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAaA,CAACC,KAAyB,EAAsB;AAC5E,EAAA,IAAqBC,MAAM,GAA8DD,KAAK,CAArF,SAAS,CAAA;IAAWE,EAAE,GAA0DF,KAAK,CAAjEE,EAAE;IAAEC,QAAQ,GAAgDH,KAAK,CAA7DG,QAAQ;IAAEC,SAAS,GAAqCJ,KAAK,CAAnDI,SAAS;IAAEC,KAAK,GAA8BL,KAAK,CAAxCK,KAAK;IAAEC,KAAK,GAAuBN,KAAK,CAAjCM,KAAK;IAAEC,OAAO,GAAcP,KAAK,CAA1BO,OAAO;AAAKC,IAAAA,IAAI,GAAAC,iDAAA,CAAKT,KAAK,EAAAU,SAAA,CAAA;AAE9F,EAAA,IAAAC,oBAAA,GAA4BC,oCAAmB,EAAE;IAAzCC,KAAK,GAAAF,oBAAA,CAALE,KAAK;IAAEC,QAAQ,GAAAH,oBAAA,CAARG,QAAQ;AACvB,EAAA,IAAMC,gBAAgB,GAAGC,sCAAsB,CAAC,eAAe,EAAET,OAAO,CAAC;EAEzE,SAASU,kBAAkBA,GAAG;AAC7B;AACA;AACA,IAAA,IAAIJ,KAAK,CAACK,OAAO,KAAKb,KAAK,EAAE;AAC5BU,MAAAA,gBAAgB,CAAC;AAAEI,QAAAA,MAAM,EAAE;AAAS,OAAC,CAAC;AACvC,IAAA;AAEAL,IAAAA,QAAQ,CAAC;AACRM,MAAAA,OAAO,EAAEf,KAAK;AACdgB,MAAAA,IAAI,EAAE;AACP,KAAC,CAAC;AACH,EAAA;AAEA,EAAA,IAAMC,eAAe,GAAGC,gBAAK,CAACC,MAAM,CAAStB,EAAE,IAAIuB,yBAAW,CAAC,iBAAiB,CAAC,CAAC;AAClF,EAAA,IAAMC,SAAS,GAAGb,KAAK,CAACK,OAAO,KAAKb,KAAK;AAEzC,EAAA;AAAA;AACC;AACAkB,IAAAA,gBAAA,CAAAI,aAAA,CAAA,MAAA,EAAAC,iCAAA,KACKpB,IAAI,EAAA;AACR,MAAA,SAAA,EAASP,MAAO;AAChB,MAAA,aAAA,EAAY,MAAM;AAClB4B,MAAAA,OAAO,EAAEZ,kBAAmB;AAC5Ba,MAAAA,OAAO,EAAEb,kBAAmB;AAC5B,MAAA,cAAA,EAAcS,SAAU;AACxBK,MAAAA,IAAI,EAAC,OAAO;MACZ7B,EAAE,EAAEoB,eAAe,CAACU,OAAQ;MAC5B5B,SAAS,EAAE6B,2BAAU,CACpBC,4BAAM,CAAC,eAAe,CAAC,EACvB,eAAe,EACf;AACC,QAAA,CAACA,4BAAM,CAAC,yBAAyB,CAAC,GAAG,OAAO5B,KAAK,KAAK;AACvD,OAAC,EACDF,SACD;KAAE,CAAA,EAEDD,QAAQ,EACR,OAAOG,KAAK,KAAK,WAAW,iBAC5BiB,gBAAA,CAAAI,aAAA,CAACQ,iBAAQ,EAAA;AAACC,MAAAA,IAAI,EAAEC,MAAM,CAAC/B,KAAK,CAAE;MAAC,YAAA,EAAA,IAAA,CAAAgC,MAAA,CAAiBhC,KAAK,EAAA,QAAA;AAAS,KAAE,CAE5D;AAAC;AAET;;;;"}

package/dist/cjs/components/form/checkbox/MrlCheckbox/MrlCheckbox.js

@@ -8,6 +8,7 @@ var MrlCheckboxStandalone = require('../MrlCheckboxStandalone/MrlCheckboxStandal
 var index = require('../../../../utils/checkInvalidAttributes/index.js');
 var MrlCheckbox_module = require('./MrlCheckbox.module.scss.js');
 var utils = require('../../utils.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
 var MrlLabelWithDescription = require('../../label/MrlLabelWithDescription/MrlLabelWithDescription.js');
 
@@ -34,7 +35,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["attrs", "className", "description", "hasMultilineLabel", "state", "selected", "icon", "label"];
+var _excluded = ["attrs", "className", "description", "hasMultilineLabel", "state", "selected", "icon", "label", "eventId"];
 /**
  * Form element with an associated text label that allows the user to select one or more options
  * from a provided list
@@ -54,7 +55,9 @@ function MrlCheckbox(_ref) {
     selected = _ref$selected === void 0 ? constants.checkboxDefaults.selected : _ref$selected,
     icon = _ref.icon,
     label = _ref.label,
+    eventId = _ref.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlCheckbox', eventId);
   var checkboxIdRef = React__namespace.useRef(setAttributes.getUniqueId('mrl-checkbox'));
   var descriptionId = "".concat(checkboxIdRef.current, "-description");
   var allClasses = classnames__default.default(attrs.class || attrs.className, className, 'MrlCheckbox', MrlCheckbox_module.default['MrlCheckbox'], {
@@ -72,6 +75,19 @@ function MrlCheckbox(_ref) {
 
   // setAttributes always sets className="" which always triggers the warning message in the MrlCheckboxStandalone component
   delete attributes.className;
+
+  // the consumer's handler arrives through `attrs`, so wrap it before handing the
+  // attributes down to the standalone input.
+  var consumerOnChange = attributes.onChange;
+  attributes.onChange = e => {
+    trackInteraction({
+      action: 'change',
+      metadata: {
+        selected: e.target.checked
+      }
+    });
+    consumerOnChange === null || consumerOnChange === void 0 ? void 0 : consumerOnChange(e);
+  };
   return /*#__PURE__*/React__namespace.createElement("div", {
     className: allClasses
   }, /*#__PURE__*/React__namespace.createElement(MrlCheckboxStandalone.MrlCheckboxStandalone, _rollupPluginBabelHelpers.extends({}, rest, {

package/dist/cjs/components/form/checkbox/MrlCheckbox/MrlCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlCheckbox.js","sources":["../../../../../../src/components/form/checkbox/MrlCheckbox/MrlCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, getUniqueId, setAttributes } from '../../../../utils';\nimport {\n\tcheckboxDefaults,\n\tCheckboxSelected,\n\tCheckboxStates,\n\tStaticIconConfig\n} from '../../constants';\nimport { MrlCheckboxStandalone } from '../MrlCheckboxStandalone/MrlCheckboxStandalone';\nimport { checkInvalidAttributes } from '../../../../utils/checkInvalidAttributes';\n\nimport './MrlCheckbox.global.scss';\nimport styles from './MrlCheckbox.module.scss';\nimport { MrlLabelWithDescription } from '../../label/MrlLabelWithDescription';\nimport { getDescribedby } from '../../utils';\n\ninterface MrlCheckboxProps {\n\t/** Applies additional HTML attributes to the checkbox element */\n\tattrs?: AttrsObject;\n\t/** Additional class to add to the container of the checkbox and label */\n\tclassName?: string;\n\t/** Adjusts the styles of the label, icon and description when the label is multiline */\n\thasMultilineLabel?: boolean;\n\t/** The current state of the checkbox input based on user interactions or permissions */\n\tstate?: CheckboxStates;\n\t/** Sets what selection state the checkbox is in. */\n\tselected?: CheckboxSelected;\n\t/** The text to display as the checkbox's label */\n\tlabel: string;\n\t/** Leading label icon */\n\ticon?: StaticIconConfig;\n\t/**\n\t * Description, additional context text for the user.\n\t * It can be a string or a React component for custom render.\n\t * When using a React component it's necessary to add an id to the custom element and\n\t * pass it to the MrlCheckbox through 'attrs[\"aria-describedby\"]' to make it accessible\n\t * to screen readers.\n\t * Custom description should also implement the disabled state styles\n\t * for text when the input is disabled or set color: inherit.\n\t * @example\n\t * <MrlCheckbox attrs={{ 'aria-describedby': customId }} description={\n\t *   <p id={customId}>description</p>\n\t * }>\n\t */\n\tdescription?: string | React.ReactNode;\n}\n\n/**\n * Form element with an associated text label that allows the user to select one or more options\n * from a provided list\n * @param {MrlCheckboxProps} props - the component props\n * @returns a checkbox element with an associated label\n */\nexport function MrlCheckbox({\n\tattrs = {},\n\tclassName,\n\tdescription,\n\thasMultilineLabel = false,\n\tstate = checkboxDefaults.state,\n\tselected = checkboxDefaults.selected,\n\ticon,\n\tlabel,\n\t...rest\n}: MrlCheckboxProps): JSX.Element {\n\tconst checkboxIdRef = React.useRef<string>(getUniqueId('mrl-checkbox'));\n\tconst descriptionId = `${checkboxIdRef.current}-description`;\n\n\tconst allClasses = classnames(\n\t\tattrs.class || attrs.className,\n\t\tclassName,\n\t\t'MrlCheckbox',\n\t\tstyles['MrlCheckbox'],\n\t\t{\n\t\t\t[styles['mrl-is--disabled']]: state === 'disabled',\n\t\t\t[styles['mrl-is--invalid']]: state === 'error',\n\t\t\t[styles['mrl-is--selected']]: selected === 'checked',\n\t\t\t[styles['mrl-is--indeterminate']]: selected === 'indeterminate'\n\t\t}\n\t);\n\n\tcheckInvalidAttributes(attrs);\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs, {\n\t\t...getDescribedby(\n\t\t\tattrs['aria-describedby'],\n\t\t\ttypeof description === 'string' ? descriptionId : undefined\n\t\t),\n\t\tid: checkboxIdRef.current\n\t});\n\n\t// setAttributes always sets className=\"\" which always triggers the warning message in the MrlCheckboxStandalone component\n\tdelete attributes.className;\n\n\treturn (\n\t\t<div className={allClasses}>\n\t\t\t<MrlCheckboxStandalone {...rest} selected={selected} state={state} attrs={attributes} />\n\t\t\t<MrlLabelWithDescription\n\t\t\t\tisDisabled={state === 'disabled'}\n\t\t\t\tisSelected={selected === 'checked'}\n\t\t\t\tisIndeterminate={selected === 'indeterminate'}\n\t\t\t\thasMultilineLabel={hasMultilineLabel}\n\t\t\t\thtmlFor={checkboxIdRef.current}\n\t\t\t\ticon={icon}\n\t\t\t\tlabel={label}\n\t\t\t\tdescription={description}\n\t\t\t\tdescriptionId={descriptionId}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"names":["MrlCheckbox","_ref","_ref$attrs","attrs","className","description","_ref$hasMultilineLabe","hasMultilineLabel","_ref$state","state","checkboxDefaults","_ref$selected","selected","icon","label","rest","_objectWithoutProperties","_excluded","checkboxIdRef","React","useRef","getUniqueId","descriptionId","concat","current","allClasses","classnames","class","styles","checkInvalidAttributes","attributes","setAttributes","_objectSpread","getDescribedby","undefined","id","createElement","MrlCheckboxStandalone","_extends","MrlLabelWithDescription","isDisabled","isSelected","isIndeterminate","htmlFor"],"mappings":"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"}
+{"version":3,"file":"MrlCheckbox.js","sources":["../../../../../../src/components/form/checkbox/MrlCheckbox/MrlCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, getUniqueId, setAttributes } from '../../../../utils';\nimport {\n\tcheckboxDefaults,\n\tCheckboxSelected,\n\tCheckboxStates,\n\tStaticIconConfig\n} from '../../constants';\nimport { MrlCheckboxStandalone } from '../MrlCheckboxStandalone/MrlCheckboxStandalone';\nimport { checkInvalidAttributes } from '../../../../utils/checkInvalidAttributes';\n\nimport './MrlCheckbox.global.scss';\nimport styles from './MrlCheckbox.module.scss';\nimport { MrlLabelWithDescription } from '../../label/MrlLabelWithDescription';\nimport { getDescribedby } from '../../utils';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\ninterface MrlCheckboxProps {\n\t/** Applies additional HTML attributes to the checkbox element */\n\tattrs?: AttrsObject;\n\t/** Additional class to add to the container of the checkbox and label */\n\tclassName?: string;\n\t/** Adjusts the styles of the label, icon and description when the label is multiline */\n\thasMultilineLabel?: boolean;\n\t/** The current state of the checkbox input based on user interactions or permissions */\n\tstate?: CheckboxStates;\n\t/** Sets what selection state the checkbox is in. */\n\tselected?: CheckboxSelected;\n\t/** The text to display as the checkbox's label */\n\tlabel: string;\n\t/** Leading label icon */\n\ticon?: StaticIconConfig;\n\t/**\n\t * Description, additional context text for the user.\n\t * It can be a string or a React component for custom render.\n\t * When using a React component it's necessary to add an id to the custom element and\n\t * pass it to the MrlCheckbox through 'attrs[\"aria-describedby\"]' to make it accessible\n\t * to screen readers.\n\t * Custom description should also implement the disabled state styles\n\t * for text when the input is disabled or set color: inherit.\n\t * @example\n\t * <MrlCheckbox attrs={{ 'aria-describedby': customId }} description={\n\t *   <p id={customId}>description</p>\n\t * }>\n\t */\n\tdescription?: string | React.ReactNode;\n\t/**\n\t * Enables interaction tracking for this checkbox. Provide a stable, non-PII id\n\t * (e.g. 'export-include-comments'). When omitted, the checkbox emits no analytics.\n\t */\n\teventId?: string;\n}\n\n/**\n * Form element with an associated text label that allows the user to select one or more options\n * from a provided list\n * @param {MrlCheckboxProps} props - the component props\n * @returns a checkbox element with an associated label\n */\nexport function MrlCheckbox({\n\tattrs = {},\n\tclassName,\n\tdescription,\n\thasMultilineLabel = false,\n\tstate = checkboxDefaults.state,\n\tselected = checkboxDefaults.selected,\n\ticon,\n\tlabel,\n\teventId,\n\t...rest\n}: MrlCheckboxProps): JSX.Element {\n\tconst trackInteraction = useMrlTrackInteraction('MrlCheckbox', eventId);\n\tconst checkboxIdRef = React.useRef<string>(getUniqueId('mrl-checkbox'));\n\tconst descriptionId = `${checkboxIdRef.current}-description`;\n\n\tconst allClasses = classnames(\n\t\tattrs.class || attrs.className,\n\t\tclassName,\n\t\t'MrlCheckbox',\n\t\tstyles['MrlCheckbox'],\n\t\t{\n\t\t\t[styles['mrl-is--disabled']]: state === 'disabled',\n\t\t\t[styles['mrl-is--invalid']]: state === 'error',\n\t\t\t[styles['mrl-is--selected']]: selected === 'checked',\n\t\t\t[styles['mrl-is--indeterminate']]: selected === 'indeterminate'\n\t\t}\n\t);\n\n\tcheckInvalidAttributes(attrs);\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs, {\n\t\t...getDescribedby(\n\t\t\tattrs['aria-describedby'],\n\t\t\ttypeof description === 'string' ? descriptionId : undefined\n\t\t),\n\t\tid: checkboxIdRef.current\n\t});\n\n\t// setAttributes always sets className=\"\" which always triggers the warning message in the MrlCheckboxStandalone component\n\tdelete attributes.className;\n\n\t// the consumer's handler arrives through `attrs`, so wrap it before handing the\n\t// attributes down to the standalone input.\n\tconst consumerOnChange = attributes.onChange as\n\t\t| ((e: React.ChangeEvent<HTMLInputElement>) => void)\n\t\t| undefined;\n\n\tattributes.onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\ttrackInteraction({ action: 'change', metadata: { selected: e.target.checked } });\n\n\t\tconsumerOnChange?.(e);\n\t};\n\n\treturn (\n\t\t<div className={allClasses}>\n\t\t\t<MrlCheckboxStandalone {...rest} selected={selected} state={state} attrs={attributes} />\n\t\t\t<MrlLabelWithDescription\n\t\t\t\tisDisabled={state === 'disabled'}\n\t\t\t\tisSelected={selected === 'checked'}\n\t\t\t\tisIndeterminate={selected === 'indeterminate'}\n\t\t\t\thasMultilineLabel={hasMultilineLabel}\n\t\t\t\thtmlFor={checkboxIdRef.current}\n\t\t\t\ticon={icon}\n\t\t\t\tlabel={label}\n\t\t\t\tdescription={description}\n\t\t\t\tdescriptionId={descriptionId}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"names":["MrlCheckbox","_ref","_ref$attrs","attrs","className","description","_ref$hasMultilineLabe","hasMultilineLabel","_ref$state","state","checkboxDefaults","_ref$selected","selected","icon","label","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","checkboxIdRef","React","useRef","getUniqueId","descriptionId","concat","current","allClasses","classnames","class","styles","checkInvalidAttributes","attributes","setAttributes","_objectSpread","getDescribedby","undefined","id","consumerOnChange","onChange","e","action","metadata","target","checked","createElement","MrlCheckboxStandalone","_extends","MrlLabelWithDescription","isDisabled","isSelected","isIndeterminate","htmlFor"],"mappings":"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"}

package/dist/cjs/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.js

@@ -6,6 +6,7 @@ var classnames = require('classnames');
 var dsIcons = require('@muraldevkit/ds-icons');
 var constants = require('../../constants.js');
 var MrlCheckboxStandalone_module = require('./MrlCheckboxStandalone.module.scss.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
 var MrlSvg = require('../../../svg/MrlSvg/MrlSvg.js');
 
@@ -32,7 +33,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["attrs", "state", "selected"];
+var _excluded = ["attrs", "state", "selected", "eventId"];
 /**
  * Input that allows the user to select one or more options from a provided list.
  * Note, this component does not provide out of the box accessibility for ensuring
@@ -47,7 +48,9 @@ function MrlCheckboxStandalone(_ref) {
     state = _ref$state === void 0 ? constants.checkboxDefaults.state : _ref$state,
     _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? constants.checkboxDefaults.selected : _ref$selected,
+    eventId = _ref.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlCheckboxStandalone', eventId);
   // Use attrs.id if the developer passes in a custom id
   // but we need to ensure one exists for accessibility
   var checkboxIdRef = React__namespace.useRef(attrs.id || setAttributes.getUniqueId('mrl-checkbox'));
@@ -67,6 +70,25 @@ function MrlCheckboxStandalone(_ref) {
   delete attrs.class;
   delete attrs.className;
   var attributes = setAttributes.setAttributes(attrs);
+
+  // the consumer's handler arrives through `attrs`, so wrap it here rather than
+  // relying on a top-level onChange prop.
+  var consumerOnChange = attributes.onChange;
+
+  /**
+   * Handle change events
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - change event
+   */
+  var handleChange = e => {
+    trackInteraction({
+      action: 'change',
+      metadata: {
+        selected: e.target.checked
+      }
+    });
+    consumerOnChange === null || consumerOnChange === void 0 ? void 0 : consumerOnChange(e);
+  };
   return /*#__PURE__*/React__namespace.createElement("div", {
     className: classnames__default.default(MrlCheckboxStandalone_module.default['MrlCheckboxStandalone'], 'MrlCheckboxStandalone')
   }, /*#__PURE__*/React__namespace.createElement("span", {
@@ -76,6 +98,7 @@ function MrlCheckboxStandalone(_ref) {
     checked: selected === 'checked',
     disabled: state === 'disabled',
     id: checkboxIdRef.current,
+    onChange: handleChange,
     ref: inputRef,
     type: "checkbox",
     className: classnames__default.default(MrlCheckboxStandalone_module.default['MrlCheckboxStandalone-input'], 'MrlCheckboxStandalone-input')

package/dist/cjs/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlCheckboxStandalone.js","sources":["../../../../../../src/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, getUniqueId, setAttributes } from '../../../../utils';\nimport { check, minus } from '@muraldevkit/ds-icons';\nimport { checkboxDefaults, CheckboxSelected, CheckboxStates } from '../../constants';\nimport { MrlSvg } from '../../../';\n\nimport styles from './MrlCheckboxStandalone.module.scss';\nimport './MrlCheckboxStandalone.global.scss';\n\ninterface MrlCheckboxStandaloneProps {\n\t/** Applies additional HTML attributes to the checkbox element */\n\tattrs?: AttrsObject;\n\t/** The current state of the checkbox input based on user interactions or permissions */\n\tstate?: CheckboxStates;\n\t/** Sets what selection state the checkbox is in. */\n\tselected?: CheckboxSelected;\n}\n\n/**\n * Input that allows the user to select one or more options from a provided list.\n * Note, this component does not provide out of the box accessibility for ensuring\n * an associated label and must be manually setup during adoption.\n * @param {MrlCheckboxStandaloneProps} props - the component props\n * @returns a checkbox element\n */\nexport function MrlCheckboxStandalone({\n\tattrs = {},\n\tstate = checkboxDefaults.state,\n\tselected = checkboxDefaults.selected,\n\t...rest\n}: MrlCheckboxStandaloneProps): JSX.Element {\n\t// Use attrs.id if the developer passes in a custom id\n\t// but we need to ensure one exists for accessibility\n\tconst checkboxIdRef = React.useRef<string>(attrs.id || getUniqueId('mrl-checkbox'));\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\n\tif (!(attrs.id || attrs['aria-labelledby'])) {\n\t\tconsole.warn(\n\t\t\t'Warning: Mural Standalone Checkboxes must have either an id or' +\n\t\t\t\t' aria-labelledby attribute for proper accessibility.'\n\t\t);\n\t}\n\n\t// We need to use the ref to set indetermiant attr\n\t// due to not being an intrinsic HTML attr\n\tReact.useEffect(() => {\n\t\tconst indeterminate = selected === 'indeterminate';\n\n\t\tif (inputRef.current) {\n\t\t\tinputRef.current.indeterminate = indeterminate;\n\t\t}\n\t}, [selected]);\n\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs);\n\n\treturn (\n\t\t<div className={classnames(styles['MrlCheckboxStandalone'], 'MrlCheckboxStandalone')}>\n\t\t\t<span className=\"mrl-u-focus-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\t{...rest}\n\t\t\t\t\t{...attributes}\n\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\tchecked={selected === 'checked'}\n\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\tid={checkboxIdRef.current}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlCheckboxStandalone-input'],\n\t\t\t\t\t\t'MrlCheckboxStandalone-input'\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t\t<span className=\"mrl-u-focus-indicator\"></span>\n\t\t\t\t<span\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlCheckboxStandalone-inputDisplay'],\n\t\t\t\t\t\t'MrlCheckboxStandalone-inputDisplay'\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\tsvg={selected !== 'indeterminate' ? check : minus}\n\t\t\t\t\t\tsize=\"auto\"\n\t\t\t\t\t\tclassName={styles['MrlCheckboxStandalone-inputDisplay-icon']}\n\t\t\t\t\t/>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n"],"names":["MrlCheckboxStandalone","_ref","_ref$attrs","attrs","_ref$state","state","checkboxDefaults","_ref$selected","selected","rest","_objectWithoutProperties","_excluded","checkboxIdRef","React","useRef","id","getUniqueId","inputRef","console","warn","useEffect","indeterminate","current","class","className","attributes","setAttributes","createElement","classnames","styles","_extends","checked","disabled","ref","type","MrlSvg","svg","check","minus","size"],"mappings":"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"}
+{"version":3,"file":"MrlCheckboxStandalone.js","sources":["../../../../../../src/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, getUniqueId, setAttributes } from '../../../../utils';\nimport { check, minus } from '@muraldevkit/ds-icons';\nimport { checkboxDefaults, CheckboxSelected, CheckboxStates } from '../../constants';\nimport { MrlSvg } from '../../../';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlCheckboxStandalone.module.scss';\nimport './MrlCheckboxStandalone.global.scss';\n\ninterface MrlCheckboxStandaloneProps {\n\t/** Applies additional HTML attributes to the checkbox element */\n\tattrs?: AttrsObject;\n\t/** The current state of the checkbox input based on user interactions or permissions */\n\tstate?: CheckboxStates;\n\t/** Sets what selection state the checkbox is in. */\n\tselected?: CheckboxSelected;\n\t/**\n\t * Enables interaction tracking for this checkbox. Provide a stable, non-PII id\n\t * (e.g. 'export-include-comments'). When omitted, the checkbox emits no analytics.\n\t */\n\teventId?: string;\n}\n\n/**\n * Input that allows the user to select one or more options from a provided list.\n * Note, this component does not provide out of the box accessibility for ensuring\n * an associated label and must be manually setup during adoption.\n * @param {MrlCheckboxStandaloneProps} props - the component props\n * @returns a checkbox element\n */\nexport function MrlCheckboxStandalone({\n\tattrs = {},\n\tstate = checkboxDefaults.state,\n\tselected = checkboxDefaults.selected,\n\teventId,\n\t...rest\n}: MrlCheckboxStandaloneProps): JSX.Element {\n\tconst trackInteraction = useMrlTrackInteraction('MrlCheckboxStandalone', eventId);\n\t// Use attrs.id if the developer passes in a custom id\n\t// but we need to ensure one exists for accessibility\n\tconst checkboxIdRef = React.useRef<string>(attrs.id || getUniqueId('mrl-checkbox'));\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\n\tif (!(attrs.id || attrs['aria-labelledby'])) {\n\t\tconsole.warn(\n\t\t\t'Warning: Mural Standalone Checkboxes must have either an id or' +\n\t\t\t\t' aria-labelledby attribute for proper accessibility.'\n\t\t);\n\t}\n\n\t// We need to use the ref to set indetermiant attr\n\t// due to not being an intrinsic HTML attr\n\tReact.useEffect(() => {\n\t\tconst indeterminate = selected === 'indeterminate';\n\n\t\tif (inputRef.current) {\n\t\t\tinputRef.current.indeterminate = indeterminate;\n\t\t}\n\t}, [selected]);\n\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs);\n\n\t// the consumer's handler arrives through `attrs`, so wrap it here rather than\n\t// relying on a top-level onChange prop.\n\tconst consumerOnChange = attributes.onChange as\n\t\t| ((e: React.ChangeEvent<HTMLInputElement>) => void)\n\t\t| undefined;\n\n\t/**\n\t * Handle change events\n\t *\n\t * @param {React.ChangeEvent<HTMLInputElement>} e - change event\n\t */\n\tconst handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\ttrackInteraction({ action: 'change', metadata: { selected: e.target.checked } });\n\n\t\tconsumerOnChange?.(e);\n\t};\n\n\treturn (\n\t\t<div className={classnames(styles['MrlCheckboxStandalone'], 'MrlCheckboxStandalone')}>\n\t\t\t<span className=\"mrl-u-focus-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\t{...rest}\n\t\t\t\t\t{...attributes}\n\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\tchecked={selected === 'checked'}\n\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\tid={checkboxIdRef.current}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlCheckboxStandalone-input'],\n\t\t\t\t\t\t'MrlCheckboxStandalone-input'\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t\t<span className=\"mrl-u-focus-indicator\"></span>\n\t\t\t\t<span\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlCheckboxStandalone-inputDisplay'],\n\t\t\t\t\t\t'MrlCheckboxStandalone-inputDisplay'\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\tsvg={selected !== 'indeterminate' ? check : minus}\n\t\t\t\t\t\tsize=\"auto\"\n\t\t\t\t\t\tclassName={styles['MrlCheckboxStandalone-inputDisplay-icon']}\n\t\t\t\t\t/>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n"],"names":["MrlCheckboxStandalone","_ref","_ref$attrs","attrs","_ref$state","state","checkboxDefaults","_ref$selected","selected","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","checkboxIdRef","React","useRef","id","getUniqueId","inputRef","console","warn","useEffect","indeterminate","current","class","className","attributes","setAttributes","consumerOnChange","onChange","handleChange","e","action","metadata","target","checked","createElement","classnames","styles","_extends","disabled","ref","type","MrlSvg","svg","check","minus","size"],"mappings":"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"}

package/dist/cjs/components/form/date-picker/MrlDatePicker.js

@@ -6,6 +6,7 @@ var classnames = require('classnames');
 var dsIcons = require('@muraldevkit/ds-icons');
 var useActiveColor = require('../hooks/useActiveColor.js');
 var MrlDatePicker_module = require('./MrlDatePicker.module.scss.js');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlSvg = require('../../svg/MrlSvg/MrlSvg.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,7 +32,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["autofocus", "className", "inputId", "kind", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "state", "value", "data-qa"];
+var _excluded = ["autofocus", "className", "inputId", "kind", "onBlur", "onChange", "onFocus", "onMouseEnter", "onMouseLeave", "state", "eventId", "value", "data-qa"];
 /**
  * Allows the user to input a date
  *
@@ -47,14 +48,17 @@ var MrlDatePicker = /*#__PURE__*/React__namespace.forwardRef(function MrlDatePic
     _props$kind = props.kind,
     kind = _props$kind === void 0 ? 'default' : _props$kind,
     onBlur = props.onBlur,
+    onChange = props.onChange,
     onFocus = props.onFocus,
     onMouseEnter = props.onMouseEnter,
     onMouseLeave = props.onMouseLeave,
     state = props.state,
+    eventId = props.eventId,
     value = props.value,
     qa = props['data-qa'],
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
   var dateInputRef = React__namespace.useRef(null);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlDatePicker', eventId);
   var _useActiveColor = useActiveColor.useActiveColor(state),
     hasActiveColor = _useActiveColor.hasActiveColor,
     setHasActiveColor = _useActiveColor.setHasActiveColor;
@@ -83,11 +87,21 @@ var MrlDatePicker = /*#__PURE__*/React__namespace.forwardRef(function MrlDatePic
     }
     setHasActiveColor(false);
   }, [setHasActiveColor, onMouseLeave]);
+  var handleOnChange = React__namespace.useCallback(e => {
+    // the selected date is consumer data and is never emitted.
+    trackInteraction({
+      action: 'change'
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  }, [onChange, trackInteraction]);
   var showPicker = React__namespace.useCallback(() => {
+    trackInteraction({
+      action: 'open'
+    });
     if (dateInputRef.current && typeof dateInputRef.current.showPicker === 'function') {
       dateInputRef.current.showPicker();
     }
-  }, []);
+  }, [trackInteraction]);
   React__namespace.useEffect(() => {
     if (dateInputRef.current && autofocus) {
       dateInputRef.current.focus();
@@ -111,6 +125,7 @@ var MrlDatePicker = /*#__PURE__*/React__namespace.forwardRef(function MrlDatePic
     className: inputClasses,
     disabled: state === 'disabled',
     onBlur: handleOnBlur,
+    onChange: handleOnChange,
     onClick: showPicker,
     onFocus: handleOnFocus,
     onMouseEnter: handleOnMouseEnter,