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

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

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

Files changed (273) hide show

package/dist/esm/components/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":"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"}

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

@@ -4,13 +4,14 @@ import { close, warning, check, info, error } from '@muraldevkit/ds-icons';
 import classnames from 'classnames';
 import { defaults, TransitionDuration } from '../constants.js';
 import styles from './MrlBlockNotification.module.scss.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { useAutoClose } from '../../../hooks/useAutoClose/useAutoClose.js';
 import { setAttributes } from '../../../utils/setAttributes/setAttributes.js';
 import { MrlTextHeading } from '../../text/MrlTextHeading/MrlTextHeading.js';
 import { MrlIconButton } from '../../button/MrlIconButton/MrlIconButton.js';
 import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
-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
  */
@@ -51,7 +52,9 @@ var MrlBlockNotification = props => {
     shouldAutoClose = _props$shouldAutoClos === void 0 ? false : _props$shouldAutoClos,
     _props$state = props.state,
     state = _props$state === void 0 ? defaults.state : _props$state,
+    eventId = props.eventId,
     rest = _objectWithoutProperties(props, _excluded);
+  var trackInteraction = useMrlTrackInteraction('MrlBlockNotification', eventId);
   /**
    * Sets the open/close state of the notification
@@ -112,6 +115,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.useRef(undefined);
+  React.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/esm/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":"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"}
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/esm/components/notification/MrlToast/MrlToast.js CHANGED Viewed

@@ -5,13 +5,14 @@ import { stickyTextColor } from '@tactivos/mural-shared/lib/colors';
 import styles from './MrlToast.module.scss.js';
 import classnames from 'classnames';
 import { PORTAL_LAYERS } from '../../../utils/layers/index.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { useAutoClose } from '../../../hooks/useAutoClose/useAutoClose.js';
 import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
 import { MrlLink } from '../../link/MrlLink/MrlLink.js';
 import { MrlButton } from '../../button/MrlButton/MrlButton.js';
 import { MrlIconButton } from '../../button/MrlIconButton/MrlIconButton.js';
-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.
@@ -39,7 +40,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 = _objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlTrackInteraction('MrlToast', eventId);
   // Set to true if any buttons exist on the toast, false otherwise
   var hasInteractiveElements = showCloseButton || primaryCTA || secondaryCTA;
@@ -54,6 +57,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.
@@ -125,7 +132,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.createElement(MrlButton, {
@@ -134,7 +150,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.createElement(MrlIconButton, {

package/dist/esm/components/notification/MrlToast/MrlToast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlToast.js","sources":["../../../../../src/components/notification/MrlToast/MrlToast.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, close, error, info, lock, modePrivate, warning } from '@muraldevkit/ds-icons';\nimport { stickyTextColor } from '@tactivos/mural-shared/lib/colors';\nimport { MrlIconButton, MrlButton } from '../../button';\nimport { MrlLink } from '../../link';\nimport { MrlSvg, DSIconType } from '../../svg';\nimport { MrlAvatarPropTypes } from '../../avatar/MrlAvatar';\nimport styles from './MrlToast.module.scss';\nimport classNames from 'classnames';\nimport { NotificationKind } from '../constants';\nimport { PORTAL_LAYERS as layers } from '../../../utils/layers';\nimport { useAutoClose } from '../../../hooks/useAutoClose';\n\nexport type MrlToastKind = NotificationKind \| 'collaborator' \| 'general';\n\nexport type MrlToastPosition = 'bottom' \| 'top';\n\nexport interface MrlToastCTA {\n\tonClick: () => void;\n\ttext: string;\n\tdataQa: string;\n}\n\nexport interface MrlToastLink {\n\ttext: string;\n\turl: string;\n}\n\nexport interface MrlToastProps {\n\t['data-qa']?: string;\n\t/*\n\t Determines whether the Toast Notification should automatically close after the time specified in `closeAfterMs` (default 3000ms).\n\t \n\t Note: auto-closing is only possible when no interactive elements (e.g. close button & CTA's) exist on the toast notification\n\t /\n\tautoClose?: boolean;\n\t/\n\t A MrlAvatar component instance to display in the toast notification.\n\t \n\t Note: This is only applicable when `kind` is set to 'collaborator'. When provided, the avatar will be shown instead of the default icon.\n\t * The `showIcon` prop will be ignored when `avatar` is present.\n\t \n\t @example\n\t * ```tsx\n\t * <MrlToast\n\t * kind=\"collaborator\"\n\t * avatar={<MrlAvatar name=\"John Doe\" size=\"small\" avatarColor=\"#FF5733\" />}\n\t * primaryMessage=\"John Doe joined the mural\"\n\t * />\n\t * ```\n\t /\n\tavatar?: React.ReactElement<MrlAvatarPropTypes>;\n\t/\n\t Sets the background color of the toast notification.\n\t \n\t Note: this is only applicable when the `kind` is set to 'collaborator'.\n\t /\n\tbackgroundColor?: string;\n\tclassName?: string;\n\t/\n\t The time in milliseconds after which the toast notification should automatically close.\n\t /\n\tcloseAfterMs?: number;\n\tkind?: MrlToastKind;\n\tlink?: MrlToastLink;\n\tonClose?: () => void;\n\tprimaryCTA?: MrlToastCTA;\n\tprimaryMessage: string \| JSX.Element;\n\tsecondaryCTA?: MrlToastCTA;\n\tsecondaryMessage?: string \| JSX.Element;\n\t/* Determines whether the close icon button should be shown. /\n\tshowCloseButton?: boolean;\n\tshowIcon?: boolean;\n}\n\n/\n MrlToast component.\n * @param {MrlToastProps} props - The props for the MrlToast component.\n * @returns {React.ReactElement} The MrlToast component.\n /\nexport const MrlToast = ({\n\t['data-qa']: qa = 'toast-notification',\n\tautoClose = true,\n\tavatar,\n\tbackgroundColor,\n\tclassName,\n\tcloseAfterMs = 3000,\n\tkind = 'info',\n\tlink,\n\tonClose,\n\tprimaryCTA,\n\tprimaryMessage,\n\tsecondaryCTA,\n\tsecondaryMessage,\n\tshowCloseButton = false,\n\tshowIcon = true,\n\t...rest\n}: MrlToastProps): React.ReactElement => {\n\t// Set to true if any buttons exist on the toast, false otherwise\n\tconst hasInteractiveElements = showCloseButton \|\| primaryCTA \|\| secondaryCTA;\n\n\t// Allowing autoClose when there are interactive elements in the toast is an anti-pattern\n\t// and should be avoided. If autoClose is set to true and interactive elements exist, the\n\t// toast will not close automatically.\n\tconst shouldAutoClose = autoClose && !hasInteractiveElements;\n\n\t/ Boolean value tracking if the close timeout has been reached */\n\tconst [closed, setClosed] = useAutoClose(shouldAutoClose, closeAfterMs, onClose);\n\n\tconst handleClose = (): void => {\n\t\tsetClosed(true);\n\n\t\t// Slightly delay the onClose callback to allow the toast to animate out.\n\t\t// This will prevent the toast from disappearing abruptly depending on how\n\t\t// it is implemented within the application\n\t\tsetTimeout(() => {\n\t\t\tif (onClose) onClose();\n\t\t}, 500);\n\t};\n\n\tconst DEFAULT_ICONS: Partial<Record<MrlToastKind, DSIconType>> = {\n\t\tcollaborator: lock,\n\t\terror,\n\t\tinfo,\n\t\tprivate: modePrivate,\n\t\tsuccess: check,\n\t\twarning\n\t};\n\n\tconst hasAvatar = typeof avatar !== 'undefined' && kind === 'collaborator';\n\n\tconst darkCollaborator =\n\t\tkind === 'collaborator' &&\n\t\tbackgroundColor &&\n\t\tstickyTextColor(backgroundColor, 'light', 'dark') === 'light';\n\n\tconst classes = classNames(styles['MrlToast'], className, styles[`${kind}Notification`], {\n\t\t[styles.darkCollaborator]: !!darkCollaborator,\n\t\t[styles.closing]: closed,\n\t\t[styles['has-cta']]: !!hasInteractiveElements,\n\t\t[styles['has-avatar']]: hasAvatar\n\t});\n\n\tconst closeButtonkind = kind === 'warning' \|\| darkCollaborator ? 'ghost' : 'ghost-inverse';\n\n\tconst customTextColor =\n\t\t!!backgroundColor && kind === 'collaborator'\n\t\t\t? stickyTextColor(backgroundColor, '#000000', '#ffffff')\n\t\t\t: undefined;\n\n\tconst primaryMessageClasses = classNames(styles.primaryMessage, 'MrlToast--primaryMessage');\n\tconst secondaryMessageClasses = classNames(styles.secondaryMessage, 'MrlToast--secondaryMessage');\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={classes}\n\t\t\tdata-qa={qa}\n\t\t\tstyle={{\n\t\t\t\tbackgroundColor: kind === 'collaborator' ? backgroundColor : undefined,\n\t\t\t\tcolor: customTextColor,\n\t\t\t\tzIndex: layers.TOAST.zIndex\n\t\t\t}}\n\t\t>\n\t\t\t<div className={styles.content}>\n\t\t\t\t{hasAvatar && <span className={styles.avatarWrapper}>{avatar}</span>}\n\t\t\t\t{!hasAvatar && showIcon && (\n\t\t\t\t\t<span className={styles.iconWrapper}>\n\t\t\t\t\t\t<MrlSvg size=\"small\" svg={DEFAULT_ICONS[kind] \|\| info} />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<span className={styles.textContent}>\n\t\t\t\t\t<span className={primaryMessageClasses} data-qa=\"toast-primary-content\">\n\t\t\t\t\t\t{primaryMessage}\n\t\t\t\t\t</span>{' '}\n\t\t\t\t\t<span className={secondaryMessageClasses}>{secondaryMessage}</span>\n\t\t\t\t\t{link && (\n\t\t\t\t\t\t<span className={styles.link}>\n\t\t\t\t\t\t\t<MrlLink\n\t\t\t\t\t\t\t\ttext={link.text}\n\t\t\t\t\t\t\t\thref={link.url}\n\t\t\t\t\t\t\t\tkind=\"simple\"\n\t\t\t\t\t\t\t\tstyle={{ color: 'inherit' }}\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t{hasInteractiveElements && (\n\t\t\t\t<div className={styles['cta-container']}>\n\t\t\t\t\t{secondaryCTA && (\n\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--secondary']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa={secondaryCTA.dataQa}\n\t\t\t\t\t\t\tkind=\"inverse\"\n\t\t\t\t\t\t\tonClick={secondaryCTA.onClick}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext={secondaryCTA.text}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{primaryCTA && (\n\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--primary']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa={primaryCTA.dataQa}\n\t\t\t\t\t\t\tkind=\"inverse\"\n\t\t\t\t\t\t\tonClick={primaryCTA.onClick}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext={primaryCTA.text}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{showCloseButton && (\n\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--close']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa=\"mrl-toast-close-button\"\n\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\tkind={closeButtonkind}\n\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["MrlToast","_ref","_ref$dataQa","qa","_ref$autoClose","autoClose","avatar","backgroundColor","className","_ref$closeAfterMs","closeAfterMs","_ref$kind","kind","link","onClose","primaryCTA","primaryMessage","secondaryCTA","secondaryMessage","_ref$showCloseButton","showCloseButton","_ref$showIcon","showIcon","rest","_objectWithoutProperties","_excluded","hasInteractiveElements","shouldAutoClose","_useAutoClose","useAutoClose","_useAutoClose2","_slicedToArray","closed","setClosed","handleClose","setTimeout","DEFAULT_ICONS","collaborator","lock","error","info","private","modePrivate","success","check","warning","hasAvatar","darkCollaborator","stickyTextColor","classes","classNames","styles","concat","closing","closeButtonkind","customTextColor","undefined","primaryMessageClasses","secondaryMessageClasses","React","createElement","_extends","style","color","zIndex","layers","TOAST","content","avatarWrapper","iconWrapper","MrlSvg","size","svg","textContent","MrlLink","text","href","url","MrlButton","attrs","dataQa","onClick","MrlIconButton","icon","close","state"],"mappings":"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"}
1	+ {"version":3,"file":"MrlToast.js","sources":["../../../../../src/components/notification/MrlToast/MrlToast.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, close, error, info, lock, modePrivate, warning } from '@muraldevkit/ds-icons';\nimport { stickyTextColor } from '@tactivos/mural-shared/lib/colors';\nimport { MrlIconButton, MrlButton } from '../../button';\nimport { MrlLink } from '../../link';\nimport { MrlSvg, DSIconType } from '../../svg';\nimport { MrlAvatarPropTypes } from '../../avatar/MrlAvatar';\nimport styles from './MrlToast.module.scss';\nimport classNames from 'classnames';\nimport { NotificationKind } from '../constants';\nimport { PORTAL_LAYERS as layers } from '../../../utils/layers';\nimport { useAutoClose } from '../../../hooks/useAutoClose';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nexport type MrlToastKind = NotificationKind \| 'collaborator' \| 'general';\n\nexport type MrlToastPosition = 'bottom' \| 'top';\n\nexport interface MrlToastCTA {\n\tonClick: () => void;\n\ttext: string;\n\tdataQa: string;\n}\n\nexport interface MrlToastLink {\n\ttext: string;\n\turl: string;\n}\n\nexport interface MrlToastProps {\n\t['data-qa']?: string;\n\t/*\n\t Determines whether the Toast Notification should automatically close after the time specified in `closeAfterMs` (default 3000ms).\n\t \n\t Note: auto-closing is only possible when no interactive elements (e.g. close button & CTA's) exist on the toast notification\n\t /\n\tautoClose?: boolean;\n\t/\n\t A MrlAvatar component instance to display in the toast notification.\n\t \n\t Note: This is only applicable when `kind` is set to 'collaborator'. When provided, the avatar will be shown instead of the default icon.\n\t * The `showIcon` prop will be ignored when `avatar` is present.\n\t \n\t @example\n\t * ```tsx\n\t * <MrlToast\n\t * kind=\"collaborator\"\n\t * avatar={<MrlAvatar name=\"John Doe\" size=\"small\" avatarColor=\"#FF5733\" />}\n\t * primaryMessage=\"John Doe joined the mural\"\n\t * />\n\t * ```\n\t /\n\tavatar?: React.ReactElement<MrlAvatarPropTypes>;\n\t/\n\t Sets the background color of the toast notification.\n\t \n\t Note: this is only applicable when the `kind` is set to 'collaborator'.\n\t /\n\tbackgroundColor?: string;\n\tclassName?: string;\n\t/\n\t The time in milliseconds after which the toast notification should automatically close.\n\t /\n\tcloseAfterMs?: number;\n\tkind?: MrlToastKind;\n\tlink?: MrlToastLink;\n\tonClose?: () => void;\n\tprimaryCTA?: MrlToastCTA;\n\tprimaryMessage: string \| JSX.Element;\n\tsecondaryCTA?: MrlToastCTA;\n\tsecondaryMessage?: string \| JSX.Element;\n\t/* Determines whether the close icon button should be shown. /\n\tshowCloseButton?: boolean;\n\tshowIcon?: boolean;\n\t/\n\t Enables interaction tracking for this toast. Provide a stable, non-PII id\n\t * (e.g. 'export-complete-toast'). When omitted, the toast emits no analytics.\n\t \n\t Note: message text is never emitted.\n\t /\n\teventId?: string;\n}\n\n/\n MrlToast component.\n * @param {MrlToastProps} props - The props for the MrlToast component.\n * @returns {React.ReactElement} The MrlToast component.\n /\nexport const MrlToast = ({\n\t['data-qa']: qa = 'toast-notification',\n\tautoClose = true,\n\tavatar,\n\tbackgroundColor,\n\tclassName,\n\tcloseAfterMs = 3000,\n\tkind = 'info',\n\tlink,\n\tonClose,\n\tprimaryCTA,\n\tprimaryMessage,\n\tsecondaryCTA,\n\tsecondaryMessage,\n\tshowCloseButton = false,\n\tshowIcon = true,\n\teventId,\n\t...rest\n}: MrlToastProps): React.ReactElement => {\n\tconst trackInteraction = useMrlTrackInteraction('MrlToast', eventId);\n\t// Set to true if any buttons exist on the toast, false otherwise\n\tconst hasInteractiveElements = showCloseButton \|\| primaryCTA \|\| secondaryCTA;\n\n\t// Allowing autoClose when there are interactive elements in the toast is an anti-pattern\n\t// and should be avoided. If autoClose is set to true and interactive elements exist, the\n\t// toast will not close automatically.\n\tconst shouldAutoClose = autoClose && !hasInteractiveElements;\n\n\t/ Boolean value tracking if the close timeout has been reached */\n\tconst [closed, setClosed] = useAutoClose(shouldAutoClose, closeAfterMs, onClose);\n\n\tconst handleClose = (): void => {\n\t\ttrackInteraction({ action: 'close', variant: kind });\n\n\t\tsetClosed(true);\n\n\t\t// Slightly delay the onClose callback to allow the toast to animate out.\n\t\t// This will prevent the toast from disappearing abruptly depending on how\n\t\t// it is implemented within the application\n\t\tsetTimeout(() => {\n\t\t\tif (onClose) onClose();\n\t\t}, 500);\n\t};\n\n\tconst DEFAULT_ICONS: Partial<Record<MrlToastKind, DSIconType>> = {\n\t\tcollaborator: lock,\n\t\terror,\n\t\tinfo,\n\t\tprivate: modePrivate,\n\t\tsuccess: check,\n\t\twarning\n\t};\n\n\tconst hasAvatar = typeof avatar !== 'undefined' && kind === 'collaborator';\n\n\tconst darkCollaborator =\n\t\tkind === 'collaborator' &&\n\t\tbackgroundColor &&\n\t\tstickyTextColor(backgroundColor, 'light', 'dark') === 'light';\n\n\tconst classes = classNames(styles['MrlToast'], className, styles[`${kind}Notification`], {\n\t\t[styles.darkCollaborator]: !!darkCollaborator,\n\t\t[styles.closing]: closed,\n\t\t[styles['has-cta']]: !!hasInteractiveElements,\n\t\t[styles['has-avatar']]: hasAvatar\n\t});\n\n\tconst closeButtonkind = kind === 'warning' \|\| darkCollaborator ? 'ghost' : 'ghost-inverse';\n\n\tconst customTextColor =\n\t\t!!backgroundColor && kind === 'collaborator'\n\t\t\t? stickyTextColor(backgroundColor, '#000000', '#ffffff')\n\t\t\t: undefined;\n\n\tconst primaryMessageClasses = classNames(styles.primaryMessage, 'MrlToast--primaryMessage');\n\tconst secondaryMessageClasses = classNames(styles.secondaryMessage, 'MrlToast--secondaryMessage');\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={classes}\n\t\t\tdata-qa={qa}\n\t\t\tstyle={{\n\t\t\t\tbackgroundColor: kind === 'collaborator' ? backgroundColor : undefined,\n\t\t\t\tcolor: customTextColor,\n\t\t\t\tzIndex: layers.TOAST.zIndex\n\t\t\t}}\n\t\t>\n\t\t\t<div className={styles.content}>\n\t\t\t\t{hasAvatar && <span className={styles.avatarWrapper}>{avatar}</span>}\n\t\t\t\t{!hasAvatar && showIcon && (\n\t\t\t\t\t<span className={styles.iconWrapper}>\n\t\t\t\t\t\t<MrlSvg size=\"small\" svg={DEFAULT_ICONS[kind] \|\| info} />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<span className={styles.textContent}>\n\t\t\t\t\t<span className={primaryMessageClasses} data-qa=\"toast-primary-content\">\n\t\t\t\t\t\t{primaryMessage}\n\t\t\t\t\t</span>{' '}\n\t\t\t\t\t<span className={secondaryMessageClasses}>{secondaryMessage}</span>\n\t\t\t\t\t{link && (\n\t\t\t\t\t\t<span className={styles.link}>\n\t\t\t\t\t\t\t<MrlLink\n\t\t\t\t\t\t\t\ttext={link.text}\n\t\t\t\t\t\t\t\thref={link.url}\n\t\t\t\t\t\t\t\tkind=\"simple\"\n\t\t\t\t\t\t\t\tstyle={{ color: 'inherit' }}\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t{hasInteractiveElements && (\n\t\t\t\t<div className={styles['cta-container']}>\n\t\t\t\t\t{secondaryCTA && (\n\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--secondary']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa={secondaryCTA.dataQa}\n\t\t\t\t\t\t\tkind=\"inverse\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\ttrackInteraction({\n\t\t\t\t\t\t\t\t\taction: 'click',\n\t\t\t\t\t\t\t\t\tmetadata: { cta: 'secondary' },\n\t\t\t\t\t\t\t\t\tvariant: kind\n\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\tsecondaryCTA.onClick();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext={secondaryCTA.text}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{primaryCTA && (\n\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--primary']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa={primaryCTA.dataQa}\n\t\t\t\t\t\t\tkind=\"inverse\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\ttrackInteraction({ action: 'click', metadata: { cta: 'primary' }, variant: kind });\n\n\t\t\t\t\t\t\t\tprimaryCTA.onClick();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext={primaryCTA.text}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{showCloseButton && (\n\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--close']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa=\"mrl-toast-close-button\"\n\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\tkind={closeButtonkind}\n\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["MrlToast","_ref","_ref$dataQa","qa","_ref$autoClose","autoClose","avatar","backgroundColor","className","_ref$closeAfterMs","closeAfterMs","_ref$kind","kind","link","onClose","primaryCTA","primaryMessage","secondaryCTA","secondaryMessage","_ref$showCloseButton","showCloseButton","_ref$showIcon","showIcon","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","hasInteractiveElements","shouldAutoClose","_useAutoClose","useAutoClose","_useAutoClose2","_slicedToArray","closed","setClosed","handleClose","action","variant","setTimeout","DEFAULT_ICONS","collaborator","lock","error","info","private","modePrivate","success","check","warning","hasAvatar","darkCollaborator","stickyTextColor","classes","classNames","styles","concat","closing","closeButtonkind","customTextColor","undefined","primaryMessageClasses","secondaryMessageClasses","React","createElement","_extends","style","color","zIndex","layers","TOAST","content","avatarWrapper","iconWrapper","MrlSvg","size","svg","textContent","MrlLink","text","href","url","MrlButton","attrs","dataQa","onClick","metadata","cta","MrlIconButton","icon","close","state"],"mappings":"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"}

package/dist/esm/components/pagination/MrlPaginationButton/MrlPaginationButton.js CHANGED Viewed

@@ -4,10 +4,11 @@ import classnames from 'classnames';
 import { chevronLeft, chevronRight, chevronGoToLast, chevronGoToFirst } from '@muraldevkit/ds-icons';
 import styles from '../MrlPagination/MrlPagination.module.scss.js';
 import { MrlTooltipDefaults } from '../../tooltip/constants.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlIconButton } from '../../button/MrlIconButton/MrlIconButton.js';
 import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
-var _excluded = ["buttonClass", "className", "disabled", "kind", "handleClick", "text", "tooltipAnchor", "tooltipPosition"];
+var _excluded = ["buttonClass", "className", "disabled", "kind", "handleClick", "text", "tooltipAnchor", "tooltipPosition", "eventId"];
 /**
  * Pagination button component
  * @param {MrlPaginationButtonProps} props - the component props
@@ -24,7 +25,22 @@ function MrlPaginationButton(_ref) {
     tooltipAnchor = _ref$tooltipAnchor === void 0 ? MrlTooltipDefaults.anchor : _ref$tooltipAnchor,
     _ref$tooltipPosition = _ref.tooltipPosition,
     tooltipPosition = _ref$tooltipPosition === void 0 ? 'top' : _ref$tooltipPosition,
+    eventId = _ref.eventId,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlTrackInteraction('MrlPaginationButton', eventId);
+  /**
+   * Handle onClick events
+   *
+   * @param {React.SyntheticEvent<HTMLButtonElement>} e - click event
+   */
+  var handleOnClick = e => {
+    trackInteraction({
+      action: 'click',
+      variant: kind
+    });
+    handleClick === null || handleClick === void 0 ? void 0 : handleClick(e);
+  };
   var itemClasses = classnames(styles['MrlPaginationItem'], className);
   var icons = {
     first: chevronGoToFirst,
@@ -46,7 +62,7 @@ function MrlPaginationButton(_ref) {
     icon: /*#__PURE__*/React.createElement(MrlSvg, {
       svg: icons[kind]
     }),
-    onClick: handleClick,
+    onClick: handleOnClick,
     position: tooltipPosition,
     state: disabled ? 'disabled' : 'default',
     text: text || defaultText[kind],

package/dist/esm/components/pagination/MrlPaginationButton/MrlPaginationButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlPaginationButton.js","sources":["../../../../../src/components/pagination/MrlPaginationButton/MrlPaginationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport {\n\tMrlIconButton,\n\tMrlSvg,\n\tMrlTooltipAnchor,\n\tMrlTooltipDefaults,\n\tMrlTooltipPosition\n} from '../..';\nimport { PaginationButtonType } from '../constants';\nimport {\n\tchevronGoToFirst,\n\tchevronGoToLast,\n\tchevronLeft,\n\tchevronRight\n} from '@muraldevkit/ds-icons';\n\nimport styles from '../MrlPagination/MrlPagination.module.scss';\n\ninterface MrlPaginationButtonProps {\n\t/** Additional class to add to the button element /\n\tbuttonClass?: string;\n\t/* Additional class to add to the container element /\n\tclassName?: string;\n\tdisabled?: boolean;\n\t/* The type of pagination item /\n\tkind: PaginationButtonType;\n\t/\n\t Click event for the button.\n\t /\n\thandleClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n\t/* Pagination heading /\n\ttext?: string;\n\t/* The anchor of the tooltips on the buttons /\n\ttooltipAnchor?: MrlTooltipAnchor;\n\t/* The placement of the tooltips on the buttons /\n\ttooltipPosition?: MrlTooltipPosition;\n}\n\n/\n Pagination button component\n * @param {MrlPaginationButtonProps} props - the component props\n * @returns a pagintaion button\n */\nexport function MrlPaginationButton({\n\tbuttonClass,\n\tclassName,\n\tdisabled,\n\tkind,\n\thandleClick,\n\ttext,\n\ttooltipAnchor = MrlTooltipDefaults.anchor,\n\ttooltipPosition = 'top',\n\t...rest\n}: MrlPaginationButtonProps): JSX.Element {\n\tconst itemClasses = classnames(styles['MrlPaginationItem'], className);\n\tconst icons = {\n\t\tfirst: chevronGoToFirst,\n\t\tlast: chevronGoToLast,\n\t\tnext: chevronRight,\n\t\tprevious: chevronLeft\n\t};\n\tconst defaultText = {\n\t\tfirst: 'Beginning',\n\t\tlast: 'End',\n\t\tnext: 'Next',\n\t\tprevious: 'Previous'\n\t};\n\n\treturn (\n\t\t<li className={itemClasses}>\n\t\t\t<MrlIconButton\n\t\t\t\t{...rest}\n\t\t\t\tclassName={buttonClass}\n\t\t\t\tkind=\"ghost\"\n\t\t\t\ticon={<MrlSvg svg={icons[kind]} />}\n\t\t\t\tonClick={~~handleClick~~}\n\t\t\t\tposition={tooltipPosition}\n\t\t\t\tstate={disabled ? 'disabled' : 'default'}\n\t\t\t\ttext={text \|\| defaultText[kind]}\n\t\t\t\tsize=\"xsmall\"\n\t\t\t\ttipAnchor={tooltipAnchor}\n\t\t\t/>\n\t\t</li>\n\t);\n}\n"],"names":["MrlPaginationButton","_ref","buttonClass","className","disabled","kind","handleClick","text","_ref$tooltipAnchor","tooltipAnchor","MrlTooltipDefaults","anchor","_ref$tooltipPosition","tooltipPosition","rest","_objectWithoutProperties","_excluded","itemClasses","classnames","styles","icons","first","chevronGoToFirst","last","chevronGoToLast","next","chevronRight","previous","chevronLeft","defaultText","React","createElement","MrlIconButton","_extends","icon","MrlSvg","svg","onClick","position","state","size","tipAnchor"],"mappings":"~~;;;;;;;;;;AAuCA~~;AACA;AACA;AACA;AACA;AACO,SAASA,mBAAmBA,CAAAC,IAAA,~~EAUO~~;AAAA,EAAA,~~IATzCC~~,WAAW,GAAAD,IAAA,CAAXC,WAAW;IACXC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,WAAW,GAAAL,IAAA,CAAXK,WAAW;IACXC,IAAI,GAAAN,IAAA,CAAJM,IAAI;IAAAC,kBAAA,GAAAP,IAAA,CACJQ,aAAa;AAAbA,IAAAA,aAAa,GAAAD,kBAAA,KAAA,MAAA,GAAGE,kBAAkB,CAACC,MAAM,GAAAH,kBAAA;IAAAI,oBAAA,GAAAX,IAAA,CACzCY,eAAe;AAAfA,IAAAA,eAAe,GAAAD,oBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,oBAAA;~~AACpBE~~,IAAAA,IAAI,GAAAC,wBAAA,~~CAAAd~~,IAAA,~~EAAAe~~,SAAA,CAAA;~~EAEP~~,IAAMC,WAAW,GAAGC,UAAU,CAACC,MAAM,CAAC,mBAAmB,CAAC,~~EAAEhB~~,SAAS,CAAC;AACtE,EAAA,~~IAAMiB~~,KAAK,GAAG;AACbC,IAAAA,KAAK,EAAEC,gBAAgB;AACvBC,IAAAA,IAAI,EAAEC,eAAe;AACrBC,IAAAA,IAAI,EAAEC,YAAY;AAClBC,IAAAA,QAAQ,EAAEC;GACV;AACD,EAAA,IAAMC,WAAW,GAAG;AACnBR,IAAAA,KAAK,EAAE,WAAW;AAClBE,IAAAA,IAAI,EAAE,KAAK;AACXE,IAAAA,IAAI,EAAE,MAAM;AACZE,IAAAA,QAAQ,EAAE;GACV;EAED,oBACCG,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;~~AAAI5B~~,IAAAA,SAAS,~~EAAEc~~;GAAY,eAC1Ba,KAAA,CAAAC,aAAA,CAACC,aAAa,EAAAC,QAAA,~~KACTnB~~,IAAI,EAAA;~~AACRX~~,IAAAA,SAAS,EAAED,WAAY;AACvBG,IAAAA,IAAI,EAAC,OAAO;~~AACZ6B~~,IAAAA,IAAI,eAAEJ,KAAA,CAAAC,aAAA,CAACI,MAAM,EAAA;MAACC,GAAG,EAAEhB,KAAK,~~CAACf~~,IAAI;AAAE,KAAE,CAAE;~~AACnCgC~~,IAAAA,OAAO,~~EAAE/B~~,~~WAAY~~;~~AACrBgC~~,IAAAA,QAAQ,~~EAAEzB~~,eAAgB;~~AAC1B0B~~,IAAAA,KAAK,~~EAAEnC~~,QAAQ,GAAG,UAAU,GAAG,SAAU;AACzCG,IAAAA,IAAI,EAAEA,IAAI,~~IAAIsB~~,WAAW,~~CAACxB~~,IAAI,CAAE;~~AAChCmC~~,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,SAAS,~~EAAEhC~~;AAAc,GAAA,CACzB,CACE,CAAC;AAEP;;;;"}
1	+ {"version":3,"file":"MrlPaginationButton.js","sources":["../../../../../src/components/pagination/MrlPaginationButton/MrlPaginationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport {\n\tMrlIconButton,\n\tMrlSvg,\n\tMrlTooltipAnchor,\n\tMrlTooltipDefaults,\n\tMrlTooltipPosition\n} from '../..';\nimport { PaginationButtonType } from '../constants';\nimport {\n\tchevronGoToFirst,\n\tchevronGoToLast,\n\tchevronLeft,\n\tchevronRight\n} from '@muraldevkit/ds-icons';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nimport styles from '../MrlPagination/MrlPagination.module.scss';\n\ninterface MrlPaginationButtonProps {\n\t/** Additional class to add to the button element /\n\tbuttonClass?: string;\n\t/* Additional class to add to the container element /\n\tclassName?: string;\n\tdisabled?: boolean;\n\t/* The type of pagination item /\n\tkind: PaginationButtonType;\n\t/\n\t Click event for the button.\n\t /\n\thandleClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n\t/* Pagination heading /\n\ttext?: string;\n\t/\n\t Enables interaction tracking for this button. Provide a stable, non-PII id\n\t * (e.g. 'templates-pagination'). When omitted, the button emits no analytics.\n\t /\n\teventId?: string;\n\t/* The anchor of the tooltips on the buttons /\n\ttooltipAnchor?: MrlTooltipAnchor;\n\t/* The placement of the tooltips on the buttons /\n\ttooltipPosition?: MrlTooltipPosition;\n}\n\n/\n Pagination button component\n * @param {MrlPaginationButtonProps} props - the component props\n * @returns a pagintaion button\n /\nexport function MrlPaginationButton({\n\tbuttonClass,\n\tclassName,\n\tdisabled,\n\tkind,\n\thandleClick,\n\ttext,\n\ttooltipAnchor = MrlTooltipDefaults.anchor,\n\ttooltipPosition = 'top',\n\teventId,\n\t...rest\n}: MrlPaginationButtonProps): JSX.Element {\n\tconst trackInteraction = useMrlTrackInteraction('MrlPaginationButton', eventId);\n\n\t/\n\t Handle onClick events\n\t \n\t @param {React.SyntheticEvent<HTMLButtonElement>} e - click event\n\t */\n\tconst handleOnClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n\t\ttrackInteraction({ action: 'click', variant: kind });\n\n\t\thandleClick?.(e);\n\t};\n\n\tconst itemClasses = classnames(styles['MrlPaginationItem'], className);\n\tconst icons = {\n\t\tfirst: chevronGoToFirst,\n\t\tlast: chevronGoToLast,\n\t\tnext: chevronRight,\n\t\tprevious: chevronLeft\n\t};\n\tconst defaultText = {\n\t\tfirst: 'Beginning',\n\t\tlast: 'End',\n\t\tnext: 'Next',\n\t\tprevious: 'Previous'\n\t};\n\n\treturn (\n\t\t<li className={itemClasses}>\n\t\t\t<MrlIconButton\n\t\t\t\t{...rest}\n\t\t\t\tclassName={buttonClass}\n\t\t\t\tkind=\"ghost\"\n\t\t\t\ticon={<MrlSvg svg={icons[kind]} />}\n\t\t\t\tonClick={handleOnClick}\n\t\t\t\tposition={tooltipPosition}\n\t\t\t\tstate={disabled ? 'disabled' : 'default'}\n\t\t\t\ttext={text \|\| defaultText[kind]}\n\t\t\t\tsize=\"xsmall\"\n\t\t\t\ttipAnchor={tooltipAnchor}\n\t\t\t/>\n\t\t</li>\n\t);\n}\n"],"names":["MrlPaginationButton","_ref","buttonClass","className","disabled","kind","handleClick","text","_ref$tooltipAnchor","tooltipAnchor","MrlTooltipDefaults","anchor","_ref$tooltipPosition","tooltipPosition","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","handleOnClick","e","action","variant","itemClasses","classnames","styles","icons","first","chevronGoToFirst","last","chevronGoToLast","next","chevronRight","previous","chevronLeft","defaultText","React","createElement","MrlIconButton","_extends","icon","MrlSvg","svg","onClick","position","state","size","tipAnchor"],"mappings":";;;;;;;;;;;AA6CA;AACA;AACA;AACA;AACA;AACO,SAASA,mBAAmBA,CAAAC,IAAA,EAWO;AAAA,EAAA,IAVzCC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IACXC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,WAAW,GAAAL,IAAA,CAAXK,WAAW;IACXC,IAAI,GAAAN,IAAA,CAAJM,IAAI;IAAAC,kBAAA,GAAAP,IAAA,CACJQ,aAAa;AAAbA,IAAAA,aAAa,GAAAD,kBAAA,KAAA,MAAA,GAAGE,kBAAkB,CAACC,MAAM,GAAAH,kBAAA;IAAAI,oBAAA,GAAAX,IAAA,CACzCY,eAAe;AAAfA,IAAAA,eAAe,GAAAD,oBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,oBAAA;IACvBE,OAAO,GAAAb,IAAA,CAAPa,OAAO;AACJC,IAAAA,IAAI,GAAAC,wBAAA,CAAAf,IAAA,EAAAgB,SAAA,CAAA;AAEP,EAAA,IAAMC,gBAAgB,GAAGC,sBAAsB,CAAC,qBAAqB,EAAEL,OAAO,CAAC;;AAE/E;AACD;AACA;AACA;AACA;EACC,IAAMM,aAAa,GAAIC,CAA0C,IAAK;AACrEH,IAAAA,gBAAgB,CAAC;AAAEI,MAAAA,MAAM,EAAE,OAAO;AAAEC,MAAAA,OAAO,EAAElB;AAAK,KAAC,CAAC;AAEpDC,IAAAA,WAAW,aAAXA,WAAW,KAAA,MAAA,GAAA,MAAA,GAAXA,WAAW,CAAGe,CAAC,CAAC;EACjB,CAAC;EAED,IAAMG,WAAW,GAAGC,UAAU,CAACC,MAAM,CAAC,mBAAmB,CAAC,EAAEvB,SAAS,CAAC;AACtE,EAAA,IAAMwB,KAAK,GAAG;AACbC,IAAAA,KAAK,EAAEC,gBAAgB;AACvBC,IAAAA,IAAI,EAAEC,eAAe;AACrBC,IAAAA,IAAI,EAAEC,YAAY;AAClBC,IAAAA,QAAQ,EAAEC;GACV;AACD,EAAA,IAAMC,WAAW,GAAG;AACnBR,IAAAA,KAAK,EAAE,WAAW;AAClBE,IAAAA,IAAI,EAAE,KAAK;AACXE,IAAAA,IAAI,EAAE,MAAM;AACZE,IAAAA,QAAQ,EAAE;GACV;EAED,oBACCG,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;AAAInC,IAAAA,SAAS,EAAEqB;GAAY,eAC1Ba,KAAA,CAAAC,aAAA,CAACC,aAAa,EAAAC,QAAA,KACTzB,IAAI,EAAA;AACRZ,IAAAA,SAAS,EAAED,WAAY;AACvBG,IAAAA,IAAI,EAAC,OAAO;AACZoC,IAAAA,IAAI,eAAEJ,KAAA,CAAAC,aAAA,CAACI,MAAM,EAAA;MAACC,GAAG,EAAEhB,KAAK,CAACtB,IAAI;AAAE,KAAE,CAAE;AACnCuC,IAAAA,OAAO,EAAExB,aAAc;AACvByB,IAAAA,QAAQ,EAAEhC,eAAgB;AAC1BiC,IAAAA,KAAK,EAAE1C,QAAQ,GAAG,UAAU,GAAG,SAAU;AACzCG,IAAAA,IAAI,EAAEA,IAAI,IAAI6B,WAAW,CAAC/B,IAAI,CAAE;AAChC0C,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,SAAS,EAAEvC;AAAc,GAAA,CACzB,CACE,CAAC;AAEP;;;;"}

package/dist/esm/components/panel/MrlPanel/MrlPanel.js CHANGED Viewed

@@ -5,6 +5,7 @@ import styles from './MrlPanel.module.scss.js';
 import { close } from '@muraldevkit/ds-icons';
 import { useHasFocusableDescendant } from '../../../hooks/useHasFocusableDescendant/index.js';
 import { useScrollbarInfo } from '../../../hooks/useScrollbarInfo/index.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { getUniqueId } from '../../../utils/setAttributes/setAttributes.js';
 import { MrlPanelContext } from '../MrlPanelContext/MrlPanelContext.js';
 import { MrlFocusTrap } from '../../focus-trap/MrlFocusTrap/MrlFocusTrap.js';
@@ -14,7 +15,7 @@ import { MrlTextHeading } from '../../text/MrlTextHeading/MrlTextHeading.js';
 import { MrlIconButton } from '../../button/MrlIconButton/MrlIconButton.js';
 import { MrlText } from '../../text/MrlText/MrlText.js';
-var _excluded = ["className", "title", "id", "children", "hasStickyHeader", "header", "description", "disableAutofocus", "topActions", "hasDataScrollAnchor", "onClose", "data-qa"];
+var _excluded = ["className", "title", "id", "children", "hasStickyHeader", "header", "description", "disableAutofocus", "topActions", "hasDataScrollAnchor", "onClose", "eventId", "data-qa"];
 /**
  * Props for the MrlPanel component.
@@ -38,10 +39,29 @@ var MrlPanel = /*#__PURE__*/React.forwardRef(function MrlPanel(props, ref) {
     topActions = props.topActions,
     hasDataScrollAnchor = props.hasDataScrollAnchor,
     onClose = props.onClose,
+    eventId = props.eventId,
     _props$dataQa = props['data-qa'],
     qa = _props$dataQa === void 0 ? 'panel' : _props$dataQa,
     rest = _objectWithoutProperties(props, _excluded);
   var panelRef = React.useRef(null);
+  var trackInteraction = useMrlTrackInteraction('MrlPanel', eventId);
+  React.useEffect(() => {
+    trackInteraction({
+      action: 'open'
+    });
+    // the panel is open for as long as the consumer renders it
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  /**
+   * Handles closing the panel from both the close button and the escape key.
+   */
+  var handleClose = React.useCallback(() => {
+    trackInteraction({
+      action: 'close'
+    });
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [onClose, trackInteraction]);
   // Unique ID for aria-describedby
   var descriptionIdRef = React.useRef(description ? getUniqueId('mrl-panel-description') : '');
@@ -59,9 +79,9 @@ var MrlPanel = /*#__PURE__*/React.forwardRef(function MrlPanel(props, ref) {
     if (e.key === 'Escape' && typeof onClose === 'function') {
       e.preventDefault();
       e.stopPropagation();
-      onClose();
+      handleClose();
     }
-  }, [onClose]);
+  }, [onClose, handleClose]);
   var panelClasses = classnames(styles['MrlPanel'], 'MrlPanel', className);
   return /*#__PURE__*/React.createElement(MrlPanelContext.Provider, {
     value: {
@@ -113,7 +133,7 @@ var MrlPanel = /*#__PURE__*/React.forwardRef(function MrlPanel(props, ref) {
     icon: /*#__PURE__*/React.createElement(MrlSvg, {
       svg: close
     }),
-    onClick: onClose,
+    onClick: handleClose,
     text: "Close",
     size: "small",
     state: "default",