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

@muraldevkit/ui-toolkit 4.73.0-dev-NYDL.1 → 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/cjs/components/menu/MrlMenuItem/MrlMenuItem.js CHANGED Viewed

@@ -6,6 +6,7 @@ var dsIcons = require('@muraldevkit/ds-icons');
 var classnames = require('classnames');
 var MrlMenuContext = require('../context/MrlMenuContext.js');
 var MrlMenuItem_module = require('./MrlMenuItem.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 = ["ariaDescribedBy", "ariaHasPopup", "children", "className", "dataQa", "disabled", "icon", "id", "onClick", "onMouseOut", "onMouseOver", "role", "selected"];
+var _excluded = ["ariaDescribedBy", "ariaHasPopup", "children", "className", "dataQa", "disabled", "icon", "id", "onClick", "onMouseOut", "onMouseOver", "role", "selected", "eventId"];
 var getSubMenuType = child => {
   if (/*#__PURE__*/React__namespace.isValidElement(child)) {
     var type = child.type.componentType;
@@ -65,8 +66,10 @@ function MrlMenuItem(_ref) {
     _ref$role = _ref.role,
     role = _ref$role === void 0 ? 'menuitem' : _ref$role,
     selected = _ref.selected,
+    eventId = _ref.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var context = React__namespace.useContext(MrlMenuContext.MrlMenuContext);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlMenuItem', eventId);
   var menuItemRef = React__namespace.useRef(null);
   var _React$useState = React__namespace.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
@@ -86,6 +89,13 @@ function MrlMenuItem(_ref) {
   var handleClick = e => {
     e.preventDefault();
     e.stopPropagation();
+    trackInteraction({
+      action: 'click',
+      metadata: {
+        selected: !!selected
+      },
+      variant: role
+    });
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
     setFocusItem();
     if (context && !!context.closeMenu && !isSubElement) {
@@ -98,6 +108,13 @@ function MrlMenuItem(_ref) {
     if (e.key === ' ' && !disabled) {
       e.preventDefault();
       e.stopPropagation();
+      trackInteraction({
+        action: 'click',
+        metadata: {
+          selected: !!selected
+        },
+        variant: role
+      });
       onClick === null || onClick === void 0 ? void 0 : onClick();
       // close the menu if we are not a selectable item (checkbox or radio button)

package/dist/cjs/components/menu/MrlMenuItem/MrlMenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlMenuItem.js","sources":["../../../../../src/components/menu/MrlMenuItem/MrlMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, chevronRight } from '@muraldevkit/ds-icons';\nimport classnames from 'classnames';\nimport { DSIconType, getUniqueId, MrlMenuProps, MrlPopoverProps, MrlSvg } from '../../../';\nimport { SubMenuTypes, ComponentWithComponentType, AriaHasPopup, MenuItemRole } from '../constants';\nimport { MrlMenuContext } from '../context/MrlMenuContext';\n\nimport styles from './MrlMenuItem.module.scss';\n\nexport interface MrlMenuItemProps {\n\t/** ID for associated description /\n\tariaDescribedBy?: string;\n\n\t/* Indicates whether the menu item has a popup menu using aria-haspopup attribute /\n\tariaHasPopup?: AriaHasPopup;\n\n\t/\n\t Children to be rendered within the menu component\n\t /\n\tchildren: React.ReactNode \| string;\n\n\t/** Classname for the menu item /\n\tclassName?: string;\n\n\t/* If the menu item is disabled /\n\tdisabled?: boolean;\n\n\t/* Icon for menu item /\n\ticon?: DSIconType;\n\n\t/* Unique ID for the menu item /\n\tid?: string;\n\n\t/* Callback to be called when the menu item is clicked /\n\tonClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n\n\t/* Callback to be called when the menu item is hovered /\n\tonMouseOver?: (e?: React.MouseEvent) => void;\n\n\t/* Callback to be called when the menu item is hovered out /\n\tonMouseOut?: (e?: React.MouseEvent) => void;\n\n\t/* Data-qa attribute for the menu item /\n\tdataQa?: string;\n\n\t/\n\t Role for the menu item\n\t \n\t When using `menuitemcheckbox` or `menuitemradio`, the menu item will be treated as a selectable item,\n\t * aria-checked will be set to 'true' or 'false' based on the selected state.\n\t \n\t @default 'menuitem' - for regular menu items\n\t * @example 'menuitemcheckbox' - for checkbox menu items\n\t * @example 'menuitemradio' - for radio menu items\n\t /\n\trole?: MenuItemRole;\n\n\t/* If the menu item is selected /\n\tselected?: boolean;\n}\n\nconst getSubMenuType = (child: React.ReactNode): SubMenuTypes \| null => {\n\tif (React.isValidElement(child)) {\n\t\tconst type = (child.type as ComponentWithComponentType).componentType;\n\n\t\tif (type === 'Menu' \|\| type === 'Popover') {\n\t\t\treturn type;\n\t\t}\n\t}\n\n\treturn null;\n};\n\n/\n MrlMenuItem component\n \n Renders a menu item to be used within the MrlMenu component\n * @param {MrlMenuItemProps} props - The props for the MrlMenuItem component\n * @returns {Element} - rendered MrlMenuItem component\n */\nexport function MrlMenuItem({\n\tariaDescribedBy,\n\tariaHasPopup,\n\tchildren,\n\tclassName,\n\tdataQa,\n\tdisabled,\n\ticon,\n\tid,\n\tonClick,\n\tonMouseOut,\n\tonMouseOver,\n\trole = 'menuitem',\n\tselected,\n\t...rest\n}: MrlMenuItemProps): JSX.Element {\n\tconst context = React.useContext(MrlMenuContext);\n\tconst menuItemRef = React.useRef<HTMLButtonElement>(null);\n\tconst [isSubElement, setIsSubElement] = React.useState(false);\n\tconst isSelectable = role === 'menuitemcheckbox' \|\| role === 'menuitemradio';\n\n\tconst setFocusItem = (): void => {\n\t\tif (ariaHasPopup && ariaHasPopup !== 'menu' && context?.triggerRef?.current) {\n\t\t\tconst triggerElement = context.triggerRef.current;\n\t\t\tif (!triggerElement.id) {\n\t\t\t\ttriggerElement.id = getUniqueId('menu-trigger');\n\t\t\t}\n\n\t\t\tdocument.body.setAttribute('data-focus-item', triggerElement.id);\n\t\t}\n\t};\n\n\tconst handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tonClick?.(e);\n\n\t\tsetFocusItem();\n\n\t\tif (context && !!context.closeMenu && !isSubElement) {\n\t\t\tcontext.closeMenu();\n\t\t}\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n\t\t// WCAG specifices that space key should toggle the selection of a checkbox or radio button\n\t\t// but not close the menu. When a user presses the enter key on these items the menu should close.\n\t\tif (e.key === ' ' && !disabled) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\n\t\t\tonClick?.();\n\n\t\t\t// close the menu if we are not a selectable item (checkbox or radio button)\n\t\t\tif (!isSelectable) {\n\t\t\t\tsetFocusItem();\n\t\t\t\tcontext?.closeMenu?.();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleDisabled = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t};\n\n\tconst handleFocusIn = (): void => {\n\t\tonMouseOver?.();\n\t};\n\n\tconst handleFocusOut = (): void => {\n\t\tonMouseOut?.();\n\t};\n\n\tconst renderMenu = () => {\n\t\treturn React.Children.map(children, (child) => {\n\t\t\tif (React.isValidElement(child)) {\n\t\t\t\tconst type = (child.type as ComponentWithComponentType).componentType;\n\n\t\t\t\tif (type === 'Menu') {\n\t\t\t\t\treturn React.cloneElement(child as React.ReactElement<Partial<MrlMenuProps>>, {\n\t\t\t\t\t\talignment: 'start',\n\t\t\t\t\t\tcloseParent: context?.closeParent,\n\t\t\t\t\t\tisSubMenu: true,\n\t\t\t\t\t\tposition: 'right',\n\t\t\t\t\t\ttriggerRef: menuItemRef\n\t\t\t\t\t});\n\t\t\t\t} else if (type === 'Popover') {\n\t\t\t\t\treturn React.cloneElement(child as React.ReactElement<Partial<MrlPopoverProps>>, {\n\t\t\t\t\t\talignment: 'start',\n\t\t\t\t\t\tisSubMenu: true,\n\t\t\t\t\t\tpoint: false,\n\t\t\t\t\t\tposition: 'right',\n\t\t\t\t\t\ttriggerRef: menuItemRef\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t}\n\t\t});\n\t};\n\n\tconst renderChildren = () => {\n\t\treturn React.Children.map(children, (child) => {\n\t\t\tif (!getSubMenuType(child)) {\n\t\t\t\treturn child;\n\t\t\t}\n\t\t\treturn null;\n\t\t});\n\t};\n\n\tReact.useEffect(() => {\n\t\tconst hasSubMenu = React.Children.toArray(children).some((child) => getSubMenuType(child));\n\n\t\tsetIsSubElement(hasSubMenu);\n\t}, [children]);\n\n\tconst menuItemClasses = classnames(styles['MrlMenuItem'], 'MrlMenuItem');\n\tconst menuTriggerClasses = classnames(\n\t\tstyles['MrlMenuItem--item'],\n\t\t'MrlMenuItem--item',\n\t\t{\n\t\t\t[styles['MrlMenuItem--item--selected']]: selected,\n\t\t\t[styles['MrlMenuItem--item--withIcon']]: !!icon\n\t\t},\n\t\tclassName\n\t);\n\n\tconst rightIcon = isSubElement ? chevronRight : selected ? check : null;\n\tconst hasPopup = isSubElement ? 'menu' : ariaHasPopup ? ariaHasPopup : undefined;\n\n\treturn (\n\t\t<li {...rest} className={menuItemClasses} data-qa={dataQa}>\n\t\t\t<button\n\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\taria-disabled={disabled}\n\t\t\t\taria-haspopup={hasPopup}\n\t\t\t\t{...(isSelectable ? { 'aria-checked': selected ? 'true' : 'false' } : {})}\n\t\t\t\tdata-selected={selected}\n\t\t\t\tdata-qa={dataQa && `${dataQa}-button`}\n\t\t\t\tid={id}\n\t\t\t\tref={menuItemRef}\n\t\t\t\trole={role}\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={disabled ? handleDisabled : handleClick}\n\t\t\t\tonKeyDown={!disabled ? handleKeyDown : undefined}\n\t\t\t\tonMouseOver={!disabled && onMouseOver ? onMouseOver : undefined}\n\t\t\t\tonMouseOut={!disabled && onMouseOut ? onMouseOut : undefined}\n\t\t\t\tonFocus={!disabled && onMouseOver ? handleFocusIn : undefined}\n\t\t\t\tonBlur={!disabled && onMouseOut ? handleFocusOut : undefined}\n\t\t\t\tclassName={menuTriggerClasses}\n\t\t\t>\n\t\t\t\t{isSubElement && <div className={styles['MrlMenuItem--item--hoverArea']} />}\n\t\t\t\t{icon && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-left']}>\n\t\t\t\t\t\t<MrlSvg size=\"small\" svg={icon} />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{renderChildren()}\n\t\t\t\t{rightIcon && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-right']}>\n\t\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-right-container']}>\n\t\t\t\t\t\t\t<MrlSvg svg={rightIcon} size=\"auto\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</button>\n\t\t\t{renderMenu()}\n\t\t</li>\n\t);\n}\n"],"names":["getSubMenuType","child","React","isValidElement","type","componentType","MrlMenuItem","_ref","ariaDescribedBy","ariaHasPopup","children","className","dataQa","disabled","icon","id","onClick","onMouseOut","onMouseOver","_ref$role","role","selected","rest","_objectWithoutProperties","_excluded","context","useContext","MrlMenuContext","menuItemRef","useRef","_React$useState","useState","_React$useState2","_slicedToArray","isSubElement","setIsSubElement","isSelectable","setFocusItem","_context$triggerRef","triggerRef","current","triggerElement","getUniqueId","document","body","setAttribute","handleClick","e","preventDefault","stopPropagation","closeMenu","handleKeyDown","key","_context$closeMenu","call","handleDisabled","handleFocusIn","handleFocusOut","renderMenu","Children","map","cloneElement","alignment","closeParent","isSubMenu","position","point","renderChildren","useEffect","hasSubMenu","toArray","some","menuItemClasses","classnames","styles","menuTriggerClasses","rightIcon","chevronRight","check","hasPopup","undefined","createElement","_extends","concat","ref","onKeyDown","onFocus","onBlur","MrlSvg","size","svg"],"mappings":"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"}
1	+ {"version":3,"file":"MrlMenuItem.js","sources":["../../../../../src/components/menu/MrlMenuItem/MrlMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, chevronRight } from '@muraldevkit/ds-icons';\nimport classnames from 'classnames';\nimport { DSIconType, getUniqueId, MrlMenuProps, MrlPopoverProps, MrlSvg } from '../../../';\nimport { SubMenuTypes, ComponentWithComponentType, AriaHasPopup, MenuItemRole } from '../constants';\nimport { MrlMenuContext } from '../context/MrlMenuContext';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlMenuItem.module.scss';\n\nexport interface MrlMenuItemProps {\n\t/** ID for associated description /\n\tariaDescribedBy?: string;\n\n\t/* Indicates whether the menu item has a popup menu using aria-haspopup attribute /\n\tariaHasPopup?: AriaHasPopup;\n\n\t/\n\t Children to be rendered within the menu component\n\t /\n\tchildren: React.ReactNode \| string;\n\n\t/** Classname for the menu item /\n\tclassName?: string;\n\n\t/* If the menu item is disabled /\n\tdisabled?: boolean;\n\n\t/* Icon for menu item /\n\ticon?: DSIconType;\n\n\t/* Unique ID for the menu item /\n\tid?: string;\n\n\t/* Callback to be called when the menu item is clicked /\n\tonClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n\n\t/* Callback to be called when the menu item is hovered /\n\tonMouseOver?: (e?: React.MouseEvent) => void;\n\n\t/* Callback to be called when the menu item is hovered out /\n\tonMouseOut?: (e?: React.MouseEvent) => void;\n\n\t/* Data-qa attribute for the menu item /\n\tdataQa?: string;\n\n\t/\n\t Role for the menu item\n\t \n\t When using `menuitemcheckbox` or `menuitemradio`, the menu item will be treated as a selectable item,\n\t * aria-checked will be set to 'true' or 'false' based on the selected state.\n\t \n\t @default 'menuitem' - for regular menu items\n\t * @example 'menuitemcheckbox' - for checkbox menu items\n\t * @example 'menuitemradio' - for radio menu items\n\t /\n\trole?: MenuItemRole;\n\n\t/* If the menu item is selected /\n\tselected?: boolean;\n\n\t/\n\t Enables interaction tracking for this menu item. Provide a stable, non-PII id\n\t * (e.g. 'mural-menu-duplicate'). When omitted, the menu item emits no analytics.\n\t /\n\teventId?: string;\n}\n\nconst getSubMenuType = (child: React.ReactNode): SubMenuTypes \| null => {\n\tif (React.isValidElement(child)) {\n\t\tconst type = (child.type as ComponentWithComponentType).componentType;\n\n\t\tif (type === 'Menu' \|\| type === 'Popover') {\n\t\t\treturn type;\n\t\t}\n\t}\n\n\treturn null;\n};\n\n/\n MrlMenuItem component\n \n Renders a menu item to be used within the MrlMenu component\n * @param {MrlMenuItemProps} props - The props for the MrlMenuItem component\n * @returns {Element} - rendered MrlMenuItem component\n */\nexport function MrlMenuItem({\n\tariaDescribedBy,\n\tariaHasPopup,\n\tchildren,\n\tclassName,\n\tdataQa,\n\tdisabled,\n\ticon,\n\tid,\n\tonClick,\n\tonMouseOut,\n\tonMouseOver,\n\trole = 'menuitem',\n\tselected,\n\teventId,\n\t...rest\n}: MrlMenuItemProps): JSX.Element {\n\tconst context = React.useContext(MrlMenuContext);\n\tconst trackInteraction = useMrlTrackInteraction('MrlMenuItem', eventId);\n\tconst menuItemRef = React.useRef<HTMLButtonElement>(null);\n\tconst [isSubElement, setIsSubElement] = React.useState(false);\n\tconst isSelectable = role === 'menuitemcheckbox' \|\| role === 'menuitemradio';\n\n\tconst setFocusItem = (): void => {\n\t\tif (ariaHasPopup && ariaHasPopup !== 'menu' && context?.triggerRef?.current) {\n\t\t\tconst triggerElement = context.triggerRef.current;\n\t\t\tif (!triggerElement.id) {\n\t\t\t\ttriggerElement.id = getUniqueId('menu-trigger');\n\t\t\t}\n\n\t\t\tdocument.body.setAttribute('data-focus-item', triggerElement.id);\n\t\t}\n\t};\n\n\tconst handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\ttrackInteraction({ action: 'click', metadata: { selected: !!selected }, variant: role });\n\n\t\tonClick?.(e);\n\n\t\tsetFocusItem();\n\n\t\tif (context && !!context.closeMenu && !isSubElement) {\n\t\t\tcontext.closeMenu();\n\t\t}\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n\t\t// WCAG specifices that space key should toggle the selection of a checkbox or radio button\n\t\t// but not close the menu. When a user presses the enter key on these items the menu should close.\n\t\tif (e.key === ' ' && !disabled) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\n\t\t\ttrackInteraction({ action: 'click', metadata: { selected: !!selected }, variant: role });\n\n\t\t\tonClick?.();\n\n\t\t\t// close the menu if we are not a selectable item (checkbox or radio button)\n\t\t\tif (!isSelectable) {\n\t\t\t\tsetFocusItem();\n\t\t\t\tcontext?.closeMenu?.();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleDisabled = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t};\n\n\tconst handleFocusIn = (): void => {\n\t\tonMouseOver?.();\n\t};\n\n\tconst handleFocusOut = (): void => {\n\t\tonMouseOut?.();\n\t};\n\n\tconst renderMenu = () => {\n\t\treturn React.Children.map(children, (child) => {\n\t\t\tif (React.isValidElement(child)) {\n\t\t\t\tconst type = (child.type as ComponentWithComponentType).componentType;\n\n\t\t\t\tif (type === 'Menu') {\n\t\t\t\t\treturn React.cloneElement(child as React.ReactElement<Partial<MrlMenuProps>>, {\n\t\t\t\t\t\talignment: 'start',\n\t\t\t\t\t\tcloseParent: context?.closeParent,\n\t\t\t\t\t\tisSubMenu: true,\n\t\t\t\t\t\tposition: 'right',\n\t\t\t\t\t\ttriggerRef: menuItemRef\n\t\t\t\t\t});\n\t\t\t\t} else if (type === 'Popover') {\n\t\t\t\t\treturn React.cloneElement(child as React.ReactElement<Partial<MrlPopoverProps>>, {\n\t\t\t\t\t\talignment: 'start',\n\t\t\t\t\t\tisSubMenu: true,\n\t\t\t\t\t\tpoint: false,\n\t\t\t\t\t\tposition: 'right',\n\t\t\t\t\t\ttriggerRef: menuItemRef\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t}\n\t\t});\n\t};\n\n\tconst renderChildren = () => {\n\t\treturn React.Children.map(children, (child) => {\n\t\t\tif (!getSubMenuType(child)) {\n\t\t\t\treturn child;\n\t\t\t}\n\t\t\treturn null;\n\t\t});\n\t};\n\n\tReact.useEffect(() => {\n\t\tconst hasSubMenu = React.Children.toArray(children).some((child) => getSubMenuType(child));\n\n\t\tsetIsSubElement(hasSubMenu);\n\t}, [children]);\n\n\tconst menuItemClasses = classnames(styles['MrlMenuItem'], 'MrlMenuItem');\n\tconst menuTriggerClasses = classnames(\n\t\tstyles['MrlMenuItem--item'],\n\t\t'MrlMenuItem--item',\n\t\t{\n\t\t\t[styles['MrlMenuItem--item--selected']]: selected,\n\t\t\t[styles['MrlMenuItem--item--withIcon']]: !!icon\n\t\t},\n\t\tclassName\n\t);\n\n\tconst rightIcon = isSubElement ? chevronRight : selected ? check : null;\n\tconst hasPopup = isSubElement ? 'menu' : ariaHasPopup ? ariaHasPopup : undefined;\n\n\treturn (\n\t\t<li {...rest} className={menuItemClasses} data-qa={dataQa}>\n\t\t\t<button\n\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\taria-disabled={disabled}\n\t\t\t\taria-haspopup={hasPopup}\n\t\t\t\t{...(isSelectable ? { 'aria-checked': selected ? 'true' : 'false' } : {})}\n\t\t\t\tdata-selected={selected}\n\t\t\t\tdata-qa={dataQa && `${dataQa}-button`}\n\t\t\t\tid={id}\n\t\t\t\tref={menuItemRef}\n\t\t\t\trole={role}\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={disabled ? handleDisabled : handleClick}\n\t\t\t\tonKeyDown={!disabled ? handleKeyDown : undefined}\n\t\t\t\tonMouseOver={!disabled && onMouseOver ? onMouseOver : undefined}\n\t\t\t\tonMouseOut={!disabled && onMouseOut ? onMouseOut : undefined}\n\t\t\t\tonFocus={!disabled && onMouseOver ? handleFocusIn : undefined}\n\t\t\t\tonBlur={!disabled && onMouseOut ? handleFocusOut : undefined}\n\t\t\t\tclassName={menuTriggerClasses}\n\t\t\t>\n\t\t\t\t{isSubElement && <div className={styles['MrlMenuItem--item--hoverArea']} />}\n\t\t\t\t{icon && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-left']}>\n\t\t\t\t\t\t<MrlSvg size=\"small\" svg={icon} />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{renderChildren()}\n\t\t\t\t{rightIcon && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-right']}>\n\t\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-right-container']}>\n\t\t\t\t\t\t\t<MrlSvg svg={rightIcon} size=\"auto\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</button>\n\t\t\t{renderMenu()}\n\t\t</li>\n\t);\n}\n"],"names":["getSubMenuType","child","React","isValidElement","type","componentType","MrlMenuItem","_ref","ariaDescribedBy","ariaHasPopup","children","className","dataQa","disabled","icon","id","onClick","onMouseOut","onMouseOver","_ref$role","role","selected","eventId","rest","_objectWithoutProperties","_excluded","context","useContext","MrlMenuContext","trackInteraction","useMrlTrackInteraction","menuItemRef","useRef","_React$useState","useState","_React$useState2","_slicedToArray","isSubElement","setIsSubElement","isSelectable","setFocusItem","_context$triggerRef","triggerRef","current","triggerElement","getUniqueId","document","body","setAttribute","handleClick","e","preventDefault","stopPropagation","action","metadata","variant","closeMenu","handleKeyDown","key","_context$closeMenu","call","handleDisabled","handleFocusIn","handleFocusOut","renderMenu","Children","map","cloneElement","alignment","closeParent","isSubMenu","position","point","renderChildren","useEffect","hasSubMenu","toArray","some","menuItemClasses","classnames","styles","menuTriggerClasses","rightIcon","chevronRight","check","hasPopup","undefined","createElement","_extends","concat","ref","onKeyDown","onFocus","onBlur","MrlSvg","size","svg"],"mappings":"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"}

package/dist/cjs/components/menu/MrlMenuItemLink/MrlMenuItemLink.js CHANGED Viewed

@@ -5,6 +5,7 @@ var React = require('react');
 var dsIcons = require('@muraldevkit/ds-icons');
 var classnames = require('classnames');
 var MrlMenuItem_module = require('../MrlMenuItem/MrlMenuItem.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 }; }
@@ -30,7 +31,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var _excluded = ["ariaDescribedBy", "children", "className", "dataQa", "disabled", "href", "icon", "id", "onClick", "selected", "target"];
+var _excluded = ["ariaDescribedBy", "children", "className", "dataQa", "disabled", "href", "icon", "id", "onClick", "selected", "target", "eventId"];
 /**
  * MrlMenuItem component
  *
@@ -51,8 +52,16 @@ function MrlMenuItemLink(_ref) {
     selected = _ref.selected,
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? '_self' : _ref$target,
+    eventId = _ref.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlMenuItemLink', eventId);
   var handleClick = e => {
+    trackInteraction({
+      action: 'click',
+      metadata: {
+        target
+      }
+    });
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
   var handleDisabled = e => {

package/dist/cjs/components/menu/MrlMenuItemLink/MrlMenuItemLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlMenuItemLink.js","sources":["../../../../../src/components/menu/MrlMenuItemLink/MrlMenuItemLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { linkOpen } from '@muraldevkit/ds-icons';\nimport classnames from 'classnames';\nimport { DSIconType, MrlSvg } from '../../../';\nimport styles from '../MrlMenuItem/MrlMenuItem.module.scss';\n\nexport interface MrlMenuItemLinkProps {\n\t/** ID for associated description /\n\tariaDescribedBy?: string;\n\n\t/\n\t Children to be rendered within the menu component\n\t /\n\tchildren: React.ReactNode \| string;\n\n\t/** Class names for the menu item /\n\tclassName?: string;\n\n\t/* If the menu item is disabled /\n\tdisabled?: boolean;\n\n\t/* Href for the menu item /\n\thref: string;\n\n\t/* Icon for menu item /\n\ticon?: DSIconType;\n\n\t/* Target for links /\n\ttarget?: string;\n\n\t/* Unique ID for the menu item /\n\tid?: string;\n\n\t/* Callback to be called when the menu item is clicked /\n\tonClick?: (e: React.MouseEvent<HTMLElement>) => void;\n\n\t/* Data-qa attribute for the menu item /\n\tdataQa?: string;\n\n\t/* If the menu item is selected /\n\tselected?: boolean;\n\n\t/* Rel attr for the menu item /\n\trel?: string;\n}\n\n/\n MrlMenuItem component\n \n Renders a menu item to be used within the MrlMenu component\n * @param {MrlMenuItemLinkProps} props - The props for the MrlMenuItem component\n * @returns {Element} - rendered MrlMenuItem component\n */\nexport function MrlMenuItemLink({\n\tariaDescribedBy,\n\tchildren,\n\tclassName,\n\tdataQa,\n\tdisabled,\n\thref,\n\ticon,\n\tid,\n\tonClick,\n\tselected,\n\ttarget = '_self',\n\t...rest\n}: MrlMenuItemLinkProps): JSX.Element {\n\tconst handleClick = (e: React.MouseEvent<HTMLElement>): void => {\n\t\tonClick?.(e);\n\t};\n\n\tconst handleDisabled = (e: React.MouseEvent<HTMLElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t};\n\n\tconst menuItemClasses = classnames(styles['MrlMenuItem'], 'MrlMenuItem', className);\n\tconst menuTriggerClasses = classnames(styles['MrlMenuItem--item'], 'MrlMenuItem--item');\n\n\tconst isExternalLink = target === '_blank';\n\tconst linkRel = isExternalLink ? 'noopener noreferrer' : rest.rel;\n\n\treturn (\n\t\t<li className={menuItemClasses} data-qa={dataQa}>\n\t\t\t<a\n\t\t\t\t{...rest}\n\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\taria-disabled={disabled}\n\t\t\t\tdata-selected={selected}\n\t\t\t\tdata-qa={dataQa && `${dataQa}-button`}\n\t\t\t\tid={id}\n\t\t\t\trole=\"menuitem\"\n\t\t\t\tonClick={disabled ? handleDisabled : handleClick}\n\t\t\t\tclassName={menuTriggerClasses}\n\t\t\t\trel={linkRel}\n\t\t\t\thref={href}\n\t\t\t\ttarget={target}\n\t\t\t>\n\t\t\t\t{icon && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--submenuIcon-left']}>\n\t\t\t\t\t\t<MrlSvg size=\"small\" svg={icon} />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t\t{isExternalLink && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-right']}>\n\t\t\t\t\t\t<span className={styles['MrlMenuItem--item--linkOpenIcon']}>\n\t\t\t\t\t\t\t<MrlSvg svg={linkOpen} size=\"auto\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</a>\n\t\t</li>\n\t);\n}\n"],"names":["MrlMenuItemLink","_ref","ariaDescribedBy","children","className","dataQa","disabled","href","icon","id","onClick","selected","_ref$target","target","rest","_objectWithoutProperties","_excluded","handleClick","e","handleDisabled","preventDefault","stopPropagation","menuItemClasses","classnames","styles","menuTriggerClasses","isExternalLink","linkRel","rel","React","createElement","_extends","concat","role","MrlSvg","size","svg","linkOpen"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA~~;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAeA,CAAAC,IAAA,~~EAaO~~;AAAA,EAAA,~~IAZrCC~~,eAAe,GAAAD,IAAA,CAAfC,eAAe;IACfC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IACNC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,IAAI,GAAAN,IAAA,CAAJM,IAAI;IACJC,IAAI,GAAAP,IAAA,CAAJO,IAAI;IACJC,EAAE,GAAAR,IAAA,CAAFQ,EAAE;IACFC,OAAO,GAAAT,IAAA,CAAPS,OAAO;IACPC,QAAQ,GAAAV,IAAA,CAARU,QAAQ;IAAAC,WAAA,GAAAX,IAAA,CACRY,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAA,MAAA,GAAG,OAAO,GAAAA,WAAA;~~AACbE~~,IAAAA,IAAI,GAAAC,iDAAA,~~CAAAd~~,IAAA,~~EAAAe~~,SAAA,CAAA;~~EAEP~~,IAAMC,WAAW,GAAIC,CAAgC,IAAW;AAC/DR,IAAAA,OAAO,aAAPA,OAAO,KAAA,MAAA,GAAA,MAAA,GAAPA,OAAO,~~CAAGQ~~,CAAC,CAAC;EACb,CAAC;EAED,~~IAAMC~~,cAAc,~~GAAID~~,CAAgC,IAAW;IAClEA,CAAC,~~CAACE~~,cAAc,EAAE;~~IAClBF~~,CAAC,~~CAACG~~,eAAe,EAAE;EACpB,CAAC;AAED,EAAA,IAAMC,eAAe,GAAGC,2BAAU,CAACC,0BAAM,CAAC,aAAa,CAAC,EAAE,aAAa,~~EAAEpB~~,SAAS,CAAC;EACnF,~~IAAMqB~~,kBAAkB,GAAGF,2BAAU,CAACC,0BAAM,CAAC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;AAEvF,EAAA,IAAME,cAAc,~~GAAGb~~,MAAM,KAAK,QAAQ;EAC1C,~~IAAMc~~,OAAO,GAAGD,cAAc,GAAG,qBAAqB,~~GAAGZ~~,IAAI,~~CAACc~~,GAAG;EAEjE,oBACCC,gBAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;~~AAAI1B~~,IAAAA,SAAS,~~EAAEkB~~,eAAgB;IAAC,SAAA,~~EAASjB~~;AAAO,GAAA,eAC/~~CwB~~,gBAAA,CAAAC,aAAA,CAAA,GAAA,EAAAC,iCAAA,~~KACKjB~~,IAAI,EAAA;AACR,IAAA,kBAAA,~~EAAkBZ~~,eAAgB;AAClC,IAAA,eAAA,EAAeI,QAAS;AACxB,IAAA,eAAA,EAAeK,QAAS;AACxB,IAAA,SAAA,EAASN,MAAM,IAAA,EAAA,~~CAAA2B~~,MAAA,~~CAAO3B~~,MAAM,EAAA,SAAA,CAAU;AACtCI,IAAAA,EAAE,EAAEA,EAAG;~~AACPwB~~,IAAAA,IAAI,EAAC,UAAU;~~AACfvB~~,IAAAA,OAAO,EAAEJ,QAAQ,~~GAAGa~~,cAAc,~~GAAGF~~,WAAY;~~AACjDb~~,IAAAA,SAAS,~~EAAEqB~~,kBAAmB;AAC9BG,IAAAA,GAAG,EAAED,OAAQ;~~AACbpB~~,IAAAA,IAAI,EAAEA,IAAK;AACXM,IAAAA,MAAM,EAAEA;AAAO,GAAA,CAAA,EAEdL,IAAI,~~iBACJqB~~,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;~~IAAM1B~~,SAAS,~~EAAEoB~~,0BAAM,CAAC,qCAAqC;AAAE,GAAA,eAC9DK,gBAAA,CAAAC,aAAA,CAACI,aAAM,EAAA;AAACC,IAAAA,IAAI,EAAC,OAAO;AAACC,IAAAA,GAAG,~~EAAE5B~~;GAAO,CAC5B,CACN,EACAL,QAAQ,~~EACRuB~~,cAAc,iBACdG,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;~~IAAM1B~~,SAAS,~~EAAEoB~~,0BAAM,CAAC,+BAA+B;GAAE,eACxDK,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;~~IAAM1B~~,SAAS,~~EAAEoB~~,0BAAM,CAAC,iCAAiC;AAAE,GAAA,eAC1DK,gBAAA,CAAAC,aAAA,CAACI,aAAM,EAAA;AAACE,IAAAA,GAAG,EAAEC,gBAAS;AAACF,IAAAA,IAAI,EAAC;AAAM,GAAE,CAC/B,CACD,CAEL,CACA,CAAC;AAEP;;;;"}
1	+ {"version":3,"file":"MrlMenuItemLink.js","sources":["../../../../../src/components/menu/MrlMenuItemLink/MrlMenuItemLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { linkOpen } from '@muraldevkit/ds-icons';\nimport classnames from 'classnames';\nimport { DSIconType, MrlSvg } from '../../../';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\nimport styles from '../MrlMenuItem/MrlMenuItem.module.scss';\n\nexport interface MrlMenuItemLinkProps {\n\t/** ID for associated description /\n\tariaDescribedBy?: string;\n\n\t/\n\t Children to be rendered within the menu component\n\t /\n\tchildren: React.ReactNode \| string;\n\n\t/** Class names for the menu item /\n\tclassName?: string;\n\n\t/* If the menu item is disabled /\n\tdisabled?: boolean;\n\n\t/* Href for the menu item /\n\thref: string;\n\n\t/* Icon for menu item /\n\ticon?: DSIconType;\n\n\t/* Target for links /\n\ttarget?: string;\n\n\t/* Unique ID for the menu item /\n\tid?: string;\n\n\t/* Callback to be called when the menu item is clicked /\n\tonClick?: (e: React.MouseEvent<HTMLElement>) => void;\n\n\t/* Data-qa attribute for the menu item /\n\tdataQa?: string;\n\n\t/* If the menu item is selected /\n\tselected?: boolean;\n\n\t/* Rel attr for the menu item /\n\trel?: string;\n\n\t/\n\t Enables interaction tracking for this menu item. Provide a stable, non-PII id\n\t * (e.g. 'help-menu-docs'). When omitted, the menu item emits no analytics.\n\t /\n\teventId?: string;\n}\n\n/\n MrlMenuItem component\n \n Renders a menu item to be used within the MrlMenu component\n * @param {MrlMenuItemLinkProps} props - The props for the MrlMenuItem component\n * @returns {Element} - rendered MrlMenuItem component\n */\nexport function MrlMenuItemLink({\n\tariaDescribedBy,\n\tchildren,\n\tclassName,\n\tdataQa,\n\tdisabled,\n\thref,\n\ticon,\n\tid,\n\tonClick,\n\tselected,\n\ttarget = '_self',\n\teventId,\n\t...rest\n}: MrlMenuItemLinkProps): JSX.Element {\n\tconst trackInteraction = useMrlTrackInteraction('MrlMenuItemLink', eventId);\n\n\tconst handleClick = (e: React.MouseEvent<HTMLElement>): void => {\n\t\ttrackInteraction({ action: 'click', metadata: { target } });\n\n\t\tonClick?.(e);\n\t};\n\n\tconst handleDisabled = (e: React.MouseEvent<HTMLElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t};\n\n\tconst menuItemClasses = classnames(styles['MrlMenuItem'], 'MrlMenuItem', className);\n\tconst menuTriggerClasses = classnames(styles['MrlMenuItem--item'], 'MrlMenuItem--item');\n\n\tconst isExternalLink = target === '_blank';\n\tconst linkRel = isExternalLink ? 'noopener noreferrer' : rest.rel;\n\n\treturn (\n\t\t<li className={menuItemClasses} data-qa={dataQa}>\n\t\t\t<a\n\t\t\t\t{...rest}\n\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\taria-disabled={disabled}\n\t\t\t\tdata-selected={selected}\n\t\t\t\tdata-qa={dataQa && `${dataQa}-button`}\n\t\t\t\tid={id}\n\t\t\t\trole=\"menuitem\"\n\t\t\t\tonClick={disabled ? handleDisabled : handleClick}\n\t\t\t\tclassName={menuTriggerClasses}\n\t\t\t\trel={linkRel}\n\t\t\t\thref={href}\n\t\t\t\ttarget={target}\n\t\t\t>\n\t\t\t\t{icon && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--submenuIcon-left']}>\n\t\t\t\t\t\t<MrlSvg size=\"small\" svg={icon} />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t\t{isExternalLink && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-right']}>\n\t\t\t\t\t\t<span className={styles['MrlMenuItem--item--linkOpenIcon']}>\n\t\t\t\t\t\t\t<MrlSvg svg={linkOpen} size=\"auto\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</a>\n\t\t</li>\n\t);\n}\n"],"names":["MrlMenuItemLink","_ref","ariaDescribedBy","children","className","dataQa","disabled","href","icon","id","onClick","selected","_ref$target","target","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","handleClick","e","action","metadata","handleDisabled","preventDefault","stopPropagation","menuItemClasses","classnames","styles","menuTriggerClasses","isExternalLink","linkRel","rel","React","createElement","_extends","concat","role","MrlSvg","size","svg","linkOpen"],"mappings":"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"}

package/dist/cjs/components/modal/MrlModal/MrlModal.js CHANGED Viewed

@@ -7,6 +7,7 @@ var dsIcons = require('@muraldevkit/ds-icons');
 var classnames = require('classnames');
 var MrlModal_module = require('./MrlModal.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 MrlModalContext = require('../MrlModalContext/MrlModalContext.js');
 var MrlFocusTrap = require('../../focus-trap/MrlFocusTrap/MrlFocusTrap.js');
@@ -36,7 +37,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var _excluded = ["ariaLabel", "children", "className", "closable", "loading", "size", "state", "hookClose", "preventBackgroundScroll", "attrs"];
+var _excluded = ["ariaLabel", "children", "className", "closable", "loading", "size", "state", "hookClose", "preventBackgroundScroll", "attrs", "eventId"];
 /**
  * Modal Component.
  * @param props - Modal props
@@ -60,7 +61,9 @@ var MrlModal = /*#__PURE__*/React__namespace.forwardRef(function MrlModal(props,
     preventBackgroundScroll = _props$preventBackgro === void 0 ? true : _props$preventBackgro,
     _props$attrs = props.attrs,
     attrs = _props$attrs === void 0 ? {} : _props$attrs,
+    eventId = props.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlModal', eventId);
   /**
    * Reference to the modal container.
    */
@@ -219,6 +222,24 @@ var MrlModal = /*#__PURE__*/React__namespace.forwardRef(function MrlModal(props,
     setModalState(state);
   }, [state]);
+  /**
+   * Emits open/close from the resulting state so every close path — the close
+   * button, the overlay, and the escape key — is covered by a single event.
+   */
+  var prevModalStateRef = React__namespace.useRef(undefined);
+  React__namespace.useEffect(() => {
+    var prevModalState = prevModalStateRef.current;
+    prevModalStateRef.current = modalState;
+    // a modal that mounts closed was never opened, so it has nothing to report
+    if (prevModalState === undefined && modalState !== 'open') return;
+    if (prevModalState === modalState) return;
+    trackInteraction({
+      action: modalState === 'open' ? 'open' : 'close',
+      variant: size
+    });
+  }, [modalState, size, trackInteraction]);
   /**
    * ComponentDidLoad
    */

package/dist/cjs/components/modal/MrlModal/MrlModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlModal.js","sources":["../../../../../src/components/modal/MrlModal/MrlModal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MrlComponentProps, setAttributes, getUniqueId } from '../../../utils';\nimport { defaults, ModalSize, ModalState, TransitionDuration } from '../constants';\nimport { MrlIconButton, MrlFocusTrap, MrlSvg } from '../../';\nimport { close } from '@muraldevkit/ds-icons';\nimport classNames from 'classnames';\nimport styles from './MrlModal.module.scss';\nimport { PORTAL_LAYERS } from '../../../utils/layers';\nimport './MrlModal.global.scss';\nimport { MrlModalContext } from '../MrlModalContext';\n\ninterface ModalProps extends MrlComponentProps {\n\t/*\n\t Aria label for the modal\n\t /\n\tariaLabel?: string;\n\n\t/\n\t Content of the modal\n\t /\n\tchildren: React.ReactElement \| React.ReactElement[];\n\n\t/\n\t Modal Wrapper Class\n\t /\n\tclassName?: string;\n\n\t/\n\t !!!!! WARNING: do not use this prop without an explicit requirement from the design team !!!!!\n\t \n\t Enables/disables the ability to close the modal. This prop does the following:\n\t * - removes close button\n\t * - disables clicking on the overlay to close the modal\n\t * - disables the escape key to close the modal\n\t /\n\tclosable?: boolean;\n\n\t/\n\t Tells the modal whether we are in a loading state.\n\t * This is used to disabled FocusTrap until the contents of the modal are loaded\n\t /\n\tloading?: boolean;\n\n\t/\n\t Prevents the background from scrolling when the modal is open\n\t /\n\tpreventBackgroundScroll?: boolean;\n\n\t/* The size of the modal container /\n\tsize?: ModalSize;\n\n\t/* Current state of the modal based on user interactions or permissions /\n\tstate?: ModalState;\n\n\t/* Additional function to be run when the modal closes /\n\thookClose?: (() => void) \| undefined;\n}\n\n/\n Modal Component.\n * @param props - Modal props\n * @returns an instance of the MrlModal\n /\nexport const MrlModal = React.forwardRef<HTMLDivElement, ModalProps>(\n\tfunction MrlModal(props, ref): JSX.Element {\n\t\tconst {\n\t\t\tariaLabel,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tclosable = true,\n\t\t\tloading = false,\n\t\t\tsize = defaults.size,\n\t\t\tstate = 'close',\n\t\t\thookClose = undefined,\n\t\t\tpreventBackgroundScroll = true,\n\t\t\tattrs = {},\n\t\t\t...rest\n\t\t} = props;\n\t\t/\n\t\t Reference to the modal container.\n\t\t /\n\t\tconst modalContainer = React.useRef<HTMLDivElement>(null);\n\n\t\t/\n\t\t Reference to the modal\n\t\t /\n\t\tconst modal = React.useRef<HTMLDivElement>(null);\n\n\t\tReact.useImperativeHandle<HTMLDivElement \| null, HTMLDivElement \| null>(ref, () => {\n\t\t\treturn modalContainer.current;\n\t\t});\n\n\t\t/\n\t\t Reference to the modal close button.\n\t\t /\n\t\tconst closeButton = React.useRef<HTMLButtonElement \| null>(null);\n\n\t\t/\n\t\t Reference to the modal heading element.\n\t\t /\n\t\tconst heading = React.useRef<HTMLHeadingElement \| null>(null);\n\n\t\t/\n\t\t Open/Closed state of the modal\n\t\t /\n\t\tconst [modalState, setModalState] = React.useState(() => state);\n\n\t\t/\n\t\t Sets the state of the modal for fading in and out opacity\n\t\t /\n\t\tconst [fadeState, setFadeState] = React.useState('');\n\n\t\t/\n\t\t Sets state of the modal for when it is completely hidden from the DOM\n\t\t /\n\t\tconst [displayState, setDisplayState] = React.useState('hide');\n\n\t\t/\n\t\t Sets aria-labelledby attribute on the modal for assistive technology\n\t\t /\n\t\tconst [modalLabel, setModalLabel] = React.useState<string \| null>(null);\n\n\t\t/\n\t\t Store the previous overflow value of the body before we set it to hidden\n\t\t /\n\t\tconst [prevOverflow, setPrevOverflow] = React.useState('');\n\n\t\t/\n\t\t Indicates if the content is scrollable, calculated in the MrlModalContent component\n\t\t /\n\t\tconst [scrollableContent, setScrollableContent] = React.useState({\n\t\t\thasScrollBottom: false,\n\t\t\thasScrollTop: false,\n\t\t\tisContentScrollable: false\n\t\t});\n\n\t\t/\n\t\t Modal title for context\n\t\t /\n\t\tconst [title, setTitle] = React.useState('');\n\n\t\t/\n\t\t Handles when the user clicks on the overlay to close the modal\n\t\t * @param {React.KeyEvent} e - key event data\n\t\t /\n\t\tconst handleKeyDismiss = (e: React.KeyboardEvent): void => {\n\t\t\tif (e.key === 'Escape') setModalState('close');\n\t\t};\n\n\t\t/\n\t\t Handles when the user clicks on the overlay to close the modal\n\t\t * @param {MouseEvent} e - mouse event data\n\t\t /\n\t\tconst handleDismiss = (e: React.MouseEvent): void => {\n\t\t\tif (modalContainer.current !== e.target) return;\n\n\t\t\thandleClose();\n\t\t};\n\n\t\t/\n\t\t Handler logic for closing the modal\n\t\t /\n\t\tconst handleClose = React.useCallback(() => {\n\t\t\tsetFadeState(styles['fade-out']);\n\n\t\t\t/\n\t\t\t Set timeout to allow for fade out animation to complete\n\t\t\t * before we hide the modal from the DOM and call the close hook\n\t\t\t /\n\t\t\tconst timeoutId = setTimeout(() => {\n\t\t\t\tif (modal.current) {\n\t\t\t\t\tsetDisplayState(styles['hide']);\n\t\t\t\t}\n\t\t\t\thookClose && hookClose();\n\t\t\t}, TransitionDuration);\n\n\t\t\tif (preventBackgroundScroll) document.body.style.overflow = prevOverflow;\n\n\t\t\t// cleanup setTimeout\n\t\t\treturn () => {\n\t\t\t\tclearTimeout(timeoutId);\n\t\t\t};\n\t\t}, [hookClose, prevOverflow, preventBackgroundScroll]);\n\n\t\t/\n\t\t Handler logic for opening the modal\n\t\t /\n\t\tconst handleOpen = React.useCallback(() => {\n\t\t\tsetDisplayState(styles['display']);\n\t\t\tsetFadeState(styles['fade-in']);\n\n\t\t\tif (preventBackgroundScroll) {\n\t\t\t\tsetPrevOverflow(document.body.style.overflow);\n\t\t\t\tdocument.body.style.overflow = 'hidden';\n\t\t\t}\n\t\t}, [preventBackgroundScroll]);\n\n\t\t/\n\t\t Sets the open/close state of the UI\n\t\t /\n\t\tReact.useEffect(() => {\n\t\t\tif (modalState === 'open') {\n\t\t\t\thandleOpen();\n\t\t\t} else if (modalState === 'close') {\n\t\t\t\t// setup reference so we can clean up the funciton\n\t\t\t\tconst cleanup = handleClose();\n\n\t\t\t\t// cleanup handleClose\n\t\t\t\treturn cleanup;\n\t\t\t}\n\t\t}, [modalState, handleOpen, handleClose]);\n\n\t\t/\n\t\t Sets modal state when the state prop changes\n\t\t /\n\t\tReact.useEffect(() => {\n\t\t\tsetModalState(state);\n\t\t}, [state]);\n\n\t\t/\n\t\t ComponentDidLoad\n\t\t /\n\t\tReact.useEffect(() => {\n\t\t\tconst el = modalContainer.current;\n\n\t\t\tif (el) {\n\t\t\t\t/\n\t\t\t\t Setting up aria-labelledby association for assitive technology users\n\t\t\t\t /\n\t\t\t\tif (el.getAttribute('aria-labelledby') === null) {\n\t\t\t\t\theading.current = el.querySelector('.mrl-modal-text-heading');\n\n\t\t\t\t\tif (heading.current) {\n\t\t\t\t\t\tlet id = heading.current.getAttribute('id');\n\t\t\t\t\t\tif (!id) {\n\t\t\t\t\t\t\tid = getUniqueId('mrl-modal');\n\t\t\t\t\t\t\theading.current.setAttribute('id', id);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tsetModalLabel(id);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}, []);\n\n\t\t/\n\t\t Cleanup overflow hidden when component unmounts\n\t\t /\n\t\tReact.useEffect(() => {\n\t\t\treturn () => {\n\t\t\t\tdocument.body.style.overflow = '';\n\t\t\t};\n\t\t}, []);\n\t\tconst containerClasses = classNames(\n\t\t\t'mrl-modal-container',\n\t\t\t'mrl-modal-backdrop',\n\t\t\tclassName,\n\t\t\tstyles['mrl-modal-backdrop'],\n\t\t\tfadeState,\n\t\t\tdisplayState\n\t\t);\n\n\t\tconst modalClasses = classNames(\n\t\t\t'mrl-modal',\n\t\t\tstyles['mrl-modal'],\n\t\t\tattrs.class \|\| attrs.className,\n\t\t\t{\n\t\t\t\t[`mrl-modal--${size}`]: size !== defaults.size\n\t\t\t}\n\t\t);\n\n\t\tconst closeClasses = classNames('mrl-modal-close', styles['mrl-modal-close']);\n\n\t\tconst attrConfig = {\n\t\t\t'aria-hidden': (modalState === 'close').toString(),\n\t\t\t...(ariaLabel\n\t\t\t\t? { 'aria-label': ariaLabel }\n\t\t\t\t: modalLabel !== null\n\t\t\t\t\t? { 'aria-labelledby': modalLabel }\n\t\t\t\t\t: { 'aria-label': 'Modal' }),\n\t\t\t'aria-modal': 'true',\n\t\t\trole: 'dialog'\n\t\t};\n\n\t\tdelete attrs.class;\n\t\tdelete attrs.className;\n\n\t\tconst attributes = setAttributes(attrs, attrConfig);\n\n\t\treturn (\n\t\t\t<MrlModalContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tscrollableContent,\n\t\t\t\t\tsetScrollableContent,\n\t\t\t\t\tsetTitle,\n\t\t\t\t\ttitle\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<MrlFocusTrap disabled={loading} containerRef={modalContainer}>\n\t\t\t\t\t{/eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions*/}\n\t\t\t\t\t<div\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\tid={PORTAL_LAYERS.MODAL.name}\n\t\t\t\t\t\tref={modalContainer}\n\t\t\t\t\t\t{...attributes}\n\t\t\t\t\t\tclassName={containerClasses}\n\t\t\t\t\t\t{...(closable && { onMouseDown: handleDismiss })}\n\t\t\t\t\t\t{...(closable && { onKeyDown: handleKeyDismiss })}\n\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\tstyle={{ zIndex: PORTAL_LAYERS.MODAL.zIndex }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div ref={modal} className={modalClasses}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t{closable && (\n\t\t\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\t\t\twrapperClassName={closeClasses}\n\t\t\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\t\t\t\t\tref={closeButton}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</MrlFocusTrap>\n\t\t\t</MrlModalContext.Provider>\n\t\t);\n\t}\n);\n"],"names":["MrlModal","React","forwardRef","props","ref","ariaLabel","children","className","_props$closable","closable","_props$loading","loading","_props$size","size","defaults","_props$state","state","_props$hookClose","hookClose","undefined","_props$preventBackgro","preventBackgroundScroll","_props$attrs","attrs","rest","_objectWithoutProperties","_excluded","modalContainer","useRef","modal","useImperativeHandle","current","closeButton","heading","_React$useState","useState","_React$useState2","_slicedToArray","modalState","setModalState","_React$useState3","_React$useState4","fadeState","setFadeState","_React$useState5","_React$useState6","displayState","setDisplayState","_React$useState7","_React$useState8","modalLabel","setModalLabel","_React$useState9","_React$useState0","prevOverflow","setPrevOverflow","_React$useState1","hasScrollBottom","hasScrollTop","isContentScrollable","_React$useState10","scrollableContent","setScrollableContent","_React$useState11","_React$useState12","title","setTitle","handleKeyDismiss","e","key","handleDismiss","target","handleClose","useCallback","styles","timeoutId","setTimeout","TransitionDuration","document","body","style","overflow","clearTimeout","handleOpen","useEffect","cleanup","el","getAttribute","querySelector","id","getUniqueId","setAttribute","containerClasses","classNames","modalClasses","class","concat","closeClasses","attrConfig","_objectSpread","toString","role","attributes","setAttributes","createElement","MrlModalContext","Provider","value","MrlFocusTrap","disabled","containerRef","_extends","PORTAL_LAYERS","MODAL","name","onMouseDown","onKeyDown","zIndex","MrlIconButton","wrapperClassName","icon","MrlSvg","svg","close","onClick","text","position","tipAnchor"],"mappings":"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"}
1	+ {"version":3,"file":"MrlModal.js","sources":["../../../../../src/components/modal/MrlModal/MrlModal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MrlComponentProps, setAttributes, getUniqueId } from '../../../utils';\nimport { defaults, ModalSize, ModalState, TransitionDuration } from '../constants';\nimport { MrlIconButton, MrlFocusTrap, MrlSvg } from '../../';\nimport { close } from '@muraldevkit/ds-icons';\nimport classNames from 'classnames';\nimport styles from './MrlModal.module.scss';\nimport { PORTAL_LAYERS } from '../../../utils/layers';\nimport './MrlModal.global.scss';\nimport { MrlModalContext } from '../MrlModalContext';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\ninterface ModalProps extends MrlComponentProps {\n\t/*\n\t Aria label for the modal\n\t /\n\tariaLabel?: string;\n\n\t/\n\t Content of the modal\n\t /\n\tchildren: React.ReactElement \| React.ReactElement[];\n\n\t/\n\t Modal Wrapper Class\n\t /\n\tclassName?: string;\n\n\t/\n\t !!!!! WARNING: do not use this prop without an explicit requirement from the design team !!!!!\n\t \n\t Enables/disables the ability to close the modal. This prop does the following:\n\t * - removes close button\n\t * - disables clicking on the overlay to close the modal\n\t * - disables the escape key to close the modal\n\t /\n\tclosable?: boolean;\n\n\t/\n\t Tells the modal whether we are in a loading state.\n\t * This is used to disabled FocusTrap until the contents of the modal are loaded\n\t /\n\tloading?: boolean;\n\n\t/\n\t Prevents the background from scrolling when the modal is open\n\t /\n\tpreventBackgroundScroll?: boolean;\n\n\t/* The size of the modal container /\n\tsize?: ModalSize;\n\n\t/* Current state of the modal based on user interactions or permissions /\n\tstate?: ModalState;\n\n\t/* Additional function to be run when the modal closes /\n\thookClose?: (() => void) \| undefined;\n\n\t/\n\t Enables interaction tracking for this modal. Provide a stable, non-PII id\n\t * (e.g. 'share-mural-modal'). When omitted, the modal emits no analytics.\n\t /\n\teventId?: string;\n}\n\n/\n Modal Component.\n * @param props - Modal props\n * @returns an instance of the MrlModal\n /\nexport const MrlModal = React.forwardRef<HTMLDivElement, ModalProps>(\n\tfunction MrlModal(props, ref): JSX.Element {\n\t\tconst {\n\t\t\tariaLabel,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tclosable = true,\n\t\t\tloading = false,\n\t\t\tsize = defaults.size,\n\t\t\tstate = 'close',\n\t\t\thookClose = undefined,\n\t\t\tpreventBackgroundScroll = true,\n\t\t\tattrs = {},\n\t\t\teventId,\n\t\t\t...rest\n\t\t} = props;\n\n\t\tconst trackInteraction = useMrlTrackInteraction('MrlModal', eventId);\n\t\t/\n\t\t Reference to the modal container.\n\t\t /\n\t\tconst modalContainer = React.useRef<HTMLDivElement>(null);\n\n\t\t/\n\t\t Reference to the modal\n\t\t /\n\t\tconst modal = React.useRef<HTMLDivElement>(null);\n\n\t\tReact.useImperativeHandle<HTMLDivElement \| null, HTMLDivElement \| null>(ref, () => {\n\t\t\treturn modalContainer.current;\n\t\t});\n\n\t\t/\n\t\t Reference to the modal close button.\n\t\t /\n\t\tconst closeButton = React.useRef<HTMLButtonElement \| null>(null);\n\n\t\t/\n\t\t Reference to the modal heading element.\n\t\t /\n\t\tconst heading = React.useRef<HTMLHeadingElement \| null>(null);\n\n\t\t/\n\t\t Open/Closed state of the modal\n\t\t /\n\t\tconst [modalState, setModalState] = React.useState(() => state);\n\n\t\t/\n\t\t Sets the state of the modal for fading in and out opacity\n\t\t /\n\t\tconst [fadeState, setFadeState] = React.useState('');\n\n\t\t/\n\t\t Sets state of the modal for when it is completely hidden from the DOM\n\t\t /\n\t\tconst [displayState, setDisplayState] = React.useState('hide');\n\n\t\t/\n\t\t Sets aria-labelledby attribute on the modal for assistive technology\n\t\t /\n\t\tconst [modalLabel, setModalLabel] = React.useState<string \| null>(null);\n\n\t\t/\n\t\t Store the previous overflow value of the body before we set it to hidden\n\t\t /\n\t\tconst [prevOverflow, setPrevOverflow] = React.useState('');\n\n\t\t/\n\t\t Indicates if the content is scrollable, calculated in the MrlModalContent component\n\t\t /\n\t\tconst [scrollableContent, setScrollableContent] = React.useState({\n\t\t\thasScrollBottom: false,\n\t\t\thasScrollTop: false,\n\t\t\tisContentScrollable: false\n\t\t});\n\n\t\t/\n\t\t Modal title for context\n\t\t /\n\t\tconst [title, setTitle] = React.useState('');\n\n\t\t/\n\t\t Handles when the user clicks on the overlay to close the modal\n\t\t * @param {React.KeyEvent} e - key event data\n\t\t /\n\t\tconst handleKeyDismiss = (e: React.KeyboardEvent): void => {\n\t\t\tif (e.key === 'Escape') setModalState('close');\n\t\t};\n\n\t\t/\n\t\t Handles when the user clicks on the overlay to close the modal\n\t\t * @param {MouseEvent} e - mouse event data\n\t\t /\n\t\tconst handleDismiss = (e: React.MouseEvent): void => {\n\t\t\tif (modalContainer.current !== e.target) return;\n\n\t\t\thandleClose();\n\t\t};\n\n\t\t/\n\t\t Handler logic for closing the modal\n\t\t /\n\t\tconst handleClose = React.useCallback(() => {\n\t\t\tsetFadeState(styles['fade-out']);\n\n\t\t\t/\n\t\t\t Set timeout to allow for fade out animation to complete\n\t\t\t * before we hide the modal from the DOM and call the close hook\n\t\t\t /\n\t\t\tconst timeoutId = setTimeout(() => {\n\t\t\t\tif (modal.current) {\n\t\t\t\t\tsetDisplayState(styles['hide']);\n\t\t\t\t}\n\t\t\t\thookClose && hookClose();\n\t\t\t}, TransitionDuration);\n\n\t\t\tif (preventBackgroundScroll) document.body.style.overflow = prevOverflow;\n\n\t\t\t// cleanup setTimeout\n\t\t\treturn () => {\n\t\t\t\tclearTimeout(timeoutId);\n\t\t\t};\n\t\t}, [hookClose, prevOverflow, preventBackgroundScroll]);\n\n\t\t/\n\t\t Handler logic for opening the modal\n\t\t /\n\t\tconst handleOpen = React.useCallback(() => {\n\t\t\tsetDisplayState(styles['display']);\n\t\t\tsetFadeState(styles['fade-in']);\n\n\t\t\tif (preventBackgroundScroll) {\n\t\t\t\tsetPrevOverflow(document.body.style.overflow);\n\t\t\t\tdocument.body.style.overflow = 'hidden';\n\t\t\t}\n\t\t}, [preventBackgroundScroll]);\n\n\t\t/\n\t\t Sets the open/close state of the UI\n\t\t /\n\t\tReact.useEffect(() => {\n\t\t\tif (modalState === 'open') {\n\t\t\t\thandleOpen();\n\t\t\t} else if (modalState === 'close') {\n\t\t\t\t// setup reference so we can clean up the funciton\n\t\t\t\tconst cleanup = handleClose();\n\n\t\t\t\t// cleanup handleClose\n\t\t\t\treturn cleanup;\n\t\t\t}\n\t\t}, [modalState, handleOpen, handleClose]);\n\n\t\t/\n\t\t Sets modal state when the state prop changes\n\t\t /\n\t\tReact.useEffect(() => {\n\t\t\tsetModalState(state);\n\t\t}, [state]);\n\n\t\t/\n\t\t Emits open/close from the resulting state so every close path — the close\n\t\t * button, the overlay, and the escape key — is covered by a single event.\n\t\t /\n\t\tconst prevModalStateRef = React.useRef<ModalState \| undefined>(undefined);\n\n\t\tReact.useEffect(() => {\n\t\t\tconst prevModalState = prevModalStateRef.current;\n\t\t\tprevModalStateRef.current = modalState;\n\n\t\t\t// a modal that mounts closed was never opened, so it has nothing to report\n\t\t\tif (prevModalState === undefined && modalState !== 'open') return;\n\t\t\tif (prevModalState === modalState) return;\n\n\t\t\ttrackInteraction({ action: modalState === 'open' ? 'open' : 'close', variant: size });\n\t\t}, [modalState, size, trackInteraction]);\n\n\t\t/\n\t\t ComponentDidLoad\n\t\t /\n\t\tReact.useEffect(() => {\n\t\t\tconst el = modalContainer.current;\n\n\t\t\tif (el) {\n\t\t\t\t/\n\t\t\t\t Setting up aria-labelledby association for assitive technology users\n\t\t\t\t /\n\t\t\t\tif (el.getAttribute('aria-labelledby') === null) {\n\t\t\t\t\theading.current = el.querySelector('.mrl-modal-text-heading');\n\n\t\t\t\t\tif (heading.current) {\n\t\t\t\t\t\tlet id = heading.current.getAttribute('id');\n\t\t\t\t\t\tif (!id) {\n\t\t\t\t\t\t\tid = getUniqueId('mrl-modal');\n\t\t\t\t\t\t\theading.current.setAttribute('id', id);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tsetModalLabel(id);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}, []);\n\n\t\t/\n\t\t Cleanup overflow hidden when component unmounts\n\t\t /\n\t\tReact.useEffect(() => {\n\t\t\treturn () => {\n\t\t\t\tdocument.body.style.overflow = '';\n\t\t\t};\n\t\t}, []);\n\t\tconst containerClasses = classNames(\n\t\t\t'mrl-modal-container',\n\t\t\t'mrl-modal-backdrop',\n\t\t\tclassName,\n\t\t\tstyles['mrl-modal-backdrop'],\n\t\t\tfadeState,\n\t\t\tdisplayState\n\t\t);\n\n\t\tconst modalClasses = classNames(\n\t\t\t'mrl-modal',\n\t\t\tstyles['mrl-modal'],\n\t\t\tattrs.class \|\| attrs.className,\n\t\t\t{\n\t\t\t\t[`mrl-modal--${size}`]: size !== defaults.size\n\t\t\t}\n\t\t);\n\n\t\tconst closeClasses = classNames('mrl-modal-close', styles['mrl-modal-close']);\n\n\t\tconst attrConfig = {\n\t\t\t'aria-hidden': (modalState === 'close').toString(),\n\t\t\t...(ariaLabel\n\t\t\t\t? { 'aria-label': ariaLabel }\n\t\t\t\t: modalLabel !== null\n\t\t\t\t\t? { 'aria-labelledby': modalLabel }\n\t\t\t\t\t: { 'aria-label': 'Modal' }),\n\t\t\t'aria-modal': 'true',\n\t\t\trole: 'dialog'\n\t\t};\n\n\t\tdelete attrs.class;\n\t\tdelete attrs.className;\n\n\t\tconst attributes = setAttributes(attrs, attrConfig);\n\n\t\treturn (\n\t\t\t<MrlModalContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tscrollableContent,\n\t\t\t\t\tsetScrollableContent,\n\t\t\t\t\tsetTitle,\n\t\t\t\t\ttitle\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<MrlFocusTrap disabled={loading} containerRef={modalContainer}>\n\t\t\t\t\t{/eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions*/}\n\t\t\t\t\t<div\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\tid={PORTAL_LAYERS.MODAL.name}\n\t\t\t\t\t\tref={modalContainer}\n\t\t\t\t\t\t{...attributes}\n\t\t\t\t\t\tclassName={containerClasses}\n\t\t\t\t\t\t{...(closable && { onMouseDown: handleDismiss })}\n\t\t\t\t\t\t{...(closable && { onKeyDown: handleKeyDismiss })}\n\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\tstyle={{ zIndex: PORTAL_LAYERS.MODAL.zIndex }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div ref={modal} className={modalClasses}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t{closable && (\n\t\t\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\t\t\twrapperClassName={closeClasses}\n\t\t\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\t\t\t\t\tref={closeButton}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</MrlFocusTrap>\n\t\t\t</MrlModalContext.Provider>\n\t\t);\n\t}\n);\n"],"names":["MrlModal","React","forwardRef","props","ref","ariaLabel","children","className","_props$closable","closable","_props$loading","loading","_props$size","size","defaults","_props$state","state","_props$hookClose","hookClose","undefined","_props$preventBackgro","preventBackgroundScroll","_props$attrs","attrs","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","modalContainer","useRef","modal","useImperativeHandle","current","closeButton","heading","_React$useState","useState","_React$useState2","_slicedToArray","modalState","setModalState","_React$useState3","_React$useState4","fadeState","setFadeState","_React$useState5","_React$useState6","displayState","setDisplayState","_React$useState7","_React$useState8","modalLabel","setModalLabel","_React$useState9","_React$useState0","prevOverflow","setPrevOverflow","_React$useState1","hasScrollBottom","hasScrollTop","isContentScrollable","_React$useState10","scrollableContent","setScrollableContent","_React$useState11","_React$useState12","title","setTitle","handleKeyDismiss","e","key","handleDismiss","target","handleClose","useCallback","styles","timeoutId","setTimeout","TransitionDuration","document","body","style","overflow","clearTimeout","handleOpen","useEffect","cleanup","prevModalStateRef","prevModalState","action","variant","el","getAttribute","querySelector","id","getUniqueId","setAttribute","containerClasses","classNames","modalClasses","class","concat","closeClasses","attrConfig","_objectSpread","toString","role","attributes","setAttributes","createElement","MrlModalContext","Provider","value","MrlFocusTrap","disabled","containerRef","_extends","PORTAL_LAYERS","MODAL","name","onMouseDown","onKeyDown","zIndex","MrlIconButton","wrapperClassName","icon","MrlSvg","svg","close","onClick","text","position","tipAnchor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA;AACA;AACA;AACA;AACA;AACO,IAAMA,QAAQ,gBAAGC,gBAAK,CAACC,UAAU,CACvC,SAASF,QAAQA,CAACG,KAAK,EAAEC,GAAG,EAAe;AAC1C,EAAA,IACCC,SAAS,GAYNF,KAAK,CAZRE,SAAS;IACTC,QAAQ,GAWLH,KAAK,CAXRG,QAAQ;IACRC,SAAS,GAUNJ,KAAK,CAVRI,SAAS;IAAAC,eAAA,GAUNL,KAAK,CATRM,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,eAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,eAAA;IAAAE,cAAA,GASZP,KAAK,CARRQ,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,cAAA;IAAAE,WAAA,GAQZT,KAAK,CAPRU,IAAI;AAAJA,IAAAA,IAAI,GAAAD,WAAA,KAAA,MAAA,GAAGE,kBAAQ,CAACD,IAAI,GAAAD,WAAA;IAAAG,YAAA,GAOjBZ,KAAK,CANRa,KAAK;AAALA,IAAAA,KAAK,GAAAD,YAAA,KAAA,MAAA,GAAG,OAAO,GAAAA,YAAA;IAAAE,gBAAA,GAMZd,KAAK,CALRe,SAAS;AAATA,IAAAA,SAAS,GAAAD,gBAAA,KAAA,MAAA,GAAGE,SAAS,GAAAF,gBAAA;IAAAG,qBAAA,GAKlBjB,KAAK,CAJRkB,uBAAuB;AAAvBA,IAAAA,uBAAuB,GAAAD,qBAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,qBAAA;IAAAE,YAAA,GAI3BnB,KAAK,CAHRoB,KAAK;AAALA,IAAAA,KAAK,GAAAD,YAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,YAAA;IACVE,OAAO,GAEJrB,KAAK,CAFRqB,OAAO;AACJC,IAAAA,IAAI,GAAAC,iDAAA,CACJvB,KAAK,EAAAwB,SAAA,CAAA;AAET,EAAA,IAAMC,gBAAgB,GAAGC,sCAAsB,CAAC,UAAU,EAAEL,OAAO,CAAC;AACpE;AACF;AACA;AACE,EAAA,IAAMM,cAAc,GAAG7B,gBAAK,CAAC8B,MAAM,CAAiB,IAAI,CAAC;;AAEzD;AACF;AACA;AACE,EAAA,IAAMC,KAAK,GAAG/B,gBAAK,CAAC8B,MAAM,CAAiB,IAAI,CAAC;AAEhD9B,EAAAA,gBAAK,CAACgC,mBAAmB,CAA+C7B,GAAG,EAAE,MAAM;IAClF,OAAO0B,cAAc,CAACI,OAAO;AAC9B,EAAA,CAAC,CAAC;;AAEF;AACF;AACA;AACE,EAAA,IAAMC,WAAW,GAAGlC,gBAAK,CAAC8B,MAAM,CAA2B,IAAI,CAAC;;AAEhE;AACF;AACA;AACE,EAAA,IAAMK,OAAO,GAAGnC,gBAAK,CAAC8B,MAAM,CAA4B,IAAI,CAAC;;AAE7D;AACF;AACA;EACE,IAAAM,eAAA,GAAoCpC,gBAAK,CAACqC,QAAQ,CAAC,MAAMtB,KAAK,CAAC;IAAAuB,gBAAA,GAAAC,uCAAA,CAAAH,eAAA,EAAA,CAAA,CAAA;AAAxDI,IAAAA,UAAU,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,aAAa,GAAAH,gBAAA,CAAA,CAAA,CAAA;;AAEhC;AACF;AACA;AACE,EAAA,IAAAI,gBAAA,GAAkC1C,gBAAK,CAACqC,QAAQ,CAAC,EAAE,CAAC;IAAAM,gBAAA,GAAAJ,uCAAA,CAAAG,gBAAA,EAAA,CAAA,CAAA;AAA7CE,IAAAA,SAAS,GAAAD,gBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,YAAY,GAAAF,gBAAA,CAAA,CAAA,CAAA;;AAE9B;AACF;AACA;AACE,EAAA,IAAAG,gBAAA,GAAwC9C,gBAAK,CAACqC,QAAQ,CAAC,MAAM,CAAC;IAAAU,gBAAA,GAAAR,uCAAA,CAAAO,gBAAA,EAAA,CAAA,CAAA;AAAvDE,IAAAA,YAAY,GAAAD,gBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,eAAe,GAAAF,gBAAA,CAAA,CAAA,CAAA;;AAEpC;AACF;AACA;AACE,EAAA,IAAAG,gBAAA,GAAoClD,gBAAK,CAACqC,QAAQ,CAAgB,IAAI,CAAC;IAAAc,gBAAA,GAAAZ,uCAAA,CAAAW,gBAAA,EAAA,CAAA,CAAA;AAAhEE,IAAAA,UAAU,GAAAD,gBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,aAAa,GAAAF,gBAAA,CAAA,CAAA,CAAA;;AAEhC;AACF;AACA;AACE,EAAA,IAAAG,gBAAA,GAAwCtD,gBAAK,CAACqC,QAAQ,CAAC,EAAE,CAAC;IAAAkB,gBAAA,GAAAhB,uCAAA,CAAAe,gBAAA,EAAA,CAAA,CAAA;AAAnDE,IAAAA,YAAY,GAAAD,gBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,eAAe,GAAAF,gBAAA,CAAA,CAAA,CAAA;;AAEpC;AACF;AACA;AACE,EAAA,IAAAG,gBAAA,GAAkD1D,gBAAK,CAACqC,QAAQ,CAAC;AAChEsB,MAAAA,eAAe,EAAE,KAAK;AACtBC,MAAAA,YAAY,EAAE,KAAK;AACnBC,MAAAA,mBAAmB,EAAE;AACtB,KAAC,CAAC;IAAAC,iBAAA,GAAAvB,uCAAA,CAAAmB,gBAAA,EAAA,CAAA,CAAA;AAJKK,IAAAA,iBAAiB,GAAAD,iBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,oBAAoB,GAAAF,iBAAA,CAAA,CAAA,CAAA;;AAM9C;AACF;AACA;AACE,EAAA,IAAAG,iBAAA,GAA0BjE,gBAAK,CAACqC,QAAQ,CAAC,EAAE,CAAC;IAAA6B,iBAAA,GAAA3B,uCAAA,CAAA0B,iBAAA,EAAA,CAAA,CAAA;AAArCE,IAAAA,KAAK,GAAAD,iBAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,QAAQ,GAAAF,iBAAA,CAAA,CAAA,CAAA;;AAEtB;AACF;AACA;AACA;EACE,IAAMG,gBAAgB,GAAIC,CAAsB,IAAW;IAC1D,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,EAAE9B,aAAa,CAAC,OAAO,CAAC;EAC/C,CAAC;;AAED;AACF;AACA;AACA;EACE,IAAM+B,aAAa,GAAIF,CAAmB,IAAW;AACpD,IAAA,IAAIzC,cAAc,CAACI,OAAO,KAAKqC,CAAC,CAACG,MAAM,EAAE;AAEzCC,IAAAA,WAAW,EAAE;EACd,CAAC;;AAED;AACF;AACA;AACE,EAAA,IAAMA,WAAW,GAAG1E,gBAAK,CAAC2E,WAAW,CAAC,MAAM;AAC3C9B,IAAAA,YAAY,CAAC+B,uBAAM,CAAC,UAAU,CAAC,CAAC;;AAEhC;AACH;AACA;AACA;AACG,IAAA,IAAMC,SAAS,GAAGC,UAAU,CAAC,MAAM;MAClC,IAAI/C,KAAK,CAACE,OAAO,EAAE;AAClBgB,QAAAA,eAAe,CAAC2B,uBAAM,CAAC,MAAM,CAAC,CAAC;AAChC,MAAA;MACA3D,SAAS,IAAIA,SAAS,EAAE;IACzB,CAAC,EAAE8D,4BAAkB,CAAC;IAEtB,IAAI3D,uBAAuB,EAAE4D,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG3B,YAAY;;AAExE;AACA,IAAA,OAAO,MAAM;MACZ4B,YAAY,CAACP,SAAS,CAAC;IACxB,CAAC;EACF,CAAC,EAAE,CAAC5D,SAAS,EAAEuC,YAAY,EAAEpC,uBAAuB,CAAC,CAAC;;AAEtD;AACF;AACA;AACE,EAAA,IAAMiE,UAAU,GAAGrF,gBAAK,CAAC2E,WAAW,CAAC,MAAM;AAC1C1B,IAAAA,eAAe,CAAC2B,uBAAM,CAAC,SAAS,CAAC,CAAC;AAClC/B,IAAAA,YAAY,CAAC+B,uBAAM,CAAC,SAAS,CAAC,CAAC;AAE/B,IAAA,IAAIxD,uBAAuB,EAAE;MAC5BqC,eAAe,CAACuB,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,CAAC;AAC7CH,MAAAA,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,QAAQ;AACxC,IAAA;AACD,EAAA,CAAC,EAAE,CAAC/D,uBAAuB,CAAC,CAAC;;AAE7B;AACF;AACA;EACEpB,gBAAK,CAACsF,SAAS,CAAC,MAAM;IACrB,IAAI9C,UAAU,KAAK,MAAM,EAAE;AAC1B6C,MAAAA,UAAU,EAAE;AACb,IAAA,CAAC,MAAM,IAAI7C,UAAU,KAAK,OAAO,EAAE;AAClC;AACA,MAAA,IAAM+C,OAAO,GAAGb,WAAW,EAAE;;AAE7B;AACA,MAAA,OAAOa,OAAO;AACf,IAAA;EACD,CAAC,EAAE,CAAC/C,UAAU,EAAE6C,UAAU,EAAEX,WAAW,CAAC,CAAC;;AAEzC;AACF;AACA;EACE1E,gBAAK,CAACsF,SAAS,CAAC,MAAM;IACrB7C,aAAa,CAAC1B,KAAK,CAAC;AACrB,EAAA,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;;AAEX;AACF;AACA;AACA;AACE,EAAA,IAAMyE,iBAAiB,GAAGxF,gBAAK,CAAC8B,MAAM,CAAyBZ,SAAS,CAAC;EAEzElB,gBAAK,CAACsF,SAAS,CAAC,MAAM;AACrB,IAAA,IAAMG,cAAc,GAAGD,iBAAiB,CAACvD,OAAO;IAChDuD,iBAAiB,CAACvD,OAAO,GAAGO,UAAU;;AAEtC;AACA,IAAA,IAAIiD,cAAc,KAAKvE,SAAS,IAAIsB,UAAU,KAAK,MAAM,EAAE;IAC3D,IAAIiD,cAAc,KAAKjD,UAAU,EAAE;AAEnCb,IAAAA,gBAAgB,CAAC;AAAE+D,MAAAA,MAAM,EAAElD,UAAU,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO;AAAEmD,MAAAA,OAAO,EAAE/E;AAAK,KAAC,CAAC;EACtF,CAAC,EAAE,CAAC4B,UAAU,EAAE5B,IAAI,EAAEe,gBAAgB,CAAC,CAAC;;AAExC;AACF;AACA;EACE3B,gBAAK,CAACsF,SAAS,CAAC,MAAM;AACrB,IAAA,IAAMM,EAAE,GAAG/D,cAAc,CAACI,OAAO;AAEjC,IAAA,IAAI2D,EAAE,EAAE;AACP;AACJ;AACA;MACI,IAAIA,EAAE,CAACC,YAAY,CAAC,iBAAiB,CAAC,KAAK,IAAI,EAAE;QAChD1D,OAAO,CAACF,OAAO,GAAG2D,EAAE,CAACE,aAAa,CAAC,yBAAyB,CAAC;QAE7D,IAAI3D,OAAO,CAACF,OAAO,EAAE;UACpB,IAAI8D,EAAE,GAAG5D,OAAO,CAACF,OAAO,CAAC4D,YAAY,CAAC,IAAI,CAAC;UAC3C,IAAI,CAACE,EAAE,EAAE;AACRA,YAAAA,EAAE,GAAGC,yBAAW,CAAC,WAAW,CAAC;YAC7B7D,OAAO,CAACF,OAAO,CAACgE,YAAY,CAAC,IAAI,EAAEF,EAAE,CAAC;AACvC,UAAA;UAEA1C,aAAa,CAAC0C,EAAE,CAAC;AAClB,QAAA;AACD,MAAA;AACD,IAAA;EACD,CAAC,EAAE,EAAE,CAAC;;AAEN;AACF;AACA;EACE/F,gBAAK,CAACsF,SAAS,CAAC,MAAM;AACrB,IAAA,OAAO,MAAM;AACZN,MAAAA,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,EAAE;IAClC,CAAC;EACF,CAAC,EAAE,EAAE,CAAC;AACN,EAAA,IAAMe,gBAAgB,GAAGC,2BAAU,CAClC,qBAAqB,EACrB,oBAAoB,EACpB7F,SAAS,EACTsE,uBAAM,CAAC,oBAAoB,CAAC,EAC5BhC,SAAS,EACTI,YACD,CAAC;AAED,EAAA,IAAMoD,YAAY,GAAGD,2BAAU,CAC9B,WAAW,EACXvB,uBAAM,CAAC,WAAW,CAAC,EACnBtD,KAAK,CAAC+E,KAAK,IAAI/E,KAAK,CAAChB,SAAS,EAC9B;AACC,IAAA,CAAA,aAAA,CAAAgG,MAAA,CAAe1F,IAAI,IAAKA,IAAI,KAAKC,kBAAQ,CAACD;AAC3C,GACD,CAAC;EAED,IAAM2F,YAAY,GAAGJ,2BAAU,CAAC,iBAAiB,EAAEvB,uBAAM,CAAC,iBAAiB,CAAC,CAAC;AAE7E,EAAA,IAAM4B,UAAU,GAAAC,uCAAA,CAAAA,uCAAA,CAAA;AACf,IAAA,aAAa,EAAE,CAACjE,UAAU,KAAK,OAAO,EAAEkE,QAAQ;AAAE,GAAA,EAC9CtG,SAAS,GACV;AAAE,IAAA,YAAY,EAAEA;AAAU,GAAC,GAC3BgD,UAAU,KAAK,IAAI,GAClB;AAAE,IAAA,iBAAiB,EAAEA;AAAW,GAAC,GACjC;AAAE,IAAA,YAAY,EAAE;GAAS,CAAA,EAAA,EAAA,EAAA;AAC7B,IAAA,YAAY,EAAE,MAAM;AACpBuD,IAAAA,IAAI,EAAE;GAAQ,CACd;EAED,OAAOrF,KAAK,CAAC+E,KAAK;EAClB,OAAO/E,KAAK,CAAChB,SAAS;AAEtB,EAAA,IAAMsG,UAAU,GAAGC,2BAAa,CAACvF,KAAK,EAAEkF,UAAU,CAAC;AAEnD,EAAA,oBACCxG,gBAAA,CAAA8G,aAAA,CAACC,+BAAe,CAACC,QAAQ,EAAA;AACxBC,IAAAA,KAAK,EAAE;MACNlD,iBAAiB;MACjBC,oBAAoB;MACpBI,QAAQ;AACRD,MAAAA;AACD;AAAE,GAAA,eAEFnE,gBAAA,CAAA8G,aAAA,CAACI,yBAAY,EAAA;AAACC,IAAAA,QAAQ,EAAEzG,OAAQ;AAAC0G,IAAAA,YAAY,EAAEvF;AAAe,GAAA,eAE7D7B,gBAAA,CAAA8G,aAAA,CAAA,KAAA,EAAAO,iCAAA,KACK7F,IAAI,EAAA;AACRuE,IAAAA,EAAE,EAAEuB,mBAAa,CAACC,KAAK,CAACC,IAAK;AAC7BrH,IAAAA,GAAG,EAAE0B;AAAe,GAAA,EAChB+E,UAAU,EAAA;AACdtG,IAAAA,SAAS,EAAE4F;AAAiB,GAAA,EACvB1F,QAAQ,IAAI;AAAEiH,IAAAA,WAAW,EAAEjD;GAAe,EAC1ChE,QAAQ,IAAI;AAAEkH,IAAAA,SAAS,EAAErD;GAAkB,EAAA;AAChDsC,IAAAA,IAAI,EAAC,QAAQ;AACbzB,IAAAA,KAAK,EAAE;AAAEyC,MAAAA,MAAM,EAAEL,mBAAa,CAACC,KAAK,CAACI;AAAO;GAAE,CAAA,eAE9C3H,gBAAA,CAAA8G,aAAA,CAAA,KAAA,EAAA;AAAK3G,IAAAA,GAAG,EAAE4B,KAAM;AAACzB,IAAAA,SAAS,EAAE8F;GAAa,EACvC/F,QAAQ,EACRG,QAAQ,iBACRR,gBAAA,CAAA8G,aAAA,CAACc,2BAAa,EAAA;AACbC,IAAAA,gBAAgB,EAAEtB,YAAa;AAC/BuB,IAAAA,IAAI,eAAE9H,gBAAA,CAAA8G,aAAA,CAACiB,aAAM,EAAA;AAACC,MAAAA,GAAG,EAAEC;AAAM,KAAE,CAAE;AAC7BC,IAAAA,OAAO,EAAExD,WAAY;AACrByD,IAAAA,IAAI,EAAC,OAAO;AACZpH,IAAAA,KAAK,EAAC,SAAS;AACfqH,IAAAA,QAAQ,EAAC,QAAQ;AACjBC,IAAAA,SAAS,EAAC,QAAQ;AAClBlI,IAAAA,GAAG,EAAE+B;AAAY,GACjB,CAEE,CACD,CACQ,CACW,CAAC;AAE7B,CACD;;;;"}

package/dist/cjs/components/notification/MrlBlockNotification/MrlBlockNotification.js CHANGED Viewed

@@ -6,6 +6,7 @@ var dsIcons = require('@muraldevkit/ds-icons');
 var classnames = require('classnames');
 var constants = require('../constants.js');
 var MrlBlockNotification_module = require('./MrlBlockNotification.module.scss.js');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var useAutoClose = require('../../../hooks/useAutoClose/useAutoClose.js');
 var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
 var MrlTextHeading = require('../../text/MrlTextHeading/MrlTextHeading.js');
@@ -35,7 +36,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var _excluded = ["attrs", "autoCloseAfterMs", "children", "className", "closeQa", "cta", "kind", "dismissible", "heading", "hookClose", "hookOpen", "customIcon", "level", "message", "onAutoClose", "scope", "shouldAutoClose", "state"];
+var _excluded = ["attrs", "autoCloseAfterMs", "children", "className", "closeQa", "cta", "kind", "dismissible", "heading", "hookClose", "hookOpen", "customIcon", "level", "message", "onAutoClose", "scope", "shouldAutoClose", "state", "eventId"];
 /**
  * Configuration options for icons
  */
@@ -76,7 +77,9 @@ var MrlBlockNotification = props => {
     shouldAutoClose = _props$shouldAutoClos === void 0 ? false : _props$shouldAutoClos,
     _props$state = props.state,
     state = _props$state === void 0 ? constants.defaults.state : _props$state,
+    eventId = props.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlBlockNotification', eventId);
   /**
    * Sets the open/close state of the notification
@@ -137,6 +140,29 @@ var MrlBlockNotification = props => {
     }
   }, [notificationState, handleClose, handleOpen, autoClosed]);
+  /**
+   * Emits open/close from the resulting state so the dismiss button, the state prop
+   * and auto-close are all covered by a single event.
+   */
+  var prevNotificationStateRef = React__namespace.useRef(undefined);
+  React__namespace.useEffect(() => {
+    var isOpen = notificationState === 'open' && autoClosed !== true;
+    var nextState = isOpen ? 'open' : 'close';
+    var prevNotificationState = prevNotificationStateRef.current;
+    prevNotificationStateRef.current = nextState;
+    // a notification that mounts closed was never shown, so it has nothing to report
+    if (prevNotificationState === undefined && nextState !== 'open') return;
+    if (prevNotificationState === nextState) return;
+    trackInteraction({
+      action: isOpen ? 'open' : 'close',
+      metadata: {
+        autoClosed: autoClosed === true
+      },
+      variant: kind
+    });
+  }, [notificationState, autoClosed, kind, trackInteraction]);
   /**
    * Updates the internal state of the component when the state prop changes
    */

package/dist/cjs/components/notification/MrlBlockNotification/MrlBlockNotification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlBlockNotification.js","sources":["../../../../../src/components/notification/MrlBlockNotification/MrlBlockNotification.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, close, error, info, warning } from '@muraldevkit/ds-icons';\nimport classNames from 'classnames';\nimport { AttrsObject, setAttributes } from '../../../utils';\nimport {\n\tdefaults,\n\tNotificationKind,\n\tNotificationScope,\n\tNotificationState,\n\tNotificationLevel,\n\tTransitionDuration\n} from '../constants';\nimport { DSIconType, MrlIconButton, MrlSvg, MrlTextHeading } from '../..';\n\nimport styles from './MrlBlockNotification.module.scss';\nimport './MrlBlockNotification.global.scss';\nimport { useAutoClose } from '../../../hooks/useAutoClose';\n\nexport interface MrlBlockNotificationProps {\n\t/*\n\t Block Notification Wrapper Class\n\t /\n\tclassName?: string;\n\n\t/\n\t QA attribute for close button to allow tests to find the element easier\n\t /\n\tcloseQa?: string;\n\n\t/\n\t Children\n\t \n\t IMPORTANT! — Make sure to set shouldAutoClose: false if children of this component\n\t * contain interactive elements. Autoclosing interactive elements is an accessibility\n\t * anti-pattern and should be avoided.\n\t /\n\tchildren?: React.ReactNode;\n\n\t/\n\t Adds CTA button to the notification\n\t /\n\tcta?: React.ReactElement;\n\n\t/\n\t The kind of notification to display.\n\t \n\t Examples: warning, error, info, success\n\t /\n\tkind?: NotificationKind;\n\n\t/\n\t A custom DS icon.\n\t /\n\tcustomIcon?: DSIconType;\n\n\t/\n\t Sets header text for notification\n\t /\n\theading?: string;\n\n\t/\n\t Adds a close button to notificaiton if true\n\t /\n\tdismissible?: boolean;\n\n\t/\n\t Sets the primary content for the notification\n\t /\n\tmessage?: React.ReactNode;\n\n\t/\n\t Sets the scope of the notification\n\t /\n\tscope?: NotificationScope;\n\n\t/\n\t Open/Close state of the notification\n\t /\n\tstate?: NotificationState;\n\n\t/\n\t Open notification callback\n\t * @returns {void}\n\t /\n\thookOpen?: () => void;\n\n\t/\n\t Close notification callback\n\t * @returns {void}\n\t /\n\thookClose?: () => void;\n\n\t/\n\t Sets the header level\n\t * Example output: h1, h2, h3, h4\n\t /\n\tlevel?: NotificationLevel;\n\n\t/\n\t Attributes that are applied to the component during the initial render.\n\t \n\t Example usage: html attributes, custom data attributes (data-qa), aria\n\t /\n\tattrs?: AttrsObject;\n\n\t/\n\t When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern) (see useAutoClose)\n\t /\n\tshouldAutoClose?: Parameters<useAutoClose>[0];\n\n\t/\n\t Delay in milliseconds before the component closes (see useAutoClose)\n\t /\n\tautoCloseAfterMs?: Parameters<useAutoClose>[1];\n\n\t/\n\t Callback to be called when component closes (see useAutoClose)\n\t /\n\tonAutoClose?: Parameters<useAutoClose>[2];\n}\n\n/\n Configuration options for icons\n /\nconst iconOptions: Record<string, DSIconType> = {\n\terror,\n\tinfo,\n\tsuccess: check,\n\twarning\n};\n\n/\n Block Notification Component\n * @param props - Component props\n * @returns {Element} Block Notification\n /\nexport const MrlBlockNotification = (props: MrlBlockNotificationProps): JSX.Element => {\n\tconst {\n\t\tattrs,\n\t\tautoCloseAfterMs,\n\t\tchildren,\n\t\tclassName,\n\t\tcloseQa,\n\t\tcta,\n\t\tkind = defaults.kind,\n\t\tdismissible = defaults.dismissible,\n\t\theading,\n\t\thookClose,\n\t\thookOpen,\n\t\tcustomIcon,\n\t\tlevel = defaults.level,\n\t\tmessage,\n\t\tonAutoClose,\n\t\tscope = defaults.scope,\n\t\tshouldAutoClose = false,\n\t\tstate = defaults.state,\n\t\t...rest\n\t} = props;\n\n\t/\n\t Sets the open/close state of the notification\n\t /\n\tconst [notificationState, setNotificationState] = React.useState<NotificationState>(\n\t\tdefaults.state\n\t);\n\n\t/\n\t Reference to the notification\n\t /\n\tconst notification = React.useRef<HTMLDivElement>(null);\n\n\t/\n\t Handles logic for opening the notification\n\t /\n\tconst handleOpen = React.useCallback(() => {\n\t\tsetNotificationState('open');\n\n\t\tsetTimeout(() => {\n\t\t\thookOpen && hookOpen();\n\t\t}, TransitionDuration);\n\t}, [hookOpen]);\n\n\t/\n\t It is an accessibility anti-pattern to auto-close an interactive element.\n\t * Both the dismiss button and cta are interactive elements.\n\t /\n\tconst isInteractiveElementPresent = dismissible \|\| cta;\n\t/\n\t Controls auto-close behavior of the notification\n\t /\n\tconst [autoClosed] = useAutoClose(\n\t\tshouldAutoClose && !isInteractiveElementPresent,\n\t\tautoCloseAfterMs,\n\t\tonAutoClose\n\t);\n\n\t/\n\t Handles logic for closing the notification\n\t /\n\tconst handleClose = React.useCallback(() => {\n\t\tsetNotificationState('close');\n\n\t\tsetTimeout(() => {\n\t\t\t// add class mrl-is--closed\n\t\t\tnotification.current?.classList.add('mrl-is--closed');\n\t\t\thookClose && hookClose();\n\t\t}, TransitionDuration);\n\t}, [hookClose]);\n\n\t/\n\t Toggles the open/closed state based on the state of the component\n\t /\n\tReact.useEffect(() => {\n\t\tif (notificationState === 'open' && autoClosed !== true) {\n\t\t\thandleOpen();\n\t\t} else {\n\t\t\thandleClose();\n\t\t}\n\t}, [notificationState, handleClose, handleOpen, autoClosed]);\n\n\t/\n\t Updates the internal state of the component when the state prop changes\n\t /\n\tReact.useEffect(() => {\n\t\tsetNotificationState(state \|\| defaults.state);\n\t}, [state]);\n\n\t/\n\t Renders a custom icon or a default icon if the kind supports it.\n\t * @returns ReactElement \| null\n\t /\n\tconst renderIcon = (): React.ReactElement \| null => {\n\t\tconst notificationIcon = typeof customIcon === 'undefined' ? iconOptions[kind] : customIcon;\n\n\t\t// It could be undefined if the kind doesn't support a default icon.\n\t\tif (!notificationIcon) return null;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(styles['mrl-blockNotification-icon'], 'mrl-blockNotification-icon')}\n\t\t\t>\n\t\t\t\t<MrlSvg size=\"small\" svg={notificationIcon} />\n\t\t\t</div>\n\t\t);\n\t};\n\n\tconst attributes = setAttributes(attrs, {\n\t\t'aria-hidden': (state === 'close').toString(),\n\n\t\t// @todo need to determine if we want errors to always be assertive or\n\t\t// if we want an easier ability to overwrite than the attrs object.\n\t\t'aria-live': kind === 'error' ? 'assertive' : 'polite',\n\t\trole: 'status'\n\t});\n\n\tconst allClasses = classNames(\n\t\tstyles['mrl-blockNotification'],\n\t\tclassName,\n\t\t'mrl-blockNotification',\n\t\t{\n\t\t\t[styles['mrl-blockNotification--dismissible']]: Boolean(dismissible),\n\t\t\t'mrl-is--transitioning': notificationState === 'close'\n\t\t}\n\t);\n\n\tconst closeButtonKind = React.useMemo(() => {\n\t\treturn kind === 'warning' ? 'ghost' : 'ghost-inverse';\n\t}, [kind]);\n\n\tdelete attributes.class;\n\tdelete attributes.className;\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={allClasses}\n\t\t\t{...attributes}\n\t\t\tdata-kind={kind}\n\t\t\tdata-scope={scope}\n\t\t\tref={notification}\n\t\t>\n\t\t\t{renderIcon()}\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\tstyles['mrl-blockNotification-message'],\n\t\t\t\t\t'mrl-blockNotification-message'\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{/ // to do, add configurable header based on level, when MrlText is completed */}\n\t\t\t\t{heading && (\n\t\t\t\t\t<MrlTextHeading\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles['mrl-blockNotification-heading'],\n\t\t\t\t\t\t\t'mrl-blockNotification-heading'\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tkind=\"title\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tlevel={level}\n\t\t\t\t\t\ttext={heading}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{message && (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles['mrl-blockNotification-text'],\n\t\t\t\t\t\t\t'mrl-blockNotification-text'\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{message}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t{children && <>{children}</>}\n\t\t\t</div>\n\t\t\t{cta && <div className={classNames('cta', styles['cta'])}>{cta}</div>}\n\t\t\t{dismissible && (\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tattrs={{\n\t\t\t\t\t\t'data-qa': closeQa\n\t\t\t\t\t}}\n\t\t\t\t\ticon={<MrlSvg svg={close} size=\"small\" />}\n\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tkind={closeButtonKind}\n\t\t\t\t\tstate=\"default\"\n\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\twrapperClassName={classNames(\n\t\t\t\t\t\tstyles['mrl-blockNotification-close-wrapper'],\n\t\t\t\t\t\t'mrl-blockNotification-close-wrapper'\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["iconOptions","error","info","success","check","warning","MrlBlockNotification","props","attrs","autoCloseAfterMs","children","className","closeQa","cta","_props$kind","kind","defaults","_props$dismissible","dismissible","heading","hookClose","hookOpen","customIcon","_props$level","level","message","onAutoClose","_props$scope","scope","_props$shouldAutoClos","shouldAutoClose","_props$state","state","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","notificationState","setNotificationState","notification","useRef","handleOpen","useCallback","setTimeout","TransitionDuration","isInteractiveElementPresent","_useAutoClose","useAutoClose","_useAutoClose2","autoClosed","handleClose","_notification$current","current","classList","add","useEffect","renderIcon","notificationIcon","createElement","classNames","styles","MrlSvg","size","svg","attributes","setAttributes","toString","role","allClasses","Boolean","closeButtonKind","useMemo","class","_extends","ref","MrlTextHeading","text","Fragment","MrlIconButton","icon","close","onClick","position","tipAnchor","wrapperClassName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyHA;AACA;AACA;AACA,IAAMA,WAAuC,GAAG;SAC/CC,aAAK;QACLC,YAAI;AACJC,EAAAA,OAAO,EAAEC,aAAK;AACdC,WAAAA;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACO,IAAMC,oBAAoB,GAAIC,KAAgC,IAAkB;AACtF,EAAA,IACCC,KAAK,GAmBFD,KAAK,CAnBRC,KAAK;IACLC,gBAAgB,GAkBbF,KAAK,CAlBRE,gBAAgB;IAChBC,QAAQ,GAiBLH,KAAK,CAjBRG,QAAQ;IACRC,SAAS,GAgBNJ,KAAK,CAhBRI,SAAS;IACTC,OAAO,GAeJL,KAAK,CAfRK,OAAO;IACPC,GAAG,GAcAN,KAAK,CAdRM,GAAG;IAAAC,WAAA,GAcAP,KAAK,CAbRQ,IAAI;AAAJA,IAAAA,IAAI,GAAAD,WAAA,KAAA,MAAA,GAAGE,kBAAQ,CAACD,IAAI,GAAAD,WAAA;IAAAG,kBAAA,GAajBV,KAAK,CAZRW,WAAW;AAAXA,IAAAA,WAAW,GAAAD,kBAAA,KAAA,MAAA,GAAGD,kBAAQ,CAACE,WAAW,GAAAD,kBAAA;IAClCE,OAAO,GAWJZ,KAAK,CAXRY,OAAO;IACPC,SAAS,GAUNb,KAAK,CAVRa,SAAS;IACTC,QAAQ,GASLd,KAAK,CATRc,QAAQ;IACRC,UAAU,GAQPf,KAAK,CARRe,UAAU;IAAAC,YAAA,GAQPhB,KAAK,CAPRiB,KAAK;AAALA,IAAAA,KAAK,GAAAD,YAAA,KAAA,MAAA,GAAGP,kBAAQ,CAACQ,KAAK,GAAAD,YAAA;IACtBE,OAAO,GAMJlB,KAAK,CANRkB,OAAO;IACPC,WAAW,GAKRnB,KAAK,CALRmB,WAAW;IAAAC,YAAA,GAKRpB,KAAK,CAJRqB,KAAK;AAALA,IAAAA,KAAK,GAAAD,YAAA,KAAA,MAAA,GAAGX,kBAAQ,CAACY,KAAK,GAAAD,YAAA;IAAAE,qBAAA,GAInBtB,KAAK,CAHRuB,eAAe;AAAfA,IAAAA,eAAe,GAAAD,qBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,qBAAA;IAAAE,YAAA,GAGpBxB,KAAK,CAFRyB,KAAK;AAALA,IAAAA,KAAK,GAAAD,YAAA,KAAA,MAAA,GAAGf,kBAAQ,CAACgB,KAAK,GAAAD,YAAA;AACnBE,IAAAA,IAAI,GAAAC,iDAAA,CACJ3B,KAAK,EAAA4B,SAAA,CAAA;;AAET;AACD;AACA;EACC,IAAAC,eAAA,GAAkDC,gBAAK,CAACC,QAAQ,CAC/DtB,kBAAQ,CAACgB,KACV,CAAC;IAAAO,gBAAA,GAAAC,uCAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAFMK,IAAAA,iBAAiB,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,oBAAoB,GAAAH,gBAAA,CAAA,CAAA,CAAA;;AAI9C;AACD;AACA;AACC,EAAA,IAAMI,YAAY,GAAGN,gBAAK,CAACO,MAAM,CAAiB,IAAI,CAAC;;AAEvD;AACD;AACA;AACC,EAAA,IAAMC,UAAU,GAAGR,gBAAK,CAACS,WAAW,CAAC,MAAM;IAC1CJ,oBAAoB,CAAC,MAAM,CAAC;AAE5BK,IAAAA,UAAU,CAAC,MAAM;MAChB1B,QAAQ,IAAIA,QAAQ,EAAE;IACvB,CAAC,EAAE2B,4BAAkB,CAAC;AACvB,EAAA,CAAC,EAAE,CAAC3B,QAAQ,CAAC,CAAC;;AAEd;AACD;AACA;AACA;AACC,EAAA,IAAM4B,2BAA2B,GAAG/B,WAAW,IAAIL,GAAG;AACtD;AACD;AACA;AACC,EAAA,IAAAqC,aAAA,GAAqBC,yBAAY,CAChCrB,eAAe,IAAI,CAACmB,2BAA2B,EAC/CxC,gBAAgB,EAChBiB,WACD,CAAC;IAAA0B,cAAA,GAAAZ,uCAAA,CAAAU,aAAA,EAAA,CAAA,CAAA;AAJMG,IAAAA,UAAU,GAAAD,cAAA,CAAA,CAAA,CAAA;;AAMjB;AACD;AACA;AACC,EAAA,IAAME,WAAW,GAAGjB,gBAAK,CAACS,WAAW,CAAC,MAAM;IAC3CJ,oBAAoB,CAAC,OAAO,CAAC;AAE7BK,IAAAA,UAAU,CAAC,MAAM;AAAA,MAAA,IAAAQ,qBAAA;AAChB;AACA,MAAA,CAAAA,qBAAA,GAAAZ,YAAY,CAACa,OAAO,MAAA,IAAA,IAAAD,qBAAA,KAAA,MAAA,GAAA,MAAA,GAApBA,qBAAA,CAAsBE,SAAS,CAACC,GAAG,CAAC,gBAAgB,CAAC;MACrDtC,SAAS,IAAIA,SAAS,EAAE;IACzB,CAAC,EAAE4B,4BAAkB,CAAC;AACvB,EAAA,CAAC,EAAE,CAAC5B,SAAS,CAAC,CAAC;;AAEf;AACD;AACA;EACCiB,gBAAK,CAACsB,SAAS,CAAC,MAAM;AACrB,IAAA,IAAIlB,iBAAiB,KAAK,MAAM,IAAIY,UAAU,KAAK,IAAI,EAAE;AACxDR,MAAAA,UAAU,EAAE;AACb,IAAA,CAAC,MAAM;AACNS,MAAAA,WAAW,EAAE;AACd,IAAA;EACD,CAAC,EAAE,CAACb,iBAAiB,EAAEa,WAAW,EAAET,UAAU,EAAEQ,UAAU,CAAC,CAAC;;AAE5D;AACD;AACA;EACChB,gBAAK,CAACsB,SAAS,CAAC,MAAM;AACrBjB,IAAAA,oBAAoB,CAACV,KAAK,IAAIhB,kBAAQ,CAACgB,KAAK,CAAC;AAC9C,EAAA,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;;AAEX;AACD;AACA;AACA;EACC,IAAM4B,UAAU,GAAGA,MAAiC;AACnD,IAAA,IAAMC,gBAAgB,GAAG,OAAOvC,UAAU,KAAK,WAAW,GAAGtB,WAAW,CAACe,IAAI,CAAC,GAAGO,UAAU;;AAE3F;AACA,IAAA,IAAI,CAACuC,gBAAgB,EAAE,OAAO,IAAI;IAElC,oBACCxB,gBAAA,CAAAyB,aAAA,CAAA,KAAA,EAAA;MACCnD,SAAS,EAAEoD,2BAAU,CAACC,mCAAM,CAAC,4BAA4B,CAAC,EAAE,4BAA4B;AAAE,KAAA,eAE1F3B,gBAAA,CAAAyB,aAAA,CAACG,aAAM,EAAA;AAACC,MAAAA,IAAI,EAAC,OAAO;AAACC,MAAAA,GAAG,EAAEN;AAAiB,KAAE,CACzC,CAAC;EAER,CAAC;AAED,EAAA,IAAMO,UAAU,GAAGC,2BAAa,CAAC7D,KAAK,EAAE;IACvC,aAAa,EAAE,CAACwB,KAAK,KAAK,OAAO,EAAEsC,QAAQ,EAAE;AAE7C;AACA;AACA,IAAA,WAAW,EAAEvD,IAAI,KAAK,OAAO,GAAG,WAAW,GAAG,QAAQ;AACtDwD,IAAAA,IAAI,EAAE;AACP,GAAC,CAAC;AAEF,EAAA,IAAMC,UAAU,GAAGT,2BAAU,CAC5BC,mCAAM,CAAC,uBAAuB,CAAC,EAC/BrD,SAAS,EACT,uBAAuB,EACvB;IACC,CAACqD,mCAAM,CAAC,oCAAoC,CAAC,GAAGS,OAAO,CAACvD,WAAW,CAAC;IACpE,uBAAuB,EAAEuB,iBAAiB,KAAK;AAChD,GACD,CAAC;AAED,EAAA,IAAMiC,eAAe,GAAGrC,gBAAK,CAACsC,OAAO,CAAC,MAAM;AAC3C,IAAA,OAAO5D,IAAI,KAAK,SAAS,GAAG,OAAO,GAAG,eAAe;AACtD,EAAA,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,OAAOqD,UAAU,CAACQ,KAAK;EACvB,OAAOR,UAAU,CAACzD,SAAS;AAE3B,EAAA,oBACC0B,gBAAA,CAAAyB,aAAA,CAAA,KAAA,EAAAe,iCAAA,KACK5C,IAAI,EAAA;AACRtB,IAAAA,SAAS,EAAE6D;AAAW,GAAA,EAClBJ,UAAU,EAAA;AACd,IAAA,WAAA,EAAWrD,IAAK;AAChB,IAAA,YAAA,EAAYa,KAAM;AAClBkD,IAAAA,GAAG,EAAEnC;AAAa,GAAA,CAAA,EAEjBiB,UAAU,EAAE,eACbvB,gBAAA,CAAAyB,aAAA,CAAA,KAAA,EAAA;IACCnD,SAAS,EAAEoD,2BAAU,CACpBC,mCAAM,CAAC,+BAA+B,CAAC,EACvC,+BACD;AAAE,GAAA,EAGD7C,OAAO,iBACPkB,gBAAA,CAAAyB,aAAA,CAACiB,6BAAc,EAAA;IACdpE,SAAS,EAAEoD,2BAAU,CACpBC,mCAAM,CAAC,+BAA+B,CAAC,EACvC,+BACD,CAAE;AACFjD,IAAAA,IAAI,EAAC,OAAO;AACZmD,IAAAA,IAAI,EAAC,OAAO;AACZ1C,IAAAA,KAAK,EAAEA,KAAM;AACbwD,IAAAA,IAAI,EAAE7D;AAAQ,GACd,CACD,EACAM,OAAO,iBACPY,gBAAA,CAAAyB,aAAA,CAAA,GAAA,EAAA;IACCnD,SAAS,EAAEoD,2BAAU,CACpBC,mCAAM,CAAC,4BAA4B,CAAC,EACpC,4BACD;GAAE,EAEDvC,OACC,CACH,EACAf,QAAQ,iBAAI2B,gBAAA,CAAAyB,aAAA,CAAAzB,gBAAA,CAAA4C,QAAA,EAAA,IAAA,EAAGvE,QAAW,CACvB,CAAC,EACLG,GAAG,iBAAIwB,gBAAA,CAAAyB,aAAA,CAAA,KAAA,EAAA;IAAKnD,SAAS,EAAEoD,2BAAU,CAAC,KAAK,EAAEC,mCAAM,CAAC,KAAK,CAAC;GAAE,EAAEnD,GAAS,CAAC,EACpEK,WAAW,iBACXmB,gBAAA,CAAAyB,aAAA,CAACoB,2BAAa,EAAA;AACb1E,IAAAA,KAAK,EAAE;AACN,MAAA,SAAS,EAAEI;KACV;AACFuE,IAAAA,IAAI,eAAE9C,gBAAA,CAAAyB,aAAA,CAACG,aAAM,EAAA;AAACE,MAAAA,GAAG,EAAEiB,aAAM;AAAClB,MAAAA,IAAI,EAAC;AAAO,KAAE,CAAE;AAC1CmB,IAAAA,OAAO,EAAE/B,WAAY;AACrB0B,IAAAA,IAAI,EAAC,OAAO;AACZd,IAAAA,IAAI,EAAC,OAAO;AACZnD,IAAAA,IAAI,EAAE2D,eAAgB;AACtB1C,IAAAA,KAAK,EAAC,SAAS;AACfsD,IAAAA,QAAQ,EAAC,QAAQ;AACjBC,IAAAA,SAAS,EAAC,QAAQ;IAClBC,gBAAgB,EAAEzB,2BAAU,CAC3BC,mCAAM,CAAC,qCAAqC,CAAC,EAC7C,qCACD;AAAE,GACF,CAEE,CAAC;AAER;;;;"}
1	+ {"version":3,"file":"MrlBlockNotification.js","sources":["../../../../../src/components/notification/MrlBlockNotification/MrlBlockNotification.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, close, error, info, warning } from '@muraldevkit/ds-icons';\nimport classNames from 'classnames';\nimport { AttrsObject, setAttributes } from '../../../utils';\nimport {\n\tdefaults,\n\tNotificationKind,\n\tNotificationScope,\n\tNotificationState,\n\tNotificationLevel,\n\tTransitionDuration\n} from '../constants';\nimport { DSIconType, MrlIconButton, MrlSvg, MrlTextHeading } from '../..';\n\nimport styles from './MrlBlockNotification.module.scss';\nimport './MrlBlockNotification.global.scss';\nimport { useAutoClose } from '../../../hooks/useAutoClose';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nexport interface MrlBlockNotificationProps {\n\t/*\n\t Block Notification Wrapper Class\n\t /\n\tclassName?: string;\n\n\t/\n\t QA attribute for close button to allow tests to find the element easier\n\t /\n\tcloseQa?: string;\n\n\t/\n\t Children\n\t \n\t IMPORTANT! — Make sure to set shouldAutoClose: false if children of this component\n\t * contain interactive elements. Autoclosing interactive elements is an accessibility\n\t * anti-pattern and should be avoided.\n\t /\n\tchildren?: React.ReactNode;\n\n\t/\n\t Adds CTA button to the notification\n\t /\n\tcta?: React.ReactElement;\n\n\t/\n\t The kind of notification to display.\n\t \n\t Examples: warning, error, info, success\n\t /\n\tkind?: NotificationKind;\n\n\t/\n\t A custom DS icon.\n\t /\n\tcustomIcon?: DSIconType;\n\n\t/\n\t Sets header text for notification\n\t /\n\theading?: string;\n\n\t/\n\t Adds a close button to notificaiton if true\n\t /\n\tdismissible?: boolean;\n\n\t/\n\t Sets the primary content for the notification\n\t /\n\tmessage?: React.ReactNode;\n\n\t/\n\t Sets the scope of the notification\n\t /\n\tscope?: NotificationScope;\n\n\t/\n\t Open/Close state of the notification\n\t /\n\tstate?: NotificationState;\n\n\t/\n\t Open notification callback\n\t * @returns {void}\n\t /\n\thookOpen?: () => void;\n\n\t/\n\t Close notification callback\n\t * @returns {void}\n\t /\n\thookClose?: () => void;\n\n\t/\n\t Sets the header level\n\t * Example output: h1, h2, h3, h4\n\t /\n\tlevel?: NotificationLevel;\n\n\t/\n\t Attributes that are applied to the component during the initial render.\n\t \n\t Example usage: html attributes, custom data attributes (data-qa), aria\n\t /\n\tattrs?: AttrsObject;\n\n\t/\n\t When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern) (see useAutoClose)\n\t /\n\tshouldAutoClose?: Parameters<useAutoClose>[0];\n\n\t/\n\t Delay in milliseconds before the component closes (see useAutoClose)\n\t /\n\tautoCloseAfterMs?: Parameters<useAutoClose>[1];\n\n\t/\n\t Callback to be called when component closes (see useAutoClose)\n\t /\n\tonAutoClose?: Parameters<useAutoClose>[2];\n\n\t/\n\t Enables interaction tracking for this notification. Provide a stable, non-PII id\n\t * (e.g. 'trial-expiry-notification'). When omitted, the notification emits no analytics.\n\t \n\t Note: heading and message text are never emitted.\n\t /\n\teventId?: string;\n}\n\n/\n Configuration options for icons\n /\nconst iconOptions: Record<string, DSIconType> = {\n\terror,\n\tinfo,\n\tsuccess: check,\n\twarning\n};\n\n/\n Block Notification Component\n * @param props - Component props\n * @returns {Element} Block Notification\n /\nexport const MrlBlockNotification = (props: MrlBlockNotificationProps): JSX.Element => {\n\tconst {\n\t\tattrs,\n\t\tautoCloseAfterMs,\n\t\tchildren,\n\t\tclassName,\n\t\tcloseQa,\n\t\tcta,\n\t\tkind = defaults.kind,\n\t\tdismissible = defaults.dismissible,\n\t\theading,\n\t\thookClose,\n\t\thookOpen,\n\t\tcustomIcon,\n\t\tlevel = defaults.level,\n\t\tmessage,\n\t\tonAutoClose,\n\t\tscope = defaults.scope,\n\t\tshouldAutoClose = false,\n\t\tstate = defaults.state,\n\t\teventId,\n\t\t...rest\n\t} = props;\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlBlockNotification', eventId);\n\n\t/\n\t Sets the open/close state of the notification\n\t /\n\tconst [notificationState, setNotificationState] = React.useState<NotificationState>(\n\t\tdefaults.state\n\t);\n\n\t/\n\t Reference to the notification\n\t /\n\tconst notification = React.useRef<HTMLDivElement>(null);\n\n\t/\n\t Handles logic for opening the notification\n\t /\n\tconst handleOpen = React.useCallback(() => {\n\t\tsetNotificationState('open');\n\n\t\tsetTimeout(() => {\n\t\t\thookOpen && hookOpen();\n\t\t}, TransitionDuration);\n\t}, [hookOpen]);\n\n\t/\n\t It is an accessibility anti-pattern to auto-close an interactive element.\n\t * Both the dismiss button and cta are interactive elements.\n\t /\n\tconst isInteractiveElementPresent = dismissible \|\| cta;\n\t/\n\t Controls auto-close behavior of the notification\n\t /\n\tconst [autoClosed] = useAutoClose(\n\t\tshouldAutoClose && !isInteractiveElementPresent,\n\t\tautoCloseAfterMs,\n\t\tonAutoClose\n\t);\n\n\t/\n\t Handles logic for closing the notification\n\t /\n\tconst handleClose = React.useCallback(() => {\n\t\tsetNotificationState('close');\n\n\t\tsetTimeout(() => {\n\t\t\t// add class mrl-is--closed\n\t\t\tnotification.current?.classList.add('mrl-is--closed');\n\t\t\thookClose && hookClose();\n\t\t}, TransitionDuration);\n\t}, [hookClose]);\n\n\t/\n\t Toggles the open/closed state based on the state of the component\n\t /\n\tReact.useEffect(() => {\n\t\tif (notificationState === 'open' && autoClosed !== true) {\n\t\t\thandleOpen();\n\t\t} else {\n\t\t\thandleClose();\n\t\t}\n\t}, [notificationState, handleClose, handleOpen, autoClosed]);\n\n\t/\n\t Emits open/close from the resulting state so the dismiss button, the state prop\n\t * and auto-close are all covered by a single event.\n\t /\n\tconst prevNotificationStateRef = React.useRef<NotificationState \| undefined>(undefined);\n\n\tReact.useEffect(() => {\n\t\tconst isOpen = notificationState === 'open' && autoClosed !== true;\n\t\tconst nextState: NotificationState = isOpen ? 'open' : 'close';\n\t\tconst prevNotificationState = prevNotificationStateRef.current;\n\n\t\tprevNotificationStateRef.current = nextState;\n\n\t\t// a notification that mounts closed was never shown, so it has nothing to report\n\t\tif (prevNotificationState === undefined && nextState !== 'open') return;\n\t\tif (prevNotificationState === nextState) return;\n\n\t\ttrackInteraction({\n\t\t\taction: isOpen ? 'open' : 'close',\n\t\t\tmetadata: { autoClosed: autoClosed === true },\n\t\t\tvariant: kind\n\t\t});\n\t}, [notificationState, autoClosed, kind, trackInteraction]);\n\n\t/\n\t Updates the internal state of the component when the state prop changes\n\t /\n\tReact.useEffect(() => {\n\t\tsetNotificationState(state \|\| defaults.state);\n\t}, [state]);\n\n\t/\n\t Renders a custom icon or a default icon if the kind supports it.\n\t * @returns ReactElement \| null\n\t /\n\tconst renderIcon = (): React.ReactElement \| null => {\n\t\tconst notificationIcon = typeof customIcon === 'undefined' ? iconOptions[kind] : customIcon;\n\n\t\t// It could be undefined if the kind doesn't support a default icon.\n\t\tif (!notificationIcon) return null;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(styles['mrl-blockNotification-icon'], 'mrl-blockNotification-icon')}\n\t\t\t>\n\t\t\t\t<MrlSvg size=\"small\" svg={notificationIcon} />\n\t\t\t</div>\n\t\t);\n\t};\n\n\tconst attributes = setAttributes(attrs, {\n\t\t'aria-hidden': (state === 'close').toString(),\n\n\t\t// @todo need to determine if we want errors to always be assertive or\n\t\t// if we want an easier ability to overwrite than the attrs object.\n\t\t'aria-live': kind === 'error' ? 'assertive' : 'polite',\n\t\trole: 'status'\n\t});\n\n\tconst allClasses = classNames(\n\t\tstyles['mrl-blockNotification'],\n\t\tclassName,\n\t\t'mrl-blockNotification',\n\t\t{\n\t\t\t[styles['mrl-blockNotification--dismissible']]: Boolean(dismissible),\n\t\t\t'mrl-is--transitioning': notificationState === 'close'\n\t\t}\n\t);\n\n\tconst closeButtonKind = React.useMemo(() => {\n\t\treturn kind === 'warning' ? 'ghost' : 'ghost-inverse';\n\t}, [kind]);\n\n\tdelete attributes.class;\n\tdelete attributes.className;\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={allClasses}\n\t\t\t{...attributes}\n\t\t\tdata-kind={kind}\n\t\t\tdata-scope={scope}\n\t\t\tref={notification}\n\t\t>\n\t\t\t{renderIcon()}\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\tstyles['mrl-blockNotification-message'],\n\t\t\t\t\t'mrl-blockNotification-message'\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{/ // to do, add configurable header based on level, when MrlText is completed */}\n\t\t\t\t{heading && (\n\t\t\t\t\t<MrlTextHeading\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles['mrl-blockNotification-heading'],\n\t\t\t\t\t\t\t'mrl-blockNotification-heading'\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tkind=\"title\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tlevel={level}\n\t\t\t\t\t\ttext={heading}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{message && (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles['mrl-blockNotification-text'],\n\t\t\t\t\t\t\t'mrl-blockNotification-text'\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{message}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t{children && <>{children}</>}\n\t\t\t</div>\n\t\t\t{cta && <div className={classNames('cta', styles['cta'])}>{cta}</div>}\n\t\t\t{dismissible && (\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tattrs={{\n\t\t\t\t\t\t'data-qa': closeQa\n\t\t\t\t\t}}\n\t\t\t\t\ticon={<MrlSvg svg={close} size=\"small\" />}\n\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tkind={closeButtonKind}\n\t\t\t\t\tstate=\"default\"\n\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\twrapperClassName={classNames(\n\t\t\t\t\t\tstyles['mrl-blockNotification-close-wrapper'],\n\t\t\t\t\t\t'mrl-blockNotification-close-wrapper'\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["iconOptions","error","info","success","check","warning","MrlBlockNotification","props","attrs","autoCloseAfterMs","children","className","closeQa","cta","_props$kind","kind","defaults","_props$dismissible","dismissible","heading","hookClose","hookOpen","customIcon","_props$level","level","message","onAutoClose","_props$scope","scope","_props$shouldAutoClos","shouldAutoClose","_props$state","state","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","_React$useState","React","useState","_React$useState2","_slicedToArray","notificationState","setNotificationState","notification","useRef","handleOpen","useCallback","setTimeout","TransitionDuration","isInteractiveElementPresent","_useAutoClose","useAutoClose","_useAutoClose2","autoClosed","handleClose","_notification$current","current","classList","add","useEffect","prevNotificationStateRef","undefined","isOpen","nextState","prevNotificationState","action","metadata","variant","renderIcon","notificationIcon","createElement","classNames","styles","MrlSvg","size","svg","attributes","setAttributes","toString","role","allClasses","Boolean","closeButtonKind","useMemo","class","_extends","ref","MrlTextHeading","text","Fragment","MrlIconButton","icon","close","onClick","position","tipAnchor","wrapperClassName"],"mappings":"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"}

package/dist/cjs/components/notification/MrlToast/MrlToast.js CHANGED Viewed

@@ -7,6 +7,7 @@ var colors = require('@tactivos/mural-shared/lib/colors');
 var MrlToast_module = require('./MrlToast.module.scss.js');
 var classnames = require('classnames');
 var index = require('../../../utils/layers/index.js');
+var useMrlAnalytics = require('../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var useAutoClose = require('../../../hooks/useAutoClose/useAutoClose.js');
 var MrlSvg = require('../../svg/MrlSvg/MrlSvg.js');
 var MrlLink = require('../../link/MrlLink/MrlLink.js');
@@ -36,7 +37,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var _excluded = ["data-qa", "autoClose", "avatar", "backgroundColor", "className", "closeAfterMs", "kind", "link", "onClose", "primaryCTA", "primaryMessage", "secondaryCTA", "secondaryMessage", "showCloseButton", "showIcon"];
+var _excluded = ["data-qa", "autoClose", "avatar", "backgroundColor", "className", "closeAfterMs", "kind", "link", "onClose", "primaryCTA", "primaryMessage", "secondaryCTA", "secondaryMessage", "showCloseButton", "showIcon", "eventId"];
 /**
  * MrlToast component.
  * @param {MrlToastProps} props - The props for the MrlToast component.
@@ -64,7 +65,9 @@ var MrlToast = _ref => {
     showCloseButton = _ref$showCloseButton === void 0 ? false : _ref$showCloseButton,
     _ref$showIcon = _ref.showIcon,
     showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    eventId = _ref.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlToast', eventId);
   // Set to true if any buttons exist on the toast, false otherwise
   var hasInteractiveElements = showCloseButton || primaryCTA || secondaryCTA;
@@ -79,6 +82,10 @@ var MrlToast = _ref => {
     closed = _useAutoClose2[0],
     setClosed = _useAutoClose2[1];
   var handleClose = () => {
+    trackInteraction({
+      action: 'close',
+      variant: kind
+    });
     setClosed(true);
     // Slightly delay the onClose callback to allow the toast to animate out.
@@ -150,7 +157,16 @@ var MrlToast = _ref => {
     },
     "data-qa": secondaryCTA.dataQa,
     kind: "inverse",
-    onClick: secondaryCTA.onClick,
+    onClick: () => {
+      trackInteraction({
+        action: 'click',
+        metadata: {
+          cta: 'secondary'
+        },
+        variant: kind
+      });
+      secondaryCTA.onClick();
+    },
     size: "xsmall",
     text: secondaryCTA.text
   }), primaryCTA && /*#__PURE__*/React__namespace.createElement(MrlButton.MrlButton, {
@@ -159,7 +175,16 @@ var MrlToast = _ref => {
     },
     "data-qa": primaryCTA.dataQa,
     kind: "inverse",
-    onClick: primaryCTA.onClick,
+    onClick: () => {
+      trackInteraction({
+        action: 'click',
+        metadata: {
+          cta: 'primary'
+        },
+        variant: kind
+      });
+      primaryCTA.onClick();
+    },
     size: "xsmall",
     text: primaryCTA.text
   }), showCloseButton && /*#__PURE__*/React__namespace.createElement(MrlIconButton.MrlIconButton, {