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

package/dist/components/form/text-input/MrlTextInput/MrlTextInput.d.ts

@@ -32,6 +32,14 @@ interface MrlTextInputProps extends Omit<MrlComponentProps, 'style'>, React.Comp
     dynamicIcon?: RightActionConfig;
     /** Preset for setting up a clearable input via a right icon */
     isClearable?: boolean;
+    /**
+     * Enables interaction tracking for this input. Provide a stable, non-PII id
+     * (e.g. 'mural-search'). When omitted, the input emits no analytics.
+     *
+     * Note: the input's value is never emitted, and `change` is emitted once per
+     * editing session (on blur, when the value actually changed) rather than per keystroke.
+     */
+    eventId?: string;
 }
 /**
  * Allows the user to input plain text

package/dist/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.d.ts

@@ -34,6 +34,14 @@ interface MrlEditableTextareaProps extends React.TextareaHTMLAttributes<HTMLText
     setIsEditable?: (isEditableUpdate: boolean) => void;
     /** Autoexpand will automatically adjust the height of the textarea based on the amount of text within it */
     autoExpand?: boolean;
+    /**
+     * Enables interaction tracking for this textarea. Provide a stable, non-PII id
+     * (e.g. 'mural-description'). When omitted, the textarea emits no analytics.
+     *
+     * Note: the textarea's value is never emitted, and `change` is emitted once per
+     * editing session (on blur, when the value actually changed) rather than per keystroke.
+     */
+    eventId?: string;
 }
 /**
  * Allows the user to input plain text in a multi-line format

package/dist/components/form/textarea/MrlTextarea/MrlTextarea.d.ts

@@ -27,11 +27,19 @@ interface MrlTextareaProps {
     className?: string;
     /** Autoexpand will automatically adjust the height of the textarea based on the amount of text within it */
     autoExpand?: boolean;
+    /**
+     * Enables interaction tracking for this textarea. Provide a stable, non-PII id
+     * (e.g. 'template-description'). When omitted, the textarea emits no analytics.
+     *
+     * Note: the textarea's value is never emitted, and `change` is emitted once per
+     * editing session (on blur, when the value actually changed) rather than per keystroke.
+     */
+    eventId?: string;
 }
 /**
  * Allows the user to input plain text in a multi-line format
  * @param {MrlTextareaProps} props - the component props
  * @returns a textarea element
  */
-export declare function MrlTextarea({ attrs, className, inputId, state, maxLength, placeholder, value, autoExpand, ...rest }: MrlTextareaProps): JSX.Element;
+export declare function MrlTextarea({ attrs, className, inputId, state, maxLength, placeholder, eventId, value, autoExpand, ...rest }: MrlTextareaProps): JSX.Element;
 export {};

package/dist/components/layout/MrlSidebar/MrlSidebar.d.ts

@@ -7,6 +7,13 @@ interface MrlSidebarHook {
     hookClose?: (info: MrlSidebarHookInfo) => void;
     hookOpen?: (info: MrlSidebarHookInfo) => void;
 }
+interface MrlSidebarAnalytics {
+    /**
+     * Enables interaction tracking for this sidebar. Provide a stable, non-PII id
+     * (e.g. 'dashboard-sidebar'). When omitted, the sidebar emits no analytics.
+     */
+    eventId?: string;
+}
 export interface MrlSidebarHandle {
     close: () => void;
     open: () => void;
@@ -17,5 +24,5 @@ export interface MrlSidebarHandle {
  * @param props - component props
  * @returns a MrlSidebar React component.
  */
-export declare const MrlSidebar: React.ForwardRefExoticComponent<LayoutComponent & LayoutSection & MrlSidebarHook & React.RefAttributes<MrlSidebarHandle>>;
+export declare const MrlSidebar: React.ForwardRefExoticComponent<LayoutComponent & LayoutSection & MrlSidebarHook & MrlSidebarAnalytics & React.RefAttributes<MrlSidebarHandle>>;
 export {};

package/dist/components/link/MrlLink/MrlLink.d.ts

@@ -39,6 +39,11 @@ export interface MrlLinkProptypes extends React.ComponentProps<'a'> {
      * Custom on click listener
      */
     onClick?: (e: React.MouseEvent<HTMLElement>) => void | undefined;
+    /**
+     * Enables interaction tracking for this link. Provide a stable, non-PII id
+     * (e.g. 'help-center-link'). When omitted, the link emits no analytics.
+     */
+    eventId?: string;
 }
 /**
  * Renders a link component
@@ -46,4 +51,4 @@ export interface MrlLinkProptypes extends React.ComponentProps<'a'> {
  * @param {MrlLinkProptypes} props the props for your MrlLink
  * @returns {React.ReactElement} an a element containing the text you pass
  */
-export declare const MrlLink: ({ target, className, color, kind, size, href, attrs, onClick, text, ...remainingProps }: MrlLinkProptypes) => React.ReactElement;
+export declare const MrlLink: ({ target, className, color, kind, size, href, attrs, onClick, text, eventId, ...remainingProps }: MrlLinkProptypes) => React.ReactElement;

package/dist/components/link/MrlLinkButton/MrlLinkButton.d.ts

@@ -46,6 +46,11 @@ export interface MrlLinkButtonProps extends Omit<MrlComponentProps, 'style'>, Re
      * Tooltip configuration for the button
      */
     tooltip?: TooltipConfig;
+    /**
+     * Enables interaction tracking for this link button. Provide a stable, non-PII id
+     * (e.g. 'upgrade-plan-cta'). When omitted, the link button emits no analytics.
+     */
+    eventId?: string;
 }
 /**
  * Warning: use this component with care. Our links generally do not look like buttons.

package/dist/components/menu/MrlMenu/MrlMenu.d.ts

@@ -105,6 +105,11 @@ export interface MrlMenuProps {
      * @param type - type of close event
      */
     onClose?: (type?: string) => void;
+    /**
+     * Enables interaction tracking for this menu. Provide a stable, non-PII id
+     * (e.g. 'mural-context-menu'). When omitted, the menu emits no analytics.
+     */
+    eventId?: string;
 }
 /**
  * MrlMenu component
@@ -113,7 +118,7 @@ export interface MrlMenuProps {
  * @param {MrlMenuProps} props - The props for the MrlMenu component
  * @returns {Element} - rendered MrlMenu component
  */
-export declare function MrlMenu({ actionState, alignment, children, closeOnScroll, closeParent, customPosition, clickOutsideEvent, disableArrowOpen, disableFlipping, id, isInternal, isSubMenu, spacing, menuOffset, portalProps, position, triggerStopPropagation, onClose, triggerRef, ...remainingProps }: MrlMenuProps): JSX.Element;
+export declare function MrlMenu({ actionState, alignment, children, closeOnScroll, closeParent, customPosition, clickOutsideEvent, disableArrowOpen, disableFlipping, id, isInternal, isSubMenu, spacing, menuOffset, portalProps, position, triggerStopPropagation, onClose, eventId, triggerRef, ...remainingProps }: MrlMenuProps): JSX.Element;
 export declare namespace MrlMenu {
     var componentType: string;
 }

package/dist/components/menu/MrlMenuItem/MrlMenuItem.d.ts

@@ -39,6 +39,11 @@ export interface MrlMenuItemProps {
     role?: MenuItemRole;
     /** If the menu item is selected */
     selected?: boolean;
+    /**
+     * Enables interaction tracking for this menu item. Provide a stable, non-PII id
+     * (e.g. 'mural-menu-duplicate'). When omitted, the menu item emits no analytics.
+     */
+    eventId?: string;
 }
 /**
  * MrlMenuItem component
@@ -47,4 +52,4 @@ export interface MrlMenuItemProps {
  * @param {MrlMenuItemProps} props - The props for the MrlMenuItem component
  * @returns {Element} - rendered MrlMenuItem component
  */
-export declare function MrlMenuItem({ ariaDescribedBy, ariaHasPopup, children, className, dataQa, disabled, icon, id, onClick, onMouseOut, onMouseOver, role, selected, ...rest }: MrlMenuItemProps): JSX.Element;
+export declare function MrlMenuItem({ ariaDescribedBy, ariaHasPopup, children, className, dataQa, disabled, icon, id, onClick, onMouseOut, onMouseOver, role, selected, eventId, ...rest }: MrlMenuItemProps): JSX.Element;

package/dist/components/menu/MrlMenuItemLink/MrlMenuItemLink.d.ts

@@ -27,6 +27,11 @@ export interface MrlMenuItemLinkProps {
     selected?: boolean;
     /** Rel attr for the menu item */
     rel?: string;
+    /**
+     * Enables interaction tracking for this menu item. Provide a stable, non-PII id
+     * (e.g. 'help-menu-docs'). When omitted, the menu item emits no analytics.
+     */
+    eventId?: string;
 }
 /**
  * MrlMenuItem component
@@ -35,4 +40,4 @@ export interface MrlMenuItemLinkProps {
  * @param {MrlMenuItemLinkProps} props - The props for the MrlMenuItem component
  * @returns {Element} - rendered MrlMenuItem component
  */
-export declare function MrlMenuItemLink({ ariaDescribedBy, children, className, dataQa, disabled, href, icon, id, onClick, selected, target, ...rest }: MrlMenuItemLinkProps): JSX.Element;
+export declare function MrlMenuItemLink({ ariaDescribedBy, children, className, dataQa, disabled, href, icon, id, onClick, selected, target, eventId, ...rest }: MrlMenuItemLinkProps): JSX.Element;

package/dist/components/modal/MrlModal/MrlModal.d.ts

@@ -39,6 +39,11 @@ interface ModalProps extends MrlComponentProps {
     state?: ModalState;
     /** Additional function to be run when the modal closes */
     hookClose?: (() => void) | undefined;
+    /**
+     * Enables interaction tracking for this modal. Provide a stable, non-PII id
+     * (e.g. 'share-mural-modal'). When omitted, the modal emits no analytics.
+     */
+    eventId?: string;
 }
 /**
  * Modal Component.

package/dist/components/notification/MrlBlockNotification/MrlBlockNotification.d.ts

@@ -88,6 +88,13 @@ export interface MrlBlockNotificationProps {
      * Callback to be called when component closes (see useAutoClose)
      */
     onAutoClose?: Parameters<useAutoClose>[2];
+    /**
+     * Enables interaction tracking for this notification. Provide a stable, non-PII id
+     * (e.g. 'trial-expiry-notification'). When omitted, the notification emits no analytics.
+     *
+     * Note: heading and message text are never emitted.
+     */
+    eventId?: string;
 }
 /**
  * Block Notification Component

package/dist/components/notification/MrlToast/MrlToast.d.ts

@@ -57,10 +57,17 @@ export interface MrlToastProps {
     /** Determines whether the close icon button should be shown. */
     showCloseButton?: boolean;
     showIcon?: boolean;
+    /**
+     * Enables interaction tracking for this toast. Provide a stable, non-PII id
+     * (e.g. 'export-complete-toast'). When omitted, the toast emits no analytics.
+     *
+     * Note: message text is never emitted.
+     */
+    eventId?: string;
 }
 /**
  * MrlToast component.
  * @param {MrlToastProps} props - The props for the MrlToast component.
  * @returns {React.ReactElement} The MrlToast component.
  */
-export declare const MrlToast: ({ ["data-qa"]: qa, autoClose, avatar, backgroundColor, className, closeAfterMs, kind, link, onClose, primaryCTA, primaryMessage, secondaryCTA, secondaryMessage, showCloseButton, showIcon, ...rest }: MrlToastProps) => React.ReactElement;
+export declare const MrlToast: ({ ["data-qa"]: qa, autoClose, avatar, backgroundColor, className, closeAfterMs, kind, link, onClose, primaryCTA, primaryMessage, secondaryCTA, secondaryMessage, showCloseButton, showIcon, eventId, ...rest }: MrlToastProps) => React.ReactElement;

package/dist/components/pagination/MrlPaginationButton/MrlPaginationButton.d.ts

@@ -15,6 +15,11 @@ interface MrlPaginationButtonProps {
     handleClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
     /** Pagination heading */
     text?: string;
+    /**
+     * Enables interaction tracking for this button. Provide a stable, non-PII id
+     * (e.g. 'templates-pagination'). When omitted, the button emits no analytics.
+     */
+    eventId?: string;
     /** The anchor of the tooltips on the buttons */
     tooltipAnchor?: MrlTooltipAnchor;
     /** The placement of the tooltips on the buttons */
@@ -25,5 +30,5 @@ interface MrlPaginationButtonProps {
  * @param {MrlPaginationButtonProps} props - the component props
  * @returns a pagintaion button
  */
-export declare function MrlPaginationButton({ buttonClass, className, disabled, kind, handleClick, text, tooltipAnchor, tooltipPosition, ...rest }: MrlPaginationButtonProps): JSX.Element;
+export declare function MrlPaginationButton({ buttonClass, className, disabled, kind, handleClick, text, tooltipAnchor, tooltipPosition, eventId, ...rest }: MrlPaginationButtonProps): JSX.Element;
 export {};

package/dist/components/panel/MrlPanel/MrlPanel.d.ts

@@ -42,6 +42,14 @@ interface MrlPanelProps extends React.ComponentPropsWithRef<'div'> {
      * hasDataScrollAnchor is required to enable infinite scroll
      */
     hasDataScrollAnchor?: boolean;
+    /**
+     * Enables interaction tracking for this panel. Provide a stable, non-PII id
+     * (e.g. 'comments-panel'). When omitted, the panel emits no analytics.
+     *
+     * `open` is emitted when the panel mounts, since consumers control the panel's
+     * presence by rendering it.
+     */
+    eventId?: string;
 }
 /**
  * MrlPanel component.

package/dist/components/popover/MrlPopover/MrlPopover.d.ts

@@ -117,6 +117,11 @@ export interface MrlPopoverProps {
      * data-qa attribute for the popover
      */
     ['data-qa']?: string;
+    /**
+     * Enables interaction tracking for this popover. Provide a stable, non-PII id
+     * (e.g. 'sticky-note-color-picker'). When omitted, the popover emits no analytics.
+     */
+    eventId?: string;
 }
 /**
  * MrlPopover
@@ -125,7 +130,7 @@ export interface MrlPopoverProps {
  * @param {MrlPopoverProps} props - The props for the MrlPopover component
  * @returns {Element} - rendered MrlPopover component
  */
-export declare function MrlPopover({ alignment, ariaLabel, ariaLabelledBy, children, className, customPosition, disableClickToOpen, disableClickOutside, disableFlipping, disableFocusTrap, hasCloseButton, spacing, id, isSubMenu, actionState, position, point, portalProps, kind, offset, onClose, onOpen, triggerRef, ...rest }: MrlPopoverProps): JSX.Element;
+export declare function MrlPopover({ alignment, ariaLabel, ariaLabelledBy, children, className, customPosition, disableClickToOpen, disableClickOutside, disableFlipping, disableFocusTrap, hasCloseButton, spacing, id, isSubMenu, actionState, position, point, portalProps, kind, offset, onClose, onOpen, eventId, triggerRef, ...rest }: MrlPopoverProps): JSX.Element;
 export declare namespace MrlPopover {
     var componentType: string;
 }

package/dist/components/table/MrlSmartTable/MrlSmartTable.d.ts

@@ -214,6 +214,13 @@ export interface MrlSmartTableProps extends Partial<Pick<MrlTableProps, 'aria-la
      * @default false
      */
     enableVirtualization?: boolean;
+    /**
+     * Enables interaction tracking for this table. Provide a stable, non-PII id
+     * (e.g. 'workspace-members-table'). When omitted, the table emits no analytics.
+     *
+     * Note: row content is never emitted — selection events carry counts only.
+     */
+    eventId?: string;
 }
 /**
  * MrlSmartTable Component

package/dist/components/table/MrlTableRow/MrlTableRow.d.ts

@@ -16,6 +16,13 @@ export interface MrlTableRowProps extends React.ComponentPropsWithoutRef<'tr'> {
      * Custom click handler to be used for mouse and keyboard selection of table row
      */
     onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent) => void;
+    /**
+     * Enables interaction tracking for this row. Provide a stable, non-PII id
+     * (e.g. 'members-table-row'). When omitted, the row emits no analytics.
+     *
+     * Note: row content is never emitted.
+     */
+    eventId?: string;
 }
 /**
  * MrlTableRow Component

package/dist/components/tabs/MrlTab/MrlTab.d.ts

@@ -11,10 +11,15 @@ export interface MrlTabProps extends React.ComponentProps<'button'> {
     /** An addition function to call when clicking on a tab */
     hookClick?: () => void;
     text: string;
+    /**
+     * Enables interaction tracking for this tab. Provide a stable, non-PII id
+     * (e.g. 'settings-tabs'). When omitted, the tab emits no analytics.
+     */
+    eventId?: string;
 }
 /**
  * Renders a tab component
  * @param {MrlTabProps} props the props for your MrlTab
  * @returns {React.ReactElement} an a element containing the text you pass
  */
-export declare const MrlTab: ({ className, icon, id, hookClick, text, ...rest }: MrlTabProps) => React.ReactElement;
+export declare const MrlTab: ({ className, icon, id, hookClick, text, eventId, ...rest }: MrlTabProps) => React.ReactElement;

package/dist/components/tabs/MrlTabLink/MrlTabLink.d.ts

@@ -18,6 +18,11 @@ export interface MrlTabLinkProps extends NavLinkProps {
      * use children to provide content
      */
     text?: string;
+    /**
+     * Enables interaction tracking for this tab. Provide a stable, non-PII id
+     * (e.g. 'workspace-nav-tabs'). When omitted, the tab emits no analytics.
+     */
+    eventId?: string;
 }
 /**
  * Renders a tab component
@@ -25,4 +30,4 @@ export interface MrlTabLinkProps extends NavLinkProps {
  * @param {MrlTabLinkProps} props the props for your MrlTabLink
  * @returns {React.ReactElement} an a element containing the text you pass
  */
-export declare const MrlTabLink: ({ className, children, icon, id, hookClick, text, to, ...remainingProps }: MrlTabLinkProps) => React.ReactElement;
+export declare const MrlTabLink: ({ className, children, icon, id, hookClick, text, to, eventId, ...remainingProps }: MrlTabLinkProps) => React.ReactElement;

package/dist/components/toolbar/MrlToolbarButton/MrlToolbarButton.d.ts

@@ -29,6 +29,11 @@ export interface MrlToolbarButtonProps {
      */
     renderInMenu?: boolean;
     text: string;
+    /**
+     * Enables interaction tracking for this button. Provide a stable, non-PII id
+     * (e.g. 'canvas-toolbar-shapes'). When omitted, the button emits no analytics.
+     */
+    eventId?: string;
     /**
      * Props used to control the display of the button in the toolbar.
      */

package/dist/components/tooltip/MrlTooltip/MrlTooltip.d.ts

@@ -39,6 +39,14 @@ interface MrlTooltipProps {
     tooltipContentClass?: string;
     /** A custom render function to render the tooltip content */
     customRender?: (text?: string) => React.ReactNode;
+    /**
+     * Enables interaction tracking for this tooltip. Provide a stable, non-PII id
+     * (e.g. 'facilitation-timer-tooltip'). When omitted, the tooltip emits no analytics.
+     *
+     * Note: tooltips open on hover, so an instrumented tooltip is a high-volume source.
+     * Only add an id where the reveal itself is the signal you need.
+     */
+    eventId?: string;
 }
 /**
  * MrlTooltip Component

package/dist/contexts/MrlAnalyticsContext/types.d.ts

@@ -12,7 +12,7 @@ export interface MrlAnalyticsEvent {
      * Consumer-supplied attribution id. REQUIRED for an event to fire (opt-in).
      * Must be a stable, non-PII identifier (e.g. 'board-share', not the user's name).
      */
-    trackingId: string;
+    eventId: string;
     /** Non-PII component variant, e.g. button kind/size. Set by the component. */
     variant?: string;
     /** Curated, non-PII extra context. Never button labels, input values, etc. */

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

@@ -4,12 +4,13 @@ import classnames from 'classnames';
 import { _isSelected, _isDisabled } from '../../button/helpers.js';
 import { buttonDefaults } from '../../button/constants.js';
 import styles from './MrlAvatarButton.module.scss.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { setAttributes } from '../../../utils/setAttributes/setAttributes.js';
 import { MrlTooltip } from '../../tooltip/MrlTooltip/MrlTooltip.js';
 import { MrlAvatar } from '../MrlAvatar/MrlAvatar.js';
 import { MrlSpinner } from '../../loader/MrlSpinner/MrlSpinner.js';
 
-var _excluded = ["buttonClassName", "dataQa", "id", "includeInRoving", "isToggleButton", "label", "loading", "loadingText", "onClick", "size", "state", "toggleAria", "tooltip", "triggerRef"];
+var _excluded = ["buttonClassName", "dataQa", "id", "includeInRoving", "isToggleButton", "label", "loading", "loadingText", "onClick", "size", "state", "toggleAria", "tooltip", "eventId", "triggerRef"];
 /**
  * Renders an avatar button
  * @param {MrlAvatarButtonPropTypes} props the props for your MrlAvatarButton
@@ -33,12 +34,14 @@ var MrlAvatarButton = _ref => {
     _ref$toggleAria = _ref.toggleAria,
     toggleAria = _ref$toggleAria === void 0 ? buttonDefaults.toggleAria : _ref$toggleAria,
     tooltip = _ref.tooltip,
+    eventId = _ref.eventId,
     triggerRef = _ref.triggerRef,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(() => _isSelected(state)),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isSelected = _React$useState2[0],
     setIsSelected = _React$useState2[1];
+  var trackInteraction = useMrlTrackInteraction('MrlAvatarButton', eventId);
 
   /**
    * We need to watch the value of state to keep in sync
@@ -76,6 +79,10 @@ var MrlAvatarButton = _ref => {
     if (_isDisabled(state, loading)) {
       return;
     }
+    trackInteraction({
+      action: 'click',
+      variant: size
+    });
     if (isToggleButton) {
       setIsSelected(prevIsSelected => !prevIsSelected);
     }

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

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

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

@@ -4,10 +4,11 @@ import classnames from 'classnames';
 import { Link } from 'react-router-dom';
 import styles from './MrlBreadcrumbItem.module.scss.js';
 import { more } from '@muraldevkit/ds-icons';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
 import { MrlBreadcrumbSeparator } from '../MrlBreadcrumbSeparator/MrlBreadcrumbSeparator.js';
 
-var _excluded = ["link", "text", "isSelected", "hasSeparator", "isTruncated"];
+var _excluded = ["link", "text", "isSelected", "hasSeparator", "isTruncated", "eventId"];
 /**
  * MrlBreadcrumbItem component.
  * @param props The MrlBreadcrumbItem component properties.
@@ -21,22 +22,31 @@ function MrlBreadcrumbItem(props) {
     hasSeparator = _props$hasSeparator === void 0 ? true : _props$hasSeparator,
     _props$isTruncated = props.isTruncated,
     isTruncated = _props$isTruncated === void 0 ? false : _props$isTruncated,
+    eventId = props.eventId,
     rest = _objectWithoutProperties(props, _excluded);
+  var trackInteraction = useMrlTrackInteraction('MrlBreadcrumbItem', eventId);
   var breadcrumbItem = React.useMemo(() => {
+    // the selected crumb is the current page, so it navigates nowhere and emits nothing.
     if (isSelected) {
       // eslint-disable-next-line jsx-a11y/anchor-is-valid
       return /*#__PURE__*/React.createElement("a", {
         "aria-current": "page"
       }, text);
     }
+    var handleClick = () => trackInteraction({
+      action: 'click'
+    });
     if (typeof link === 'string') {
       return /*#__PURE__*/React.createElement("a", {
-        href: link
+        href: link,
+        onClick: handleClick
       }, text);
     } else if (typeof link === 'object') {
-      return /*#__PURE__*/React.createElement(Link, link, text);
+      return /*#__PURE__*/React.createElement(Link, _extends({}, link, {
+        onClick: handleClick
+      }), text);
     }
-  }, [link, text, isSelected]);
+  }, [link, text, isSelected, trackInteraction]);
   return /*#__PURE__*/React.createElement("li", _extends({}, rest, {
     className: classnames(styles['MrlBreadcrumbItem'], 'MrlBreadcrumbItem', {
       [styles['MrlBreadcrumbItem--selected']]: isSelected,

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

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

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

@@ -5,10 +5,11 @@ import { MrlSvgAnimate } from '../../svg/MrlSvgAnimate/MrlSvgAnimate.js';
 import { MrlTooltipDefaults } from '../../tooltip/constants.js';
 import { buttonDefaults } from '../constants.js';
 import { _isSelected, _isDisabled, _isToggleButton } from '../helpers.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { setAttributes } from '../../../utils/setAttributes/setAttributes.js';
 import { MrlTooltip } from '../../tooltip/MrlTooltip/MrlTooltip.js';
 
-var _excluded = ["attrs", "badge", "disableEvents", "icon", "kind", "loading", "onClick", "position", "toggleAria", "toggleStyle", "text", "tipAnchor", "size", "state"];
+var _excluded = ["attrs", "badge", "disableEvents", "icon", "kind", "loading", "onClick", "position", "toggleAria", "toggleStyle", "text", "tipAnchor", "eventId", "size", "state"];
 var MrlAnimatedIconButton = /*#__PURE__*/React.forwardRef(function MrlAnimatedIconButton(_ref, ref) {
   var _ref$attrs = _ref.attrs,
     attrs = _ref$attrs === void 0 ? {} : _ref$attrs,
@@ -29,6 +30,7 @@ var MrlAnimatedIconButton = /*#__PURE__*/React.forwardRef(function MrlAnimatedIc
     text = _ref.text,
     _ref$tipAnchor = _ref.tipAnchor,
     tipAnchor = _ref$tipAnchor === void 0 ? MrlTooltipDefaults.anchor : _ref$tipAnchor,
+    eventId = _ref.eventId,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? buttonDefaults.size : _ref$size,
     _ref$state = _ref.state,
@@ -49,6 +51,7 @@ var MrlAnimatedIconButton = /*#__PURE__*/React.forwardRef(function MrlAnimatedIc
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     isSelected = _React$useState6[0],
     setIsSelected = _React$useState6[1];
+  var trackInteraction = useMrlTrackInteraction('MrlAnimatedIconButton', eventId);
   var buttonRef = React.useRef(null);
   /**
    * `useImperativeHandle` customizes the instance value
@@ -80,6 +83,10 @@ var MrlAnimatedIconButton = /*#__PURE__*/React.forwardRef(function MrlAnimatedIc
     if (_isDisabled(state, loading) || disableEvents) {
       return;
     }
+    trackInteraction({
+      action: 'click',
+      variant: kind
+    });
     if (isToggleButton) {
       setIsSelected(prevIsSelected => !prevIsSelected);
     }