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/form/textarea/MrlEditableTextarea/MrlEditableTextarea.js CHANGED Viewed

@@ -6,9 +6,10 @@ import styles from './MrlEditableTextarea.module.scss.js';
 import { useIsEditable } from '../../hooks/useIsEditable.js';
 import { useActiveColor } from '../../hooks/useActiveColor.js';
 import { MrlEditableTextareaRightButton } from './MrlEditableTextareaRightButton.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlSvg } from '../../../svg/MrlSvg/MrlSvg.js';
-var _excluded = ["autoExpand", "className", "inputId", "inputLabelText", "maxLength", "placeholder", "state", "value", "error", "isEditable", "setIsEditable"];
+var _excluded = ["autoExpand", "className", "inputId", "inputLabelText", "maxLength", "placeholder", "state", "value", "error", "isEditable", "setIsEditable", "eventId"];
 /**
  * Allows the user to input plain text in a multi-line format
  * @param {MrlEditableTextareaProps} props - the component props
@@ -27,12 +28,17 @@ var MrlEditableTextarea = /*#__PURE__*/React.forwardRef(function MrlEditableText
     error$1 = props.error,
     controlledIsEditable = props.isEditable,
     controlledIsEditableUpdate = props.setIsEditable,
+    eventId = props.eventId,
     attrs = _objectWithoutProperties(props, _excluded);
   // html id to be reference by input and error description to relay the error for a specific input
   var describedById = "".concat(inputId, "-description");
   var textareaRef = React.useRef(null);
   var iconRef = React.useRef(null);
+  // the value when the field gained focus, so `change` can be emitted once per
+  // editing session instead of once per keystroke.
+  var valueOnFocusRef = React.useRef('');
+  var trackInteraction = useMrlTrackInteraction('MrlEditableTextarea', eventId);
   var _useActiveColor = useActiveColor(state),
     hasActiveColor = _useActiveColor.hasActiveColor,
     setHasActiveColor = _useActiveColor.setHasActiveColor;
@@ -95,15 +101,23 @@ var MrlEditableTextarea = /*#__PURE__*/React.forwardRef(function MrlEditableText
     setIsEditable(false);
     setIsEditing(false);
     setHasEdited(false);
+    // the value itself is never emitted — only the fact that it changed.
+    if (e.target.value !== valueOnFocusRef.current) {
+      trackInteraction({
+        action: 'change'
+      });
+    }
     if (typeof attrs.onBlur === 'function') {
       attrs.onBlur(e);
     }
-  }, [attrs, setHasActiveColor, setIsEditable, setIsEditing]);
+  }, [attrs, setHasActiveColor, setIsEditable, setIsEditing, trackInteraction]);
   var handleOnFocus = React.useCallback(e => {
     setHasActiveColor(true);
     setIsEditable(true);
     setIsEditing(true);
     setHasEdited(true);
+    valueOnFocusRef.current = e.target.value;
     if (typeof attrs.onFocus === 'function') {
       attrs.onFocus(e);
     }
@@ -121,10 +135,13 @@ var MrlEditableTextarea = /*#__PURE__*/React.forwardRef(function MrlEditableText
     }
   }, [attrs, setHasActiveColor]);
   var onClickEdit = React.useCallback(() => {
+    trackInteraction({
+      action: 'edit'
+    });
     setIsEditable(true);
     setIsEditing(true);
     setHasEdited(true);
-  }, [setIsEditable, setIsEditing, setHasEdited]);
+  }, [setIsEditable, setIsEditing, setHasEdited, trackInteraction]);
   var hasCounter = typeof maxLength !== 'undefined' && Number(maxLength) > 0 && state !== 'read-only';
   if (hasCounter && isNaN(Number(maxLength))) {
     throw new Error('maxLength should have type number');

package/dist/esm/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlEditableTextarea.js","sources":["../../../../../../src/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { edit, error as errorIcon } from '@muraldevkit/ds-icons';\n\nimport styles from './MrlEditableTextarea.module.scss';\nimport './MrlEditableTextarea.global.scss';\nimport { useIsEditable } from '../../hooks/useIsEditable';\nimport { useActiveColor } from '../../hooks/useActiveColor';\nimport { InputStates, MrlFormInputError, MrlSvg } from '../../..';\nimport { MrlEditableTextareaRightButton } from './MrlEditableTextareaRightButton';\n\ninterface MrlEditableTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n\t/** The value of the textarea used to make it a controlled input /\n\tvalue: string;\n\t/\n\t \tValue of the label text assigned to the input.\n\t * This is used to describe to the user what field they will be editing when interacting with the edit buton.\n\t /\n\tinputLabelText: string;\n\t/\n\t The maximum number of characters that the user can enter.\n\t * If undefined or set to \"0\", removes the character counter from the textarea\n\t /\n\tmaxLength?: number;\n\t/\n\t Id of the text input.\n\t /\n\tinputId: string;\n\t/\n\t Text placeholder for the text input.\n\t /\n\tplaceholder?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: InputStates;\n\t/* Additional class to add to the textarea /\n\tclassName?: string;\n\t'data-qa': string;\n\terror?: MrlFormInputError;\n\t/ Expost isEditable and setIsEditable as optionally controlled state /\n\tisEditable?: boolean;\n\tsetIsEditable?: (isEditableUpdate: boolean) => void;\n\t/* Autoexpand will automatically adjust the height of the textarea based on the amount of text within it /\n\tautoExpand?: boolean;\n}\n\n/\n Allows the user to input plain text in a multi-line format\n * @param {MrlEditableTextareaProps} props - the component props\n * @returns a textarea element\n */\nexport const MrlEditableTextarea = React.forwardRef<HTMLButtonElement, MrlEditableTextareaProps>(\n\tfunction MrlEditableTextarea(\n\t\tprops: MrlEditableTextareaProps,\n\t\tref: React.Ref<HTMLButtonElement>\n\t): JSX.Element {\n\t\tconst {\n\t\t\tautoExpand = false,\n\t\t\tclassName,\n\t\t\tinputId,\n\t\t\tinputLabelText,\n\t\t\tmaxLength,\n\t\t\tplaceholder,\n\t\t\tstate,\n\t\t\tvalue,\n\t\t\terror,\n\t\t\tisEditable: controlledIsEditable,\n\t\t\tsetIsEditable: controlledIsEditableUpdate,\n\t\t\t...attrs\n\t\t} = props;\n\n\t\t// html id to be reference by input and error description to relay the error for a specific input\n\t\tconst describedById = `${inputId}-description`;\n\t\tconst textareaRef = React.useRef<HTMLTextAreaElement>(null);\n\t\tconst iconRef = React.useRef<HTMLButtonElement>(null);\n\n\t\tconst { hasActiveColor, setHasActiveColor } = useActiveColor(state);\n\t\tconst { isEditable, isEditing, setIsEditable, setIsEditing } = useIsEditable({\n\t\t\tchangeHandler: controlledIsEditableUpdate,\n\t\t\tinitialValue: false,\n\t\t\tstate,\n\t\t\tvalue: controlledIsEditable\n\t\t});\n\t\t// Allows us to track if the user has edited the input previously.\n\t\t// This helps conditionally focus the icon only when the user is done editing the input.\n\t\tconst [hasEdited, setHasEdited] = React.useState(false);\n\n\t\tReact.useImperativeHandle<HTMLButtonElement \| null, HTMLButtonElement \| null>(\n\t\t\tref,\n\t\t\t() => iconRef.current\n\t\t);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (iconRef.current && (attrs.autoFocus \|\| hasEdited)) {\n\t\t\t\ticonRef.current.focus();\n\t\t\t}\n\t\t}, [attrs, iconRef, hasEdited]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (textareaRef.current) {\n\t\t\t\tif (isEditable) {\n\t\t\t\t\ttextareaRef.current.focus();\n\t\t\t\t} else {\n\t\t\t\t\ttextareaRef.current.style.height = 'auto';\n\t\t\t\t\tif (!textareaRef.current.value \|\| textareaRef.current.value === '') {\n\t\t\t\t\t\ttextareaRef.current.style.height = '40px';\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttextareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}, [isEditable, isEditing]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!autoExpand \|\| !textareaRef.current) return;\n\n\t\t\ttextareaRef.current.style.height = 'auto';\n\t\t\tif (!textareaRef.current.value \|\| textareaRef.current.value === '') {\n\t\t\t\ttextareaRef.current.style.height = '40px';\n\t\t\t} else {\n\t\t\t\ttextareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\t\t\t}\n\t\t}, [autoExpand, value]);\n\n\t\tconst onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n\t\t\tconst { key } = event;\n\n\t\t\tif (key === 'Escape') {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetIsEditable(false);\n\t\t\t\tsetIsEditing(false);\n\t\t\t}\n\t\t};\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tsetIsEditable(false);\n\t\t\t\tsetIsEditing(false);\n\t\t\t\tsetHasEdited(false);\n\t\t\t\tif (typeof attrs.onBlur === 'function') {\n\t\t\t\t\tattrs.onBlur(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor, setIsEditable, setIsEditing]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tsetIsEditable(true);\n\t\t\t\tsetIsEditing(true);\n\t\t\t\tsetHasEdited(true);\n\t\t\t\tif (typeof attrs.onFocus === 'function') {\n\t\t\t\t\tattrs.onFocus(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor, setIsEditable, setIsEditing]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tif (typeof attrs.onMouseEnter === 'function') {\n\t\t\t\t\tattrs.onMouseEnter(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseLeave = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tif (typeof attrs.onMouseLeave === 'function') {\n\t\t\t\t\tattrs.onMouseLeave(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst onClickEdit = React.useCallback(() => {\n\t\t\tsetIsEditable(true);\n\t\t\tsetIsEditing(true);\n\t\t\tsetHasEdited(true);\n\t\t}, [setIsEditable, setIsEditing, setHasEdited]);\n\n\t\tconst hasCounter =\n\t\t\ttypeof maxLength !== 'undefined' && Number(maxLength) > 0 && state !== 'read-only';\n\n\t\tif (hasCounter && isNaN(Number(maxLength))) {\n\t\t\tthrow new Error('maxLength should have type number');\n\t\t}\n\n\t\tconst hasErrorMessage = state === 'error' && error?.message;\n\n\t\tconst inputClasses = classnames(\n\t\t\tclassName,\n\t\t\tstyles['MrlEditableTextarea'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextarea--readOnly']]: state === 'read-only'\n\t\t\t},\n\t\t\t'MrlEditableTextarea',\n\t\t\t'mrl-textarea'\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className={`${styles['MrlEditableTextarea--wrapper']} MrlEditableTextarea--wrapper`}>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\t{...attrs}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t\tdefaultValue={value}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\t\taria-describedby={hasErrorMessage ? describedById : undefined}\n\t\t\t\t\t\tonBlur={handleOnBlur}\n\t\t\t\t\t\tonFocus={handleOnFocus}\n\t\t\t\t\t\tonMouseEnter={handleOnMouseEnter}\n\t\t\t\t\t\tonMouseLeave={handleOnMouseLeave}\n\t\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\t\tmaxLength={hasCounter ? maxLength : undefined}\n\t\t\t\t\t\treadOnly={state === 'read-only' \|\| !isEditable}\n\t\t\t\t\t\tref={textareaRef}\n\t\t\t\t\t\ttabIndex={!isEditable ? -1 : 0}\n\t\t\t\t\t/>\n\t\t\t\t\t{state !== 'read-only' && state !== 'disabled' && !isEditable && (\n\t\t\t\t\t\t<MrlEditableTextareaRightButton\n\t\t\t\t\t\t\taction={onClickEdit}\n\t\t\t\t\t\t\ticon={edit}\n\t\t\t\t\t\t\tlabel={`Edit ${inputLabelText}`}\n\t\t\t\t\t\t\tdataQa={attrs['data-qa'] && `${attrs['data-qa']}-edit`}\n\t\t\t\t\t\t\thasActiveColor={hasActiveColor \|\| isEditable}\n\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\tref={iconRef}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCounter && isEditable && (\n\t\t\t\t\t<span className={styles['MrlForm-counter']}>\n\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t{value?.length \|\| 0}/{maxLength}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p style={{ display: 'none' }} aria-live=\"polite\" id={`${inputId}-counter`}>\n\t\t\t\t\t\t\t{`${maxLength - (value?.length \|\| 0)} of ${maxLength} characters remaining`}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{state === 'error' && error?.message && (\n\t\t\t\t\t<span className={styles['MrlEditableTextarea-errorMessage']}>\n\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\tclassName={styles['MrlEditableTextarea-errorIcon']}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tsvg={errorIcon}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span id={describedById}>{`${error?.message}`}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n);\n"],"names":["MrlEditableTextarea","React","forwardRef","props","ref","_props$autoExpand","autoExpand","className","inputId","inputLabelText","maxLength","placeholder","state","value","error","controlledIsEditable","isEditable","controlledIsEditableUpdate","setIsEditable","attrs","_objectWithoutProperties","_excluded","describedById","concat","textareaRef","useRef","iconRef","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","_useIsEditable","useIsEditable","changeHandler","initialValue","isEditing","setIsEditing","_React$useState","useState","_React$useState2","_slicedToArray","hasEdited","setHasEdited","useImperativeHandle","current","useEffect","autoFocus","focus","style","height","scrollHeight","onKeyDown","event","key","stopPropagation","preventDefault","handleOnBlur","useCallback","e","onBlur","handleOnFocus","onFocus","handleOnMouseEnter","onMouseEnter","handleOnMouseLeave","onMouseLeave","onClickEdit","hasCounter","Number","isNaN","Error","hasErrorMessage","message","inputClasses","classnames","styles","createElement","Fragment","_extends","id","defaultValue","disabled","undefined","readOnly","tabIndex","MrlEditableTextareaRightButton","action","icon","edit","label","dataQa","length","display","MrlSvg","svg","errorIcon","size"],"mappings":"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"}
1	+ {"version":3,"file":"MrlEditableTextarea.js","sources":["../../../../../../src/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { edit, error as errorIcon } from '@muraldevkit/ds-icons';\n\nimport styles from './MrlEditableTextarea.module.scss';\nimport './MrlEditableTextarea.global.scss';\nimport { useIsEditable } from '../../hooks/useIsEditable';\nimport { useActiveColor } from '../../hooks/useActiveColor';\nimport { InputStates, MrlFormInputError, MrlSvg } from '../../..';\nimport { MrlEditableTextareaRightButton } from './MrlEditableTextareaRightButton';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\ninterface MrlEditableTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n\t/** The value of the textarea used to make it a controlled input /\n\tvalue: string;\n\t/\n\t \tValue of the label text assigned to the input.\n\t * This is used to describe to the user what field they will be editing when interacting with the edit buton.\n\t /\n\tinputLabelText: string;\n\t/\n\t The maximum number of characters that the user can enter.\n\t * If undefined or set to \"0\", removes the character counter from the textarea\n\t /\n\tmaxLength?: number;\n\t/\n\t Id of the text input.\n\t /\n\tinputId: string;\n\t/\n\t Text placeholder for the text input.\n\t /\n\tplaceholder?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: InputStates;\n\t/* Additional class to add to the textarea /\n\tclassName?: string;\n\t'data-qa': string;\n\terror?: MrlFormInputError;\n\t/ Expost isEditable and setIsEditable as optionally controlled state /\n\tisEditable?: boolean;\n\tsetIsEditable?: (isEditableUpdate: boolean) => void;\n\t/* Autoexpand will automatically adjust the height of the textarea based on the amount of text within it /\n\tautoExpand?: boolean;\n\n\t/\n\t Enables interaction tracking for this textarea. Provide a stable, non-PII id\n\t * (e.g. 'mural-description'). When omitted, the textarea emits no analytics.\n\t \n\t Note: the textarea's value is never emitted, and `change` is emitted once per\n\t * editing session (on blur, when the value actually changed) rather than per keystroke.\n\t /\n\teventId?: string;\n}\n\n/\n Allows the user to input plain text in a multi-line format\n * @param {MrlEditableTextareaProps} props - the component props\n * @returns a textarea element\n */\nexport const MrlEditableTextarea = React.forwardRef<HTMLButtonElement, MrlEditableTextareaProps>(\n\tfunction MrlEditableTextarea(\n\t\tprops: MrlEditableTextareaProps,\n\t\tref: React.Ref<HTMLButtonElement>\n\t): JSX.Element {\n\t\tconst {\n\t\t\tautoExpand = false,\n\t\t\tclassName,\n\t\t\tinputId,\n\t\t\tinputLabelText,\n\t\t\tmaxLength,\n\t\t\tplaceholder,\n\t\t\tstate,\n\t\t\tvalue,\n\t\t\terror,\n\t\t\tisEditable: controlledIsEditable,\n\t\t\tsetIsEditable: controlledIsEditableUpdate,\n\t\t\teventId,\n\t\t\t...attrs\n\t\t} = props;\n\n\t\t// html id to be reference by input and error description to relay the error for a specific input\n\t\tconst describedById = `${inputId}-description`;\n\t\tconst textareaRef = React.useRef<HTMLTextAreaElement>(null);\n\t\tconst iconRef = React.useRef<HTMLButtonElement>(null);\n\t\t// the value when the field gained focus, so `change` can be emitted once per\n\t\t// editing session instead of once per keystroke.\n\t\tconst valueOnFocusRef = React.useRef<string>('');\n\n\t\tconst trackInteraction = useMrlTrackInteraction('MrlEditableTextarea', eventId);\n\n\t\tconst { hasActiveColor, setHasActiveColor } = useActiveColor(state);\n\t\tconst { isEditable, isEditing, setIsEditable, setIsEditing } = useIsEditable({\n\t\t\tchangeHandler: controlledIsEditableUpdate,\n\t\t\tinitialValue: false,\n\t\t\tstate,\n\t\t\tvalue: controlledIsEditable\n\t\t});\n\t\t// Allows us to track if the user has edited the input previously.\n\t\t// This helps conditionally focus the icon only when the user is done editing the input.\n\t\tconst [hasEdited, setHasEdited] = React.useState(false);\n\n\t\tReact.useImperativeHandle<HTMLButtonElement \| null, HTMLButtonElement \| null>(\n\t\t\tref,\n\t\t\t() => iconRef.current\n\t\t);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (iconRef.current && (attrs.autoFocus \|\| hasEdited)) {\n\t\t\t\ticonRef.current.focus();\n\t\t\t}\n\t\t}, [attrs, iconRef, hasEdited]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (textareaRef.current) {\n\t\t\t\tif (isEditable) {\n\t\t\t\t\ttextareaRef.current.focus();\n\t\t\t\t} else {\n\t\t\t\t\ttextareaRef.current.style.height = 'auto';\n\t\t\t\t\tif (!textareaRef.current.value \|\| textareaRef.current.value === '') {\n\t\t\t\t\t\ttextareaRef.current.style.height = '40px';\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttextareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}, [isEditable, isEditing]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!autoExpand \|\| !textareaRef.current) return;\n\n\t\t\ttextareaRef.current.style.height = 'auto';\n\t\t\tif (!textareaRef.current.value \|\| textareaRef.current.value === '') {\n\t\t\t\ttextareaRef.current.style.height = '40px';\n\t\t\t} else {\n\t\t\t\ttextareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\t\t\t}\n\t\t}, [autoExpand, value]);\n\n\t\tconst onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n\t\t\tconst { key } = event;\n\n\t\t\tif (key === 'Escape') {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetIsEditable(false);\n\t\t\t\tsetIsEditing(false);\n\t\t\t}\n\t\t};\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tsetIsEditable(false);\n\t\t\t\tsetIsEditing(false);\n\t\t\t\tsetHasEdited(false);\n\n\t\t\t\t// the value itself is never emitted — only the fact that it changed.\n\t\t\t\tif (e.target.value !== valueOnFocusRef.current) {\n\t\t\t\t\ttrackInteraction({ action: 'change' });\n\t\t\t\t}\n\n\t\t\t\tif (typeof attrs.onBlur === 'function') {\n\t\t\t\t\tattrs.onBlur(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor, setIsEditable, setIsEditing, trackInteraction]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tsetIsEditable(true);\n\t\t\t\tsetIsEditing(true);\n\t\t\t\tsetHasEdited(true);\n\t\t\t\tvalueOnFocusRef.current = e.target.value;\n\n\t\t\t\tif (typeof attrs.onFocus === 'function') {\n\t\t\t\t\tattrs.onFocus(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor, setIsEditable, setIsEditing]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tif (typeof attrs.onMouseEnter === 'function') {\n\t\t\t\t\tattrs.onMouseEnter(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseLeave = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tif (typeof attrs.onMouseLeave === 'function') {\n\t\t\t\t\tattrs.onMouseLeave(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst onClickEdit = React.useCallback(() => {\n\t\t\ttrackInteraction({ action: 'edit' });\n\n\t\t\tsetIsEditable(true);\n\t\t\tsetIsEditing(true);\n\t\t\tsetHasEdited(true);\n\t\t}, [setIsEditable, setIsEditing, setHasEdited, trackInteraction]);\n\n\t\tconst hasCounter =\n\t\t\ttypeof maxLength !== 'undefined' && Number(maxLength) > 0 && state !== 'read-only';\n\n\t\tif (hasCounter && isNaN(Number(maxLength))) {\n\t\t\tthrow new Error('maxLength should have type number');\n\t\t}\n\n\t\tconst hasErrorMessage = state === 'error' && error?.message;\n\n\t\tconst inputClasses = classnames(\n\t\t\tclassName,\n\t\t\tstyles['MrlEditableTextarea'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextarea--readOnly']]: state === 'read-only'\n\t\t\t},\n\t\t\t'MrlEditableTextarea',\n\t\t\t'mrl-textarea'\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className={`${styles['MrlEditableTextarea--wrapper']} MrlEditableTextarea--wrapper`}>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\t{...attrs}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t\tdefaultValue={value}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\t\taria-describedby={hasErrorMessage ? describedById : undefined}\n\t\t\t\t\t\tonBlur={handleOnBlur}\n\t\t\t\t\t\tonFocus={handleOnFocus}\n\t\t\t\t\t\tonMouseEnter={handleOnMouseEnter}\n\t\t\t\t\t\tonMouseLeave={handleOnMouseLeave}\n\t\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\t\tmaxLength={hasCounter ? maxLength : undefined}\n\t\t\t\t\t\treadOnly={state === 'read-only' \|\| !isEditable}\n\t\t\t\t\t\tref={textareaRef}\n\t\t\t\t\t\ttabIndex={!isEditable ? -1 : 0}\n\t\t\t\t\t/>\n\t\t\t\t\t{state !== 'read-only' && state !== 'disabled' && !isEditable && (\n\t\t\t\t\t\t<MrlEditableTextareaRightButton\n\t\t\t\t\t\t\taction={onClickEdit}\n\t\t\t\t\t\t\ticon={edit}\n\t\t\t\t\t\t\tlabel={`Edit ${inputLabelText}`}\n\t\t\t\t\t\t\tdataQa={attrs['data-qa'] && `${attrs['data-qa']}-edit`}\n\t\t\t\t\t\t\thasActiveColor={hasActiveColor \|\| isEditable}\n\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\tref={iconRef}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCounter && isEditable && (\n\t\t\t\t\t<span className={styles['MrlForm-counter']}>\n\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t{value?.length \|\| 0}/{maxLength}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p style={{ display: 'none' }} aria-live=\"polite\" id={`${inputId}-counter`}>\n\t\t\t\t\t\t\t{`${maxLength - (value?.length \|\| 0)} of ${maxLength} characters remaining`}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{state === 'error' && error?.message && (\n\t\t\t\t\t<span className={styles['MrlEditableTextarea-errorMessage']}>\n\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\tclassName={styles['MrlEditableTextarea-errorIcon']}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tsvg={errorIcon}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span id={describedById}>{`${error?.message}`}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n);\n"],"names":["MrlEditableTextarea","React","forwardRef","props","ref","_props$autoExpand","autoExpand","className","inputId","inputLabelText","maxLength","placeholder","state","value","error","controlledIsEditable","isEditable","controlledIsEditableUpdate","setIsEditable","eventId","attrs","_objectWithoutProperties","_excluded","describedById","concat","textareaRef","useRef","iconRef","valueOnFocusRef","trackInteraction","useMrlTrackInteraction","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","_useIsEditable","useIsEditable","changeHandler","initialValue","isEditing","setIsEditing","_React$useState","useState","_React$useState2","_slicedToArray","hasEdited","setHasEdited","useImperativeHandle","current","useEffect","autoFocus","focus","style","height","scrollHeight","onKeyDown","event","key","stopPropagation","preventDefault","handleOnBlur","useCallback","e","target","action","onBlur","handleOnFocus","onFocus","handleOnMouseEnter","onMouseEnter","handleOnMouseLeave","onMouseLeave","onClickEdit","hasCounter","Number","isNaN","Error","hasErrorMessage","message","inputClasses","classnames","styles","createElement","Fragment","_extends","id","defaultValue","disabled","undefined","readOnly","tabIndex","MrlEditableTextareaRightButton","icon","edit","label","dataQa","length","display","MrlSvg","svg","errorIcon","size"],"mappings":"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"}

package/dist/esm/components/form/textarea/MrlTextarea/MrlTextarea.js CHANGED Viewed

@@ -2,9 +2,10 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlTextarea.module.scss.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { setAttributes } from '../../../../utils/setAttributes/setAttributes.js';
-var _excluded = ["attrs", "className", "inputId", "state", "maxLength", "placeholder", "value", "autoExpand"];
+var _excluded = ["attrs", "className", "inputId", "state", "maxLength", "placeholder", "eventId", "value", "autoExpand"];
 /**
  * Allows the user to input plain text in a multi-line format
  * @param {MrlTextareaProps} props - the component props
@@ -19,11 +20,16 @@ function MrlTextarea(_ref) {
     state = _ref$state === void 0 ? 'default' : _ref$state,
     maxLength = _ref.maxLength,
     placeholder = _ref.placeholder,
+    eventId = _ref.eventId,
     value = _ref.value,
     _ref$autoExpand = _ref.autoExpand,
     autoExpand = _ref$autoExpand === void 0 ? false : _ref$autoExpand,
     rest = _objectWithoutProperties(_ref, _excluded);
   var textareaRef = React.useRef(null);
+  // the value when the field gained focus, so `change` can be emitted once per
+  // editing session instead of once per keystroke.
+  var valueOnFocusRef = React.useRef('');
+  var trackInteraction = useMrlTrackInteraction('MrlTextarea', eventId);
   React.useEffect(() => {
     if (textareaRef.current && attrs.autofocus) {
       textareaRef.current.focus();
@@ -58,6 +64,35 @@ function MrlTextarea(_ref) {
   delete attrs.class;
   delete attrs.className;
   var attributes = setAttributes(attrs);
+  /**
+   * Handle focus events
+   *
+   * @param {React.FocusEvent<HTMLTextAreaElement>} e - focus event
+   */
+  var handleOnFocus = e => {
+    valueOnFocusRef.current = e.target.value;
+    if (typeof attributes.onFocus === 'function') {
+      attributes.onFocus(e);
+    }
+  };
+  /**
+   * Handle blur events
+   *
+   * @param {React.FocusEvent<HTMLTextAreaElement>} e - blur event
+   */
+  var handleOnBlur = e => {
+    // the value itself is never emitted — only the fact that it changed.
+    if (e.target.value !== valueOnFocusRef.current) {
+      trackInteraction({
+        action: 'change'
+      });
+    }
+    if (typeof attributes.onBlur === 'function') {
+      attributes.onBlur(e);
+    }
+  };
   var renderCounter = () => {
     var displayedValue = dataMaxLength ? dataMaxLength : maxLength;
     var valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;
@@ -78,6 +113,8 @@ function MrlTextarea(_ref) {
     className: "MrlTextarea--wrapper"
   }, /*#__PURE__*/React.createElement("textarea", _extends({}, rest, attributes, {
     id: inputId,
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
     placeholder: placeholder,
     className: inputClasses
     // Force value if defined (controlled component) or pass

package/dist/esm/components/form/textarea/MrlTextarea/MrlTextarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlTextarea.js","sources":["../../../../../../src/components/form/textarea/MrlTextarea/MrlTextarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, setAttributes } from '../../../../utils';\n\nimport styles from './MrlTextarea.module.scss';\nimport './MrlTextarea.global.scss';\n\ntype MrlTextareaState = 'default' \| 'disabled' \| 'error' \| 'read-only';\n\ninterface MrlTextareaProps {\n\t/** Applies additional HTML attributes to the textarea element /\n\tattrs?: AttrsObject;\n\t/* The value of the textarea used to make it a controlled input /\n\tvalue?: string;\n\t/\n\t The maximum number of characters that the user can enter.\n\t * If undefined or set to \"0\", removes the character counter from the textarea\n\t /\n\tmaxLength?: number;\n\t/\n\t Id of the text input.\n\t /\n\tinputId: string;\n\t/\n\t Text placeholder for the text input.\n\t /\n\tplaceholder?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: MrlTextareaState;\n\n\t/* Additional class to add to the textarea /\n\tclassName?: string;\n\n\t/* Autoexpand will automatically adjust the height of the textarea based on the amount of text within it /\n\tautoExpand?: boolean;\n}\n\n/\n Allows the user to input plain text in a multi-line format\n * @param {MrlTextareaProps} props - the component props\n * @returns a textarea element\n */\nexport function MrlTextarea({\n\tattrs = {},\n\tclassName,\n\tinputId,\n\tstate = 'default',\n\tmaxLength,\n\tplaceholder,\n\tvalue,\n\tautoExpand = false,\n\t...rest\n}: MrlTextareaProps): JSX.Element {\n\tconst textareaRef = React.useRef<HTMLTextAreaElement>(null);\n\n\tReact.useEffect(() => {\n\t\tif (textareaRef.current && attrs.autofocus) {\n\t\t\ttextareaRef.current.focus();\n\t\t}\n\t}, [attrs, textareaRef]);\n\n\tconst dataMaxLength = attrs['data-maxlength'];\n\n\t// Special use-case for AI Chat Input (AI-658)\n\tReact.useEffect(() => {\n\t\tif (autoExpand && textareaRef.current) {\n\t\t\ttextareaRef.current.style.height = '0px';\n\t\t\tconst scrollHeight = textareaRef.current.scrollHeight + 4;\n\t\t\ttextareaRef.current.style.height = scrollHeight + 'px';\n\t\t}\n\t}, [value, autoExpand]);\n\n\tconst hasMaxLength = typeof maxLength !== 'undefined' && Number(maxLength) > 0;\n\tconst hasDataMaxLength = typeof dataMaxLength !== 'undefined' && Number(dataMaxLength) > 0;\n\n\tconst displayCounter = hasMaxLength \|\| hasDataMaxLength;\n\n\tif (hasMaxLength && isNaN(Number(maxLength))) {\n\t\tthrow new Error('maxLength should have type number');\n\t}\n\n\tif (hasDataMaxLength && isNaN(Number(hasDataMaxLength))) {\n\t\tthrow new Error('data-maxlength should have type number');\n\t}\n\n\tif (hasMaxLength && hasDataMaxLength) {\n\t\tthrow new Error('maxLength and data-maxlength should not be used at the same time');\n\t}\n\n\tconst inputClasses = classnames(\n\t\tattrs.class \|\| attrs.className,\n\t\tclassName,\n\t\tstyles['MrlTextarea'],\n\t\t'MrlTextarea',\n\t\t'mrl-textarea',\n\t\t{\n\t\t\t[styles['MrlTextarea--auto-expand']]: autoExpand,\n\t\t\t[styles['MrlTextarea--read-only']]: state === 'read-only'\n\t\t}\n\t);\n\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs);\n\n\tconst renderCounter = () => {\n\t\tconst displayedValue = dataMaxLength ? dataMaxLength : maxLength;\n\t\tconst valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={classnames('MrlCounter', {\n\t\t\t\t\t\t'MrlCounter-overMaxLength': valueExceedsDataMaxLength\n\t\t\t\t\t})}\n\t\t\t\t\tid={`${inputId}-visible-counter`}\n\t\t\t\t>\n\t\t\t\t\t{value?.length \|\| 0}/{displayedValue}\n\t\t\t\t</span>\n\t\t\t\t<p style={{ display: 'none' }} id={`${inputId}-counter`}>\n\t\t\t\t\t{`${displayedValue - (value?.length \|\| 0)} of ${displayedValue} characters remaining`}\n\t\t\t\t</p>\n\t\t\t</>\n\t\t);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"MrlTextarea--wrapper\">\n\t\t\t\t<textarea\n\t\t\t\t\t{...rest}\n\t\t\t\t\t{...attributes}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t// Force value if defined (controlled component) or pass\n\t\t\t\t\t// undefined and fallback to the default (uncontrolled)\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\taria-describedby={`${inputId}-counter`}\n\t\t\t\t\tmaxLength={hasMaxLength ? maxLength : undefined}\n\t\t\t\t\tref={textareaRef}\n\t\t\t\t\treadOnly={state === 'read-only'}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{displayCounter && state !== 'read-only' && (\n\t\t\t\t<span className={classnames(styles['MrlForm-counter'], 'MrlForm-counter')}>\n\t\t\t\t\t{renderCounter()}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"],"names":["MrlTextarea","_ref","_ref$attrs","attrs","className","inputId","_ref$state","state","maxLength","placeholder","value","_ref$autoExpand","autoExpand","rest","_objectWithoutProperties","_excluded","textareaRef","React","useRef","useEffect","current","autofocus","focus","dataMaxLength","style","height","scrollHeight","hasMaxLength","Number","hasDataMaxLength","displayCounter","isNaN","Error","inputClasses","classnames","class","styles","attributes","setAttributes","renderCounter","displayedValue","valueExceedsDataMaxLength","length","createElement","Fragment","id","concat","display","_extends","disabled","undefined","ref","readOnly"],"mappings":"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"}
1	+ {"version":3,"file":"MrlTextarea.js","sources":["../../../../../../src/components/form/textarea/MrlTextarea/MrlTextarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, setAttributes } from '../../../../utils';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlTextarea.module.scss';\nimport './MrlTextarea.global.scss';\n\ntype MrlTextareaState = 'default' \| 'disabled' \| 'error' \| 'read-only';\n\ninterface MrlTextareaProps {\n\t/** Applies additional HTML attributes to the textarea element /\n\tattrs?: AttrsObject;\n\t/* The value of the textarea used to make it a controlled input /\n\tvalue?: string;\n\t/\n\t The maximum number of characters that the user can enter.\n\t * If undefined or set to \"0\", removes the character counter from the textarea\n\t /\n\tmaxLength?: number;\n\t/\n\t Id of the text input.\n\t /\n\tinputId: string;\n\t/\n\t Text placeholder for the text input.\n\t /\n\tplaceholder?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: MrlTextareaState;\n\n\t/* Additional class to add to the textarea /\n\tclassName?: string;\n\n\t/* Autoexpand will automatically adjust the height of the textarea based on the amount of text within it /\n\tautoExpand?: boolean;\n\n\t/\n\t Enables interaction tracking for this textarea. Provide a stable, non-PII id\n\t * (e.g. 'template-description'). When omitted, the textarea emits no analytics.\n\t \n\t Note: the textarea's value is never emitted, and `change` is emitted once per\n\t * editing session (on blur, when the value actually changed) rather than per keystroke.\n\t /\n\teventId?: string;\n}\n\n/\n Allows the user to input plain text in a multi-line format\n * @param {MrlTextareaProps} props - the component props\n * @returns a textarea element\n /\nexport function MrlTextarea({\n\tattrs = {},\n\tclassName,\n\tinputId,\n\tstate = 'default',\n\tmaxLength,\n\tplaceholder,\n\teventId,\n\tvalue,\n\tautoExpand = false,\n\t...rest\n}: MrlTextareaProps): JSX.Element {\n\tconst textareaRef = React.useRef<HTMLTextAreaElement>(null);\n\t// the value when the field gained focus, so `change` can be emitted once per\n\t// editing session instead of once per keystroke.\n\tconst valueOnFocusRef = React.useRef<string>('');\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlTextarea', eventId);\n\n\tReact.useEffect(() => {\n\t\tif (textareaRef.current && attrs.autofocus) {\n\t\t\ttextareaRef.current.focus();\n\t\t}\n\t}, [attrs, textareaRef]);\n\n\tconst dataMaxLength = attrs['data-maxlength'];\n\n\t// Special use-case for AI Chat Input (AI-658)\n\tReact.useEffect(() => {\n\t\tif (autoExpand && textareaRef.current) {\n\t\t\ttextareaRef.current.style.height = '0px';\n\t\t\tconst scrollHeight = textareaRef.current.scrollHeight + 4;\n\t\t\ttextareaRef.current.style.height = scrollHeight + 'px';\n\t\t}\n\t}, [value, autoExpand]);\n\n\tconst hasMaxLength = typeof maxLength !== 'undefined' && Number(maxLength) > 0;\n\tconst hasDataMaxLength = typeof dataMaxLength !== 'undefined' && Number(dataMaxLength) > 0;\n\n\tconst displayCounter = hasMaxLength \|\| hasDataMaxLength;\n\n\tif (hasMaxLength && isNaN(Number(maxLength))) {\n\t\tthrow new Error('maxLength should have type number');\n\t}\n\n\tif (hasDataMaxLength && isNaN(Number(hasDataMaxLength))) {\n\t\tthrow new Error('data-maxlength should have type number');\n\t}\n\n\tif (hasMaxLength && hasDataMaxLength) {\n\t\tthrow new Error('maxLength and data-maxlength should not be used at the same time');\n\t}\n\n\tconst inputClasses = classnames(\n\t\tattrs.class \|\| attrs.className,\n\t\tclassName,\n\t\tstyles['MrlTextarea'],\n\t\t'MrlTextarea',\n\t\t'mrl-textarea',\n\t\t{\n\t\t\t[styles['MrlTextarea--auto-expand']]: autoExpand,\n\t\t\t[styles['MrlTextarea--read-only']]: state === 'read-only'\n\t\t}\n\t);\n\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs);\n\n\t/\n\t Handle focus events\n\t \n\t @param {React.FocusEvent<HTMLTextAreaElement>} e - focus event\n\t /\n\tconst handleOnFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\tvalueOnFocusRef.current = e.target.value;\n\n\t\tif (typeof attributes.onFocus === 'function') {\n\t\t\tattributes.onFocus(e);\n\t\t}\n\t};\n\n\t/\n\t Handle blur events\n\t \n\t @param {React.FocusEvent<HTMLTextAreaElement>} e - blur event\n\t */\n\tconst handleOnBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\t// the value itself is never emitted — only the fact that it changed.\n\t\tif (e.target.value !== valueOnFocusRef.current) {\n\t\t\ttrackInteraction({ action: 'change' });\n\t\t}\n\n\t\tif (typeof attributes.onBlur === 'function') {\n\t\t\tattributes.onBlur(e);\n\t\t}\n\t};\n\n\tconst renderCounter = () => {\n\t\tconst displayedValue = dataMaxLength ? dataMaxLength : maxLength;\n\t\tconst valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={classnames('MrlCounter', {\n\t\t\t\t\t\t'MrlCounter-overMaxLength': valueExceedsDataMaxLength\n\t\t\t\t\t})}\n\t\t\t\t\tid={`${inputId}-visible-counter`}\n\t\t\t\t>\n\t\t\t\t\t{value?.length \|\| 0}/{displayedValue}\n\t\t\t\t</span>\n\t\t\t\t<p style={{ display: 'none' }} id={`${inputId}-counter`}>\n\t\t\t\t\t{`${displayedValue - (value?.length \|\| 0)} of ${displayedValue} characters remaining`}\n\t\t\t\t</p>\n\t\t\t</>\n\t\t);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"MrlTextarea--wrapper\">\n\t\t\t\t<textarea\n\t\t\t\t\t{...rest}\n\t\t\t\t\t{...attributes}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tonBlur={handleOnBlur}\n\t\t\t\t\tonFocus={handleOnFocus}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t// Force value if defined (controlled component) or pass\n\t\t\t\t\t// undefined and fallback to the default (uncontrolled)\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\taria-describedby={`${inputId}-counter`}\n\t\t\t\t\tmaxLength={hasMaxLength ? maxLength : undefined}\n\t\t\t\t\tref={textareaRef}\n\t\t\t\t\treadOnly={state === 'read-only'}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{displayCounter && state !== 'read-only' && (\n\t\t\t\t<span className={classnames(styles['MrlForm-counter'], 'MrlForm-counter')}>\n\t\t\t\t\t{renderCounter()}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"],"names":["MrlTextarea","_ref","_ref$attrs","attrs","className","inputId","_ref$state","state","maxLength","placeholder","eventId","value","_ref$autoExpand","autoExpand","rest","_objectWithoutProperties","_excluded","textareaRef","React","useRef","valueOnFocusRef","trackInteraction","useMrlTrackInteraction","useEffect","current","autofocus","focus","dataMaxLength","style","height","scrollHeight","hasMaxLength","Number","hasDataMaxLength","displayCounter","isNaN","Error","inputClasses","classnames","class","styles","attributes","setAttributes","handleOnFocus","e","target","onFocus","handleOnBlur","action","onBlur","renderCounter","displayedValue","valueExceedsDataMaxLength","length","createElement","Fragment","id","concat","display","_extends","disabled","undefined","ref","readOnly"],"mappings":";;;;;;;;AAiDA;AACA;AACA;AACA;AACA;AACO,SAASA,WAAWA,CAAAC,IAAA,EAWO;AAAA,EAAA,IAAAC,UAAA,GAAAD,IAAA,CAVjCE,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,UAAA;IACVE,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,UAAA,GAAAL,IAAA,CACPM,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,UAAA;IACjBE,SAAS,GAAAP,IAAA,CAATO,SAAS;IACTC,WAAW,GAAAR,IAAA,CAAXQ,WAAW;IACXC,OAAO,GAAAT,IAAA,CAAPS,OAAO;IACPC,KAAK,GAAAV,IAAA,CAALU,KAAK;IAAAC,eAAA,GAAAX,IAAA,CACLY,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,eAAA;AACfE,IAAAA,IAAI,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA,CAAA;AAEP,EAAA,IAAMC,WAAW,GAAGC,KAAK,CAACC,MAAM,CAAsB,IAAI,CAAC;AAC3D;AACA;AACA,EAAA,IAAMC,eAAe,GAAGF,KAAK,CAACC,MAAM,CAAS,EAAE,CAAC;AAEhD,EAAA,IAAME,gBAAgB,GAAGC,sBAAsB,CAAC,aAAa,EAAEZ,OAAO,CAAC;EAEvEQ,KAAK,CAACK,SAAS,CAAC,MAAM;AACrB,IAAA,IAAIN,WAAW,CAACO,OAAO,IAAIrB,KAAK,CAACsB,SAAS,EAAE;AAC3CR,MAAAA,WAAW,CAACO,OAAO,CAACE,KAAK,EAAE;AAC5B,IAAA;AACD,EAAA,CAAC,EAAE,CAACvB,KAAK,EAAEc,WAAW,CAAC,CAAC;AAExB,EAAA,IAAMU,aAAa,GAAGxB,KAAK,CAAC,gBAAgB,CAAC;;AAE7C;EACAe,KAAK,CAACK,SAAS,CAAC,MAAM;AACrB,IAAA,IAAIV,UAAU,IAAII,WAAW,CAACO,OAAO,EAAE;AACtCP,MAAAA,WAAW,CAACO,OAAO,CAACI,KAAK,CAACC,MAAM,GAAG,KAAK;MACxC,IAAMC,YAAY,GAAGb,WAAW,CAACO,OAAO,CAACM,YAAY,GAAG,CAAC;MACzDb,WAAW,CAACO,OAAO,CAACI,KAAK,CAACC,MAAM,GAAGC,YAAY,GAAG,IAAI;AACvD,IAAA;AACD,EAAA,CAAC,EAAE,CAACnB,KAAK,EAAEE,UAAU,CAAC,CAAC;AAEvB,EAAA,IAAMkB,YAAY,GAAG,OAAOvB,SAAS,KAAK,WAAW,IAAIwB,MAAM,CAACxB,SAAS,CAAC,GAAG,CAAC;AAC9E,EAAA,IAAMyB,gBAAgB,GAAG,OAAON,aAAa,KAAK,WAAW,IAAIK,MAAM,CAACL,aAAa,CAAC,GAAG,CAAC;AAE1F,EAAA,IAAMO,cAAc,GAAGH,YAAY,IAAIE,gBAAgB;EAEvD,IAAIF,YAAY,IAAII,KAAK,CAACH,MAAM,CAACxB,SAAS,CAAC,CAAC,EAAE;AAC7C,IAAA,MAAM,IAAI4B,KAAK,CAAC,mCAAmC,CAAC;AACrD,EAAA;EAEA,IAAIH,gBAAgB,IAAIE,KAAK,CAACH,MAAM,CAACC,gBAAgB,CAAC,CAAC,EAAE;AACxD,IAAA,MAAM,IAAIG,KAAK,CAAC,wCAAwC,CAAC;AAC1D,EAAA;EAEA,IAAIL,YAAY,IAAIE,gBAAgB,EAAE;AACrC,IAAA,MAAM,IAAIG,KAAK,CAAC,kEAAkE,CAAC;AACpF,EAAA;EAEA,IAAMC,YAAY,GAAGC,UAAU,CAC9BnC,KAAK,CAACoC,KAAK,IAAIpC,KAAK,CAACC,SAAS,EAC9BA,SAAS,EACToC,MAAM,CAAC,aAAa,CAAC,EACrB,aAAa,EACb,cAAc,EACd;AACC,IAAA,CAACA,MAAM,CAAC,0BAA0B,CAAC,GAAG3B,UAAU;AAChD,IAAA,CAAC2B,MAAM,CAAC,wBAAwB,CAAC,GAAGjC,KAAK,KAAK;AAC/C,GACD,CAAC;EAED,OAAOJ,KAAK,CAACoC,KAAK;EAClB,OAAOpC,KAAK,CAACC,SAAS;AAEtB,EAAA,IAAMqC,UAAU,GAAGC,aAAa,CAACvC,KAAK,CAAC;;AAEvC;AACD;AACA;AACA;AACA;EACC,IAAMwC,aAAa,GAAIC,CAAwC,IAAK;AACnExB,IAAAA,eAAe,CAACI,OAAO,GAAGoB,CAAC,CAACC,MAAM,CAAClC,KAAK;AAExC,IAAA,IAAI,OAAO8B,UAAU,CAACK,OAAO,KAAK,UAAU,EAAE;AAC7CL,MAAAA,UAAU,CAACK,OAAO,CAACF,CAAC,CAAC;AACtB,IAAA;EACD,CAAC;;AAED;AACD;AACA;AACA;AACA;EACC,IAAMG,YAAY,GAAIH,CAAwC,IAAK;AAClE;IACA,IAAIA,CAAC,CAACC,MAAM,CAAClC,KAAK,KAAKS,eAAe,CAACI,OAAO,EAAE;AAC/CH,MAAAA,gBAAgB,CAAC;AAAE2B,QAAAA,MAAM,EAAE;AAAS,OAAC,CAAC;AACvC,IAAA;AAEA,IAAA,IAAI,OAAOP,UAAU,CAACQ,MAAM,KAAK,UAAU,EAAE;AAC5CR,MAAAA,UAAU,CAACQ,MAAM,CAACL,CAAC,CAAC;AACrB,IAAA;EACD,CAAC;EAED,IAAMM,aAAa,GAAGA,MAAM;AAC3B,IAAA,IAAMC,cAAc,GAAGxB,aAAa,GAAGA,aAAa,GAAGnB,SAAS;AAChE,IAAA,IAAM4C,yBAAyB,GAAGzB,aAAa,IAAIhB,KAAK,GAAGA,KAAK,CAAC0C,MAAM,GAAG1B,aAAa,GAAG,KAAK;IAC/F,oBACCT,KAAA,CAAAoC,aAAA,CAAApC,KAAA,CAAAqC,QAAA,EAAA,IAAA,eACCrC,KAAA,CAAAoC,aAAA,CAAA,MAAA,EAAA;AACC,MAAA,aAAA,EAAY,MAAM;AAClBlD,MAAAA,SAAS,EAAEkC,UAAU,CAAC,YAAY,EAAE;AACnC,QAAA,0BAA0B,EAAEc;AAC7B,OAAC,CAAE;MACHI,EAAE,EAAA,EAAA,CAAAC,MAAA,CAAKpD,OAAO,EAAA,kBAAA;AAAmB,KAAA,EAEhC,CAAAM,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAE0C,MAAM,KAAI,CAAC,EAAC,GAAC,EAACF,cACjB,CAAC,eACPjC,KAAA,CAAAoC,aAAA,CAAA,GAAA,EAAA;AAAG1B,MAAAA,KAAK,EAAE;AAAE8B,QAAAA,OAAO,EAAE;OAAS;MAACF,EAAE,EAAA,EAAA,CAAAC,MAAA,CAAKpD,OAAO,EAAA,UAAA;KAAW,EAAA,EAAA,CAAAoD,MAAA,CACnDN,cAAc,IAAI,CAAAxC,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAE0C,MAAM,KAAI,CAAC,CAAC,EAAA,MAAA,CAAA,CAAAI,MAAA,CAAON,cAAc,EAAA,uBAAA,CAC5D,CACF,CAAC;EAEL,CAAC;EAED,oBACCjC,KAAA,CAAAoC,aAAA,CAAApC,KAAA,CAAAqC,QAAA,EAAA,IAAA,eACCrC,KAAA,CAAAoC,aAAA,CAAA,KAAA,EAAA;AAAKlD,IAAAA,SAAS,EAAC;GAAsB,eACpCc,KAAA,CAAAoC,aAAA,CAAA,UAAA,EAAAK,QAAA,CAAA,EAAA,EACK7C,IAAI,EACJ2B,UAAU,EAAA;AACde,IAAAA,EAAE,EAAEnD,OAAQ;AACZ4C,IAAAA,MAAM,EAAEF,YAAa;AACrBD,IAAAA,OAAO,EAAEH,aAAc;AACvBlC,IAAAA,WAAW,EAAEA,WAAY;AACzBL,IAAAA,SAAS,EAAEiC;AACX;AACA;AAAA;AACA1B,IAAAA,KAAK,EAAEA,KAAM;IACbiD,QAAQ,EAAErD,KAAK,KAAK,UAAW;IAC/B,cAAA,EAAcA,KAAK,KAAK,OAAQ;IAChC,kBAAA,EAAA,EAAA,CAAAkD,MAAA,CAAqBpD,OAAO,EAAA,UAAA,CAAW;AACvCG,IAAAA,SAAS,EAAEuB,YAAY,GAAGvB,SAAS,GAAGqD,SAAU;AAChDC,IAAAA,GAAG,EAAE7C,WAAY;IACjB8C,QAAQ,EAAExD,KAAK,KAAK;GAAY,CAChC,CACG,CAAC,EACL2B,cAAc,IAAI3B,KAAK,KAAK,WAAW,iBACvCW,KAAA,CAAAoC,aAAA,CAAA,MAAA,EAAA;IAAMlD,SAAS,EAAEkC,UAAU,CAACE,MAAM,CAAC,iBAAiB,CAAC,EAAE,iBAAiB;AAAE,GAAA,EACxEU,aAAa,EACT,CAEN,CAAC;AAEL;;;;"}

package/dist/esm/components/layout/MrlSidebar/MrlSidebar.js CHANGED Viewed

@@ -6,11 +6,12 @@ import { useBreakpoint } from '../../../hooks/useBreakpoint/index.js';
 import { isMobile } from '../utils.js';
 import { useLayoutContext } from '../context/LayoutContext.js';
 import styles from './MrlSidebar.module.scss.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlIconButton } from '../../button/MrlIconButton/MrlIconButton.js';
 import { MrlFocusTrap } from '../../focus-trap/MrlFocusTrap/MrlFocusTrap.js';
 import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
-var _excluded = ["children", "className", "hookOpen", "hookClose"];
+var _excluded = ["children", "className", "hookOpen", "hookClose", "eventId"];
 /**
  * MrlSidebar React component.
  * @param props - component props
@@ -22,19 +23,28 @@ var MrlSidebar = /*#__PURE__*/React.forwardRef(function MrlSidebar(_ref, ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     hookOpen = _ref.hookOpen,
     hookClose = _ref.hookClose,
+    eventId = _ref.eventId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isExpanded = _React$useState2[0],
     setIsExpanded = _React$useState2[1];
+  var trackInteraction = useMrlTrackInteraction('MrlSidebar', eventId);
   var setExpandedAndNotify = React.useCallback((expanded, info) => {
+    // every open/close path funnels through here, including the imperative handle
+    trackInteraction({
+      action: expanded ? 'open' : 'close',
+      metadata: {
+        source: info.source
+      }
+    });
     if (expanded) {
       hookOpen === null || hookOpen === void 0 ? void 0 : hookOpen(info);
     } else {
       hookClose === null || hookClose === void 0 ? void 0 : hookClose(info);
     }
     setIsExpanded(expanded);
-  }, [hookOpen, hookClose]);
+  }, [hookOpen, hookClose, trackInteraction]);
   var _useLayoutContext = useLayoutContext(),
     isTopbarRendered = _useLayoutContext.isTopbarRendered;
   React.useImperativeHandle(ref, () => {

package/dist/esm/components/layout/MrlSidebar/MrlSidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlSidebar.js","sources":["../../../../../src/components/layout/MrlSidebar/MrlSidebar.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { menu, close } from '@muraldevkit/ds-icons';\nimport { MrlIconButton, MrlFocusTrap, MrlSvg } from '../../';\nimport { LayoutComponent, LayoutSection } from '../constants';\nimport { useBreakpoint } from '../../../hooks/useBreakpoint';\nimport { isMobile } from '../utils';\nimport { useLayoutContext } from '../context/LayoutContext';\n\nimport styles from './MrlSidebar.module.scss';\n\nexport type MrlSidebarHookInfo = { source: 'userInteraction' \| 'imperativeHandler' };\n\ninterface MrlSidebarHook {\n\thookClose?: (info: MrlSidebarHookInfo) => void;\n\thookOpen?: (info: MrlSidebarHookInfo) => void;\n}\n\ntype MrlSidebar = LayoutComponent & LayoutSection & MrlSidebarHook;\nexport interface MrlSidebarHandle {\n\tclose: () => void;\n\topen: () => void;\n\ttoggle: () => void;\n}\n\n/*\n MrlSidebar React component.\n * @param props - component props\n * @returns a MrlSidebar React component.\n */\nexport const MrlSidebar = React.forwardRef<MrlSidebarHandle, MrlSidebar>(function MrlSidebar(\n\t{ children, className = '', hookOpen, hookClose, ...rest }: MrlSidebar,\n\tref: React.Ref<MrlSidebarHandle>\n): JSX.Element {\n\tconst [isExpanded, setIsExpanded] = React.useState<boolean>(false);\n\tconst setExpandedAndNotify = React.useCallback(\n\t\t(expanded: boolean, info: MrlSidebarHookInfo) => {\n\t\t\tif (expanded) {\n\t\t\t\thookOpen?.(info);\n\t\t\t} else {\n\t\t\t\thookClose?.(info);\n\t\t\t}\n\t\t\tsetIsExpanded(expanded);\n\t\t},\n\t\t[hookOpen, hookClose]\n\t);\n\n\tconst { isTopbarRendered } = useLayoutContext();\n\n\tReact.useImperativeHandle(ref, () => {\n\t\treturn {\n\t\t\tclose() {\n\t\t\t\tsetExpandedAndNotify(false, { source: 'imperativeHandler' });\n\t\t\t},\n\t\t\topen() {\n\t\t\t\tsetExpandedAndNotify(true, { source: 'imperativeHandler' });\n\t\t\t},\n\t\t\ttoggle() {\n\t\t\t\tsetExpandedAndNotify(!isExpanded, { source: 'imperativeHandler' });\n\t\t\t}\n\t\t};\n\t}, [isExpanded, setExpandedAndNotify]);\n\n\tconst breakpoint = useBreakpoint();\n\tconst renderMobile = isMobile(breakpoint);\n\n\tconst sidebarRef = React.useRef<HTMLDivElement>(null);\n\tconst triggerRef = React.useRef<HTMLButtonElement>(null);\n\n\t// If both of these are true, then we want to set focus trap disabled to \"False\"\n\t// which is kind of confusing, because these values actually return true.\n\t// So, we need to negate them. Don't worry, it works.\n\tconst shouldFocusTrap = !(renderMobile && isExpanded);\n\n\tconst offsetClass = classnames(isTopbarRendered && styles['MrlSidebar--offset']);\n\n\tconst sidebarClasses = classnames(styles['MrlSidebar'], 'MrlSidebar', className, offsetClass, {\n\t\t[styles['MrlSidebar--mobile']]: renderMobile,\n\t\t[styles['MrlSidebar--mobile--open']]: renderMobile && isExpanded\n\t});\n\n\tconst overlayClasses = classnames(\n\t\tstyles['MrlSidebar-overlay'],\n\t\t'MrlSidebar-overlay',\n\t\trenderMobile && isExpanded && styles['MrlSidebar-overlay--visible'],\n\t\toffsetClass\n\t);\n\n\tconst sidebarContentClasses = classnames(styles['MrlSidebar-content'], 'MrlSidebar-content', {\n\t\t[styles['MrlSidebar-content--visible']]: isExpanded \|\| !renderMobile\n\t});\n\n\tconst handleKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tif (e.key === 'Escape') {\n\t\t\tsetExpandedAndNotify(false, { source: 'userInteraction' });\n\t\t\ttriggerRef.current?.focus();\n\t\t}\n\t};\n\n\tconst handleClick = (e: React.SyntheticEvent<HTMLElement, Event>) => {\n\t\te.preventDefault();\n\t\tsetExpandedAndNotify(!isExpanded, { source: 'userInteraction' });\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// If the sidebar is rendered on mobile, we want to render the menu button and overlay.\n\t\t\t\trenderMobile && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\t\twrapperClassName={classnames(\n\t\t\t\t\t\t\t\t\tstyles['MrlSidebar-menu-trigger'],\n\t\t\t\t\t\t\t\t\tstyles['MrlSidebar-menu']\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\ticon={<MrlSvg svg={menu} />}\n\t\t\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\t\t\t\tref={triggerRef}\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\ttext=\"Open\"\n\t\t\t\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\t\t\t\ttoggleAria=\"expanded\"\n\t\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={overlayClasses}\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t// we only want to allow click events on the overlay if the sidebar is expanded\n\t\t\t\t\t\t\t// otherwise pointer events are none and no click events are allowed\n\t\t\t\t\t\t\t{...(isExpanded && { onClick: handleClick })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t)\n\t\t\t}\n\t\t\t<section\n\t\t\t\t{...rest}\n\t\t\t\tclassName={sidebarClasses}\n\t\t\t\tonKeyUp={handleKeyUp}\n\t\t\t\tref={sidebarRef}\n\t\t\t\trole=\"presentation\"\n\t\t\t\t{...(renderMobile && { 'aria-hidden': !isExpanded })}\n\t\t\t>\n\t\t\t\t<MrlFocusTrap disabled={shouldFocusTrap} containerRef={sidebarRef}>\n\t\t\t\t\t{isExpanded && (\n\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\twrapperClassName={classnames(\n\t\t\t\t\t\t\t\tstyles['MrlSidebar-menu-trigger'],\n\t\t\t\t\t\t\t\tstyles['MrlSidebar-menu'],\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t[styles['MrlSidebar-menu-close']]: isExpanded,\n\t\t\t\t\t\t\t\t\t'MrlSidebar-menu-close': isExpanded\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\t\t\ttoggleAria=\"expanded\"\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\t<div className={sidebarContentClasses}>{children}</div>\n\t\t\t\t</MrlFocusTrap>\n\t\t\t</section>\n\t\t</>\n\t);\n});\n"],"names":["MrlSidebar","React","forwardRef","_ref","ref","children","_ref$className","className","hookOpen","hookClose","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","isExpanded","setIsExpanded","setExpandedAndNotify","useCallback","expanded","info","_useLayoutContext","useLayoutContext","isTopbarRendered","useImperativeHandle","close","source","open","toggle","breakpoint","useBreakpoint","renderMobile","isMobile","sidebarRef","useRef","triggerRef","shouldFocusTrap","offsetClass","classnames","styles","sidebarClasses","overlayClasses","sidebarContentClasses","handleKeyUp","e","preventDefault","stopPropagation","key","_triggerRef$current","current","focus","handleClick","createElement","Fragment","MrlIconButton","wrapperClassName","icon","MrlSvg","svg","menu","kind","onClick","position","size","text","tipAnchor","toggleAria","state","_extends","role","tabIndex","onKeyUp","MrlFocusTrap","disabled","containerRef"],"mappings":"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"}
1	+ {"version":3,"file":"MrlSidebar.js","sources":["../../../../../src/components/layout/MrlSidebar/MrlSidebar.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { menu, close } from '@muraldevkit/ds-icons';\nimport { MrlIconButton, MrlFocusTrap, MrlSvg } from '../../';\nimport { LayoutComponent, LayoutSection } from '../constants';\nimport { useBreakpoint } from '../../../hooks/useBreakpoint';\nimport { isMobile } from '../utils';\nimport { useLayoutContext } from '../context/LayoutContext';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlSidebar.module.scss';\n\nexport type MrlSidebarHookInfo = { source: 'userInteraction' \| 'imperativeHandler' };\n\ninterface MrlSidebarHook {\n\thookClose?: (info: MrlSidebarHookInfo) => void;\n\thookOpen?: (info: MrlSidebarHookInfo) => void;\n}\n\ninterface MrlSidebarAnalytics {\n\t/*\n\t Enables interaction tracking for this sidebar. Provide a stable, non-PII id\n\t * (e.g. 'dashboard-sidebar'). When omitted, the sidebar emits no analytics.\n\t /\n\teventId?: string;\n}\n\ntype MrlSidebar = LayoutComponent & LayoutSection & MrlSidebarHook & MrlSidebarAnalytics;\nexport interface MrlSidebarHandle {\n\tclose: () => void;\n\topen: () => void;\n\ttoggle: () => void;\n}\n\n/\n MrlSidebar React component.\n * @param props - component props\n * @returns a MrlSidebar React component.\n */\nexport const MrlSidebar = React.forwardRef<MrlSidebarHandle, MrlSidebar>(function MrlSidebar(\n\t{ children, className = '', hookOpen, hookClose, eventId, ...rest }: MrlSidebar,\n\tref: React.Ref<MrlSidebarHandle>\n): JSX.Element {\n\tconst [isExpanded, setIsExpanded] = React.useState<boolean>(false);\n\tconst trackInteraction = useMrlTrackInteraction('MrlSidebar', eventId);\n\tconst setExpandedAndNotify = React.useCallback(\n\t\t(expanded: boolean, info: MrlSidebarHookInfo) => {\n\t\t\t// every open/close path funnels through here, including the imperative handle\n\t\t\ttrackInteraction({ action: expanded ? 'open' : 'close', metadata: { source: info.source } });\n\n\t\t\tif (expanded) {\n\t\t\t\thookOpen?.(info);\n\t\t\t} else {\n\t\t\t\thookClose?.(info);\n\t\t\t}\n\t\t\tsetIsExpanded(expanded);\n\t\t},\n\t\t[hookOpen, hookClose, trackInteraction]\n\t);\n\n\tconst { isTopbarRendered } = useLayoutContext();\n\n\tReact.useImperativeHandle(ref, () => {\n\t\treturn {\n\t\t\tclose() {\n\t\t\t\tsetExpandedAndNotify(false, { source: 'imperativeHandler' });\n\t\t\t},\n\t\t\topen() {\n\t\t\t\tsetExpandedAndNotify(true, { source: 'imperativeHandler' });\n\t\t\t},\n\t\t\ttoggle() {\n\t\t\t\tsetExpandedAndNotify(!isExpanded, { source: 'imperativeHandler' });\n\t\t\t}\n\t\t};\n\t}, [isExpanded, setExpandedAndNotify]);\n\n\tconst breakpoint = useBreakpoint();\n\tconst renderMobile = isMobile(breakpoint);\n\n\tconst sidebarRef = React.useRef<HTMLDivElement>(null);\n\tconst triggerRef = React.useRef<HTMLButtonElement>(null);\n\n\t// If both of these are true, then we want to set focus trap disabled to \"False\"\n\t// which is kind of confusing, because these values actually return true.\n\t// So, we need to negate them. Don't worry, it works.\n\tconst shouldFocusTrap = !(renderMobile && isExpanded);\n\n\tconst offsetClass = classnames(isTopbarRendered && styles['MrlSidebar--offset']);\n\n\tconst sidebarClasses = classnames(styles['MrlSidebar'], 'MrlSidebar', className, offsetClass, {\n\t\t[styles['MrlSidebar--mobile']]: renderMobile,\n\t\t[styles['MrlSidebar--mobile--open']]: renderMobile && isExpanded\n\t});\n\n\tconst overlayClasses = classnames(\n\t\tstyles['MrlSidebar-overlay'],\n\t\t'MrlSidebar-overlay',\n\t\trenderMobile && isExpanded && styles['MrlSidebar-overlay--visible'],\n\t\toffsetClass\n\t);\n\n\tconst sidebarContentClasses = classnames(styles['MrlSidebar-content'], 'MrlSidebar-content', {\n\t\t[styles['MrlSidebar-content--visible']]: isExpanded \|\| !renderMobile\n\t});\n\n\tconst handleKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tif (e.key === 'Escape') {\n\t\t\tsetExpandedAndNotify(false, { source: 'userInteraction' });\n\t\t\ttriggerRef.current?.focus();\n\t\t}\n\t};\n\n\tconst handleClick = (e: React.SyntheticEvent<HTMLElement, Event>) => {\n\t\te.preventDefault();\n\t\tsetExpandedAndNotify(!isExpanded, { source: 'userInteraction' });\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// If the sidebar is rendered on mobile, we want to render the menu button and overlay.\n\t\t\t\trenderMobile && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\t\twrapperClassName={classnames(\n\t\t\t\t\t\t\t\t\tstyles['MrlSidebar-menu-trigger'],\n\t\t\t\t\t\t\t\t\tstyles['MrlSidebar-menu']\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\ticon={<MrlSvg svg={menu} />}\n\t\t\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\t\t\t\tref={triggerRef}\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\ttext=\"Open\"\n\t\t\t\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\t\t\t\ttoggleAria=\"expanded\"\n\t\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={overlayClasses}\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t// we only want to allow click events on the overlay if the sidebar is expanded\n\t\t\t\t\t\t\t// otherwise pointer events are none and no click events are allowed\n\t\t\t\t\t\t\t{...(isExpanded && { onClick: handleClick })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t)\n\t\t\t}\n\t\t\t<section\n\t\t\t\t{...rest}\n\t\t\t\tclassName={sidebarClasses}\n\t\t\t\tonKeyUp={handleKeyUp}\n\t\t\t\tref={sidebarRef}\n\t\t\t\trole=\"presentation\"\n\t\t\t\t{...(renderMobile && { 'aria-hidden': !isExpanded })}\n\t\t\t>\n\t\t\t\t<MrlFocusTrap disabled={shouldFocusTrap} containerRef={sidebarRef}>\n\t\t\t\t\t{isExpanded && (\n\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\twrapperClassName={classnames(\n\t\t\t\t\t\t\t\tstyles['MrlSidebar-menu-trigger'],\n\t\t\t\t\t\t\t\tstyles['MrlSidebar-menu'],\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t[styles['MrlSidebar-menu-close']]: isExpanded,\n\t\t\t\t\t\t\t\t\t'MrlSidebar-menu-close': isExpanded\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\t\t\ttoggleAria=\"expanded\"\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\t<div className={sidebarContentClasses}>{children}</div>\n\t\t\t\t</MrlFocusTrap>\n\t\t\t</section>\n\t\t</>\n\t);\n});\n"],"names":["MrlSidebar","React","forwardRef","_ref","ref","children","_ref$className","className","hookOpen","hookClose","eventId","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","isExpanded","setIsExpanded","trackInteraction","useMrlTrackInteraction","setExpandedAndNotify","useCallback","expanded","info","action","metadata","source","_useLayoutContext","useLayoutContext","isTopbarRendered","useImperativeHandle","close","open","toggle","breakpoint","useBreakpoint","renderMobile","isMobile","sidebarRef","useRef","triggerRef","shouldFocusTrap","offsetClass","classnames","styles","sidebarClasses","overlayClasses","sidebarContentClasses","handleKeyUp","e","preventDefault","stopPropagation","key","_triggerRef$current","current","focus","handleClick","createElement","Fragment","MrlIconButton","wrapperClassName","icon","MrlSvg","svg","menu","kind","onClick","position","size","text","tipAnchor","toggleAria","state","_extends","role","tabIndex","onKeyUp","MrlFocusTrap","disabled","containerRef"],"mappings":"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"}

package/dist/esm/components/link/MrlLink/MrlLink.js CHANGED Viewed

@@ -4,9 +4,10 @@ import classnames from 'classnames';
 import { linkOpen } from '@muraldevkit/ds-icons';
 import { defaults } from '../constants.js';
 import styles from './MrlLink.module.scss.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
-var _excluded = ["target", "className", "color", "kind", "size", "href", "attrs", "onClick", "text"];
+var _excluded = ["target", "className", "color", "kind", "size", "href", "attrs", "onClick", "text", "eventId"];
 /**
  * Renders a link component
  *
@@ -27,7 +28,25 @@ var MrlLink = _ref => {
     attrs = _ref.attrs,
     onClick = _ref.onClick,
     text = _ref.text,
+    eventId = _ref.eventId,
     remainingProps = _objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlTrackInteraction('MrlLink', eventId);
+  /**
+   * Handle onClick events
+   *
+   * @param {React.MouseEvent<HTMLElement>} e - mouse event
+   */
+  var handleOnClick = e => {
+    trackInteraction({
+      action: 'click',
+      metadata: {
+        target
+      },
+      variant: kind
+    });
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
   var allClasses = classnames(className, 'mrl-link', {
     [styles['mrl-link']]: true,
     [styles["mrl-link--".concat(color)]]: color !== defaults.color,
@@ -41,7 +60,7 @@ var MrlLink = _ref => {
     className: allClasses,
     href: href,
     target: target,
-    onClick: onClick,
+    onClick: handleOnClick,
     rel: linkRel
   }, attrs), /*#__PURE__*/React.createElement("span", {
     className: "mrl-link-text ".concat(styles.MrlLinkText)

package/dist/esm/components/link/MrlLink/MrlLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlLink.js","sources":["../../../../../src/components/link/MrlLink/MrlLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { linkOpen } from '@muraldevkit/ds-icons';\nimport { defaults, LinkColor, LinkKind, LinkSize, LinkTargetType } from '../constants';\nimport { AttrsObject } from '../../../utils';\nimport { MrlSvg } from '../../';\nimport styles from './MrlLink.module.scss';\n\nexport interface MrlLinkProptypes extends React.ComponentProps<'a'> {\n\t/** The textual label describing the link's purpose /\n\ttext: string;\n\t/* Specifies where to redirect the linked document /\n\thref: string;\n\t/* Specifies how to open the linked document /\n\ttarget?: LinkTargetType;\n\t/\n\t Color scheme to use based on the link's container background\n\t * - bold (default): a thicker underline to help a link stand out in a large amount of body copy\n\t * - simple: a thinner underline to help address visual hierarchy issues when many links are in a list\n\t /\n\tkind?: LinkKind;\n\t/\n\t Color scheme to use based on the link's container background\n\t * - default: most use cases\n\t * - mono: use on colored/saturated backgrounds (e.g. warning notifications)\n\t * - inverse: use on dark backgrounds\n\t /\n\tcolor?: LinkColor;\n\t/\n\t Allows developers to chose a specific font-size for the link. By default,\n\t * it will inherit the font-size of its parent/surrounding text.\n\t /\n\tsize?: LinkSize;\n\t/\n\t Applies additional HTML attributes to the nested anchor (`a`) element.\n\t * Example: `attrs='{ \"aria-label\": \"Special message for screen reader users\" }'`\n\t /\n\tattrs?: AttrsObject;\n\t/\n\t classes to apply to the component\n\t /\n\tclassName?: string;\n\t/\n\t Custom on click listener\n\t /\n\tonClick?: (e: React.MouseEvent<HTMLElement>) => void \| undefined;\n}\n\n/\n Renders a link component\n \n @param {MrlLinkProptypes} props the props for your MrlLink\n * @returns {React.ReactElement} an a element containing the text you pass\n */\nexport const MrlLink = ({\n\ttarget = defaults.target,\n\tclassName,\n\tcolor = defaults.color,\n\tkind = defaults.kind,\n\tsize = defaults.size,\n\thref,\n\tattrs,\n\tonClick,\n\ttext,\n\t...remainingProps\n}: MrlLinkProptypes): React.ReactElement => {\n\tconst allClasses = classnames(className, 'mrl-link', {\n\t\t[styles['mrl-link']]: true,\n\t\t[styles[`mrl-link--${color}`]]: color !== defaults.color,\n\t\t[styles[`mrl-link--${kind}`]]: kind !== defaults.kind,\n\t\t[styles[`mrl-link--${size}`]]: size !== defaults.size\n\t});\n\n\tconst smallIconSizes = ['default', 'medium'];\n\tconst svgSize =\n\t\tsmallIconSizes.indexOf(size) > -1 ? 'small' : size === 'large' ? 'medium' : 'auto';\n\tconst linkRel =\n\t\ttarget === '_blank' ? 'noopener noreferrer' : (remainingProps as { rel?: string })['rel'];\n\n\treturn (\n\t\t<a\n\t\t\t{...remainingProps}\n\t\t\tclassName={allClasses}\n\t\t\thref={href}\n\t\t\ttarget={target}\n\t\t\tonClick={~~onClick~~}\n\t\t\trel={linkRel}\n\t\t\t{...attrs}\n\t\t>\n\t\t\t<span className={`mrl-link-text ${styles.MrlLinkText}`}>{text}</span>\n\t\t\t{target === '_blank' ? (\n\t\t\t\t<MrlSvg svg={linkOpen} size={svgSize} className={`mrl-link-icon ${styles.MrlLinkIcon}`} />\n\t\t\t) : null}\n\t\t</a>\n\t);\n};\n"],"names":["MrlLink","_ref","_ref$target","target","defaults","className","_ref$color","color","_ref$kind","kind","_ref$size","size","href","attrs","onClick","text","remainingProps","_objectWithoutProperties","_excluded","allClasses","classnames","styles","concat","smallIconSizes","svgSize","indexOf","linkRel","React","createElement","_extends","rel","MrlLinkText","MrlSvg","svg","linkOpen","MrlLinkIcon"],"mappings":"~~;;;;;;;;;AAgDA~~;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAGC,IAAA,~~IAWqB~~;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,~~CAV3CE~~,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAA,MAAA,GAAGE,QAAQ,CAACD,MAAM,GAAAD,WAAA;IACxBG,SAAS,GAAAJ,IAAA,CAATI,SAAS;IAAAC,UAAA,GAAAL,IAAA,CACTM,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAGF,QAAQ,CAACG,KAAK,GAAAD,UAAA;IAAAE,SAAA,GAAAP,IAAA,CACtBQ,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAGJ,QAAQ,CAACK,IAAI,GAAAD,SAAA;IAAAE,SAAA,GAAAT,IAAA,CACpBU,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAGN,QAAQ,CAACO,IAAI,GAAAD,SAAA;IACpBE,IAAI,GAAAX,IAAA,CAAJW,IAAI;IACJC,KAAK,GAAAZ,IAAA,CAALY,KAAK;IACLC,OAAO,GAAAb,IAAA,CAAPa,OAAO;IACPC,IAAI,GAAAd,IAAA,CAAJc,IAAI;~~AACDC~~,IAAAA,cAAc,GAAAC,wBAAA,~~CAAAhB~~,IAAA,~~EAAAiB~~,SAAA,CAAA;AAEjB,EAAA,IAAMC,UAAU,GAAGC,UAAU,~~CAACf~~,SAAS,EAAE,UAAU,EAAE;AACpD,IAAA,~~CAACgB~~,MAAM,CAAC,UAAU,CAAC,GAAG,IAAI;IAC1B,CAACA,MAAM,CAAA,YAAA,CAAAC,MAAA,~~CAAcf~~,KAAK,CAAA,CAAG,GAAGA,KAAK,KAAKH,QAAQ,CAACG,KAAK;IACxD,~~CAACc~~,MAAM,CAAA,YAAA,CAAAC,MAAA,~~CAAcb~~,IAAI,CAAA,CAAG,GAAGA,IAAI,KAAKL,QAAQ,CAACK,IAAI;IACrD,~~CAACY~~,MAAM,CAAA,YAAA,CAAAC,MAAA,~~CAAcX~~,IAAI,EAAG,GAAGA,IAAI,KAAKP,QAAQ,CAACO;AAClD,GAAC,CAAC;AAEF,EAAA,~~IAAMY~~,cAAc,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC;EAC5C,IAAMC,OAAO,GACZD,cAAc,CAACE,OAAO,~~CAACd~~,IAAI,CAAC,GAAG,EAAE,GAAG,OAAO,GAAGA,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,MAAM;EACnF,~~IAAMe~~,OAAO,~~GACZvB~~,MAAM,KAAK,QAAQ,GAAG,qBAAqB,~~GAAIa~~,cAAc,CAAsB,KAAK,CAAC;AAE1F,EAAA,~~oBACCW~~,KAAA,CAAAC,aAAA,CAAA,GAAA,EAAAC,QAAA,~~KACKb~~,cAAc,EAAA;~~AAClBX~~,IAAAA,SAAS,~~EAAEc~~,UAAW;~~AACtBP~~,IAAAA,IAAI,EAAEA,IAAK;AACXT,IAAAA,MAAM,EAAEA,MAAO;AACfW,IAAAA,OAAO,~~EAAEA~~,~~OAAQ~~;~~AACjBgB~~,IAAAA,GAAG,EAAEJ;AAAQ,GAAA,~~EACTb~~,KAAK,CAAA,~~eAETc~~,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;~~AAAMvB~~,IAAAA,SAAS,EAAA,gBAAA,~~CAAAiB~~,MAAA,CAAmBD,MAAM,CAACU,WAAW;GAAG,~~EAAEhB~~,IAAW,CAAC,EACpEZ,MAAM,KAAK,QAAQ,~~gBACnBwB~~,KAAA,CAAAC,aAAA,CAACI,MAAM,EAAA;AAACC,IAAAA,GAAG,EAAEC,QAAS;~~AAACvB~~,IAAAA,IAAI,~~EAAEa~~,OAAQ;~~AAACnB~~,IAAAA,SAAS,EAAA,gBAAA,~~CAAAiB~~,MAAA,CAAmBD,MAAM,CAACc,WAAW;GAAK,CAAC,GACvF,IACF,CAAC;AAEN;;;;"}
1	+ {"version":3,"file":"MrlLink.js","sources":["../../../../../src/components/link/MrlLink/MrlLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { linkOpen } from '@muraldevkit/ds-icons';\nimport { defaults, LinkColor, LinkKind, LinkSize, LinkTargetType } from '../constants';\nimport { AttrsObject } from '../../../utils';\nimport { MrlSvg } from '../../';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\nimport styles from './MrlLink.module.scss';\n\nexport interface MrlLinkProptypes extends React.ComponentProps<'a'> {\n\t/** The textual label describing the link's purpose /\n\ttext: string;\n\t/* Specifies where to redirect the linked document /\n\thref: string;\n\t/* Specifies how to open the linked document /\n\ttarget?: LinkTargetType;\n\t/\n\t Color scheme to use based on the link's container background\n\t * - bold (default): a thicker underline to help a link stand out in a large amount of body copy\n\t * - simple: a thinner underline to help address visual hierarchy issues when many links are in a list\n\t /\n\tkind?: LinkKind;\n\t/\n\t Color scheme to use based on the link's container background\n\t * - default: most use cases\n\t * - mono: use on colored/saturated backgrounds (e.g. warning notifications)\n\t * - inverse: use on dark backgrounds\n\t /\n\tcolor?: LinkColor;\n\t/\n\t Allows developers to chose a specific font-size for the link. By default,\n\t * it will inherit the font-size of its parent/surrounding text.\n\t /\n\tsize?: LinkSize;\n\t/\n\t Applies additional HTML attributes to the nested anchor (`a`) element.\n\t * Example: `attrs='{ \"aria-label\": \"Special message for screen reader users\" }'`\n\t /\n\tattrs?: AttrsObject;\n\t/\n\t classes to apply to the component\n\t /\n\tclassName?: string;\n\t/\n\t Custom on click listener\n\t /\n\tonClick?: (e: React.MouseEvent<HTMLElement>) => void \| undefined;\n\t/\n\t Enables interaction tracking for this link. Provide a stable, non-PII id\n\t * (e.g. 'help-center-link'). When omitted, the link emits no analytics.\n\t /\n\teventId?: string;\n}\n\n/\n Renders a link component\n \n @param {MrlLinkProptypes} props the props for your MrlLink\n * @returns {React.ReactElement} an a element containing the text you pass\n /\nexport const MrlLink = ({\n\ttarget = defaults.target,\n\tclassName,\n\tcolor = defaults.color,\n\tkind = defaults.kind,\n\tsize = defaults.size,\n\thref,\n\tattrs,\n\tonClick,\n\ttext,\n\teventId,\n\t...remainingProps\n}: MrlLinkProptypes): React.ReactElement => {\n\tconst trackInteraction = useMrlTrackInteraction('MrlLink', eventId);\n\n\t/\n\t Handle onClick events\n\t \n\t @param {React.MouseEvent<HTMLElement>} e - mouse event\n\t */\n\tconst handleOnClick = (e: React.MouseEvent<HTMLElement>) => {\n\t\ttrackInteraction({ action: 'click', metadata: { target }, variant: kind });\n\n\t\tonClick?.(e);\n\t};\n\n\tconst allClasses = classnames(className, 'mrl-link', {\n\t\t[styles['mrl-link']]: true,\n\t\t[styles[`mrl-link--${color}`]]: color !== defaults.color,\n\t\t[styles[`mrl-link--${kind}`]]: kind !== defaults.kind,\n\t\t[styles[`mrl-link--${size}`]]: size !== defaults.size\n\t});\n\n\tconst smallIconSizes = ['default', 'medium'];\n\tconst svgSize =\n\t\tsmallIconSizes.indexOf(size) > -1 ? 'small' : size === 'large' ? 'medium' : 'auto';\n\tconst linkRel =\n\t\ttarget === '_blank' ? 'noopener noreferrer' : (remainingProps as { rel?: string })['rel'];\n\n\treturn (\n\t\t<a\n\t\t\t{...remainingProps}\n\t\t\tclassName={allClasses}\n\t\t\thref={href}\n\t\t\ttarget={target}\n\t\t\tonClick={handleOnClick}\n\t\t\trel={linkRel}\n\t\t\t{...attrs}\n\t\t>\n\t\t\t<span className={`mrl-link-text ${styles.MrlLinkText}`}>{text}</span>\n\t\t\t{target === '_blank' ? (\n\t\t\t\t<MrlSvg svg={linkOpen} size={svgSize} className={`mrl-link-icon ${styles.MrlLinkIcon}`} />\n\t\t\t) : null}\n\t\t</a>\n\t);\n};\n"],"names":["MrlLink","_ref","_ref$target","target","defaults","className","_ref$color","color","_ref$kind","kind","_ref$size","size","href","attrs","onClick","text","eventId","remainingProps","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","handleOnClick","e","action","metadata","variant","allClasses","classnames","styles","concat","smallIconSizes","svgSize","indexOf","linkRel","React","createElement","_extends","rel","MrlLinkText","MrlSvg","svg","linkOpen","MrlLinkIcon"],"mappings":"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"}

package/dist/esm/components/link/MrlLinkButton/MrlLinkButton.js CHANGED Viewed

@@ -5,10 +5,11 @@ import { buttonDefaults } from '../../button/constants.js';
 import { _spinnerProps } from '../../button/helpers.js';
 import { defaults } from '../constants.js';
 import { spinnerDefaults } from '../../loader/constants.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlTooltip } from '../../tooltip/MrlTooltip/MrlTooltip.js';
 import { MrlSpinner } from '../../loader/MrlSpinner/MrlSpinner.js';
-var _excluded = ["className", "href", "icon", "iconPos", "kind", "loading", "loadingText", "onClick", "target", "text", "size", "tooltip"];
+var _excluded = ["className", "href", "icon", "iconPos", "kind", "loading", "loadingText", "onClick", "target", "text", "size", "tooltip", "eventId"];
 /**
  * Warning: use this component with care. Our links generally do not look like buttons.
  * If this interaction does not navigate the user - use `MrlButton`.
@@ -32,7 +33,10 @@ var MrlLinkButton = /*#__PURE__*/React.forwardRef(function MrlLinkButton(_ref, r
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? buttonDefaults.size : _ref$size,
     tooltip = _ref.tooltip,
+    eventId = _ref.eventId,
     remainingProps = _objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlTrackInteraction('MrlLinkButton', eventId);
   /**
    * If the link has an href of `#` and an `onClick`
    * then a button should be used instead. Links should navigate
@@ -50,6 +54,13 @@ var MrlLinkButton = /*#__PURE__*/React.forwardRef(function MrlLinkButton(_ref, r
    */
   function handleOnClick(e) {
     e.stopPropagation();
+    trackInteraction({
+      action: 'click',
+      metadata: {
+        target
+      },
+      variant: kind
+    });
     if (onClick && typeof onClick === 'function') {
       onClick(e);
     }

package/dist/esm/components/link/MrlLinkButton/MrlLinkButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlLinkButton.js","sources":["../../../../../src/components/link/MrlLinkButton/MrlLinkButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { buttonDefaults, MrlButtonKind, MrlButtonSize, IconPosition } from '../../button/constants';\nimport { _spinnerProps } from '../../button/helpers';\nimport { defaults, LinkTargetType, MrlLinkButtonKind } from '../constants';\nimport { MrlSpinner, MrlTooltip, TooltipConfig } from '../../';\nimport { spinnerDefaults } from '../../loader/constants';\nimport { MrlComponentProps } from '../../../utils';\n\nimport './MrlLinkButton.global.scss';\n\nexport interface MrlLinkButtonProps\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tReact.ComponentProps<'a'> {\n\t/** Specifies where to redirect the linked document /\n\thref: string;\n\t/* Specifies how to open the linked document /\n\ttarget?: LinkTargetType;\n\t/\n\t Allow developers to add icon to buttons.\n\t /\n\ticon?: React.ReactElement;\n\t/\n\t Allows developers to right-align an icon within a button.\n\t /\n\ticonPos?: IconPosition;\n\t/\n\t Changes the visual emphasis of the button.\n\t /\n\tkind?: MrlLinkButtonKind;\n\t/\n\t Displays a spinner in the button to indicate some action is in progress.\n\t /\n\tloading?: boolean;\n\t/\n\t Text for the spinner when the button is in a loading state.\n\t /\n\tloadingText?: string;\n\t/\n\t onClick event for the button.\n\t /\n\tonClick?: (e: React.SyntheticEvent<HTMLAnchorElement>) => void;\n\t/\n\t Changes the size of the button so it can scale with its surrounding context.\n\t /\n\tsize?: MrlButtonSize;\n\t/\n\t The textual label describing the button's purpose/action.\n\t * Icon buttons require a text label to ensure accessibility.\n\t /\n\ttext: string;\n\n\t/\n\t Tooltip configuration for the button\n\t /\n\ttooltip?: TooltipConfig;\n}\n\n/\n Warning: use this component with care. Our links generally do not look like buttons.\n * If this interaction does not navigate the user - use `MrlButton`.\n /\nexport const MrlLinkButton = React.forwardRef<HTMLAnchorElement, MrlLinkButtonProps>(\n\tfunction MrlLinkButton(\n\t\t{\n\t\t\tclassName,\n\t\t\thref,\n\t\t\ticon,\n\t\t\ticonPos = buttonDefaults.iconPos,\n\t\t\tkind = defaults.linkButtonKind,\n\t\t\tloading = false,\n\t\t\tloadingText = spinnerDefaults.text,\n\t\t\tonClick,\n\t\t\ttarget = defaults.target,\n\t\t\ttext,\n\t\t\tsize = buttonDefaults.size,\n\t\t\ttooltip,\n\t\t\t...remainingProps\n\t\t}: MrlLinkButtonProps,\n\t\tref\n\t) {\n\t\t/\n\t\t If the link has an href of `#` and an `onClick`\n\t\t * then a button should be used instead. Links should navigate\n\t\t * the user somewhere, and this pattern shows us that we aren't\n\t\t * navigating but are performing an action instead.\n\t\t /\n\t\tif (href === '#' && onClick) {\n\t\t\tconsole.error('Error: `MrlLinkButton` should have an href that navigates the user somewhere');\n\t\t}\n\n\t\t/\n\t\t Handle onClick events\n\t\t \n\t\t @param {React.MouseEvent<HTMLAnchorElement>} e - mouse event\n\t\t */\n\t\tfunction handleOnClick(e: React.MouseEvent<HTMLAnchorElement>) {\n\t\t\te.stopPropagation();\n\n\t\t\tif (onClick && typeof onClick === 'function') {\n\t\t\t\tonClick(e);\n\t\t\t}\n\t\t}\n\n\t\tconst classNames = classnames(\n\t\t\t'mrlButton mrlLinkButton',\n\t\t\t`mrlButton--${size}`,\n\t\t\t`mrlButton--${kind}`,\n\t\t\t!icon && loading && `mrlButton--loading`,\n\t\t\ticon && `mrlButton--icon-${iconPos}`,\n\t\t\tclassName\n\t\t);\n\n\t\tconst spinnerProps = _spinnerProps(kind as MrlButtonKind, size);\n\t\tconst spinnerClass = icon ? '' : 'mrlButton-spinner';\n\t\tconst spinner = (\n\t\t\t<MrlSpinner\n\t\t\t\tclassName={spinnerClass}\n\t\t\t\tkind={spinnerProps.kind}\n\t\t\t\trole=\"none\"\n\t\t\t\tsize={spinnerProps.size}\n\t\t\t\ttext={loadingText}\n\t\t\t/>\n\t\t);\n\n\t\tconst renderLinkButton = () => (\n\t\t\t<a\n\t\t\t\t{...remainingProps}\n\t\t\t\tclassName={classNames}\n\t\t\t\thref={href}\n\t\t\t\ttarget={target}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={handleOnClick}\n\t\t\t>\n\t\t\t\t{loading ? spinner : icon}\n\t\t\t\t<span className=\"mrlButton-text\">{text}</span>\n\t\t\t</a>\n\t\t);\n\n\t\treturn !tooltip ? (\n\t\t\trenderLinkButton()\n\t\t) : (\n\t\t\t<MrlTooltip\n\t\t\t\tposition={tooltip.position \|\| 'bottom'}\n\t\t\t\tanchor={tooltip.anchor \|\| 'center'}\n\t\t\t\ttext={tooltip.text}\n\t\t\t\tdataQa={tooltip.dataQa}\n\t\t\t>\n\t\t\t\t{renderLinkButton()}\n\t\t\t</MrlTooltip>\n\t\t);\n\t}\n);\n"],"names":["MrlLinkButton","React","forwardRef","_ref","ref","className","href","icon","_ref$iconPos","iconPos","buttonDefaults","_ref$kind","kind","defaults","linkButtonKind","_ref$loading","loading","_ref$loadingText","loadingText","spinnerDefaults","text","onClick","_ref$target","target","_ref$size","size","tooltip","remainingProps","_objectWithoutProperties","_excluded","console","error","handleOnClick","e","stopPropagation","classNames","classnames","concat","spinnerProps","_spinnerProps","spinnerClass","spinner","createElement","MrlSpinner","role","renderLinkButton","_extends","MrlTooltip","position","anchor","dataQa"],"mappings":"~~;;;;;;;;;;;AA0DA~~;AACA;AACA;AACA;AACO,IAAMA,aAAa,gBAAGC,KAAK,CAACC,UAAU,CAC5C,SAASF,aAAaA,CAAAG,IAAA,~~EAgBrBC~~,GAAG,EACF;AAAA,EAAA,~~IAfAC~~,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IAAAC,YAAA,GAAAL,IAAA,CACJM,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAA,MAAA,GAAGE,cAAc,CAACD,OAAO,GAAAD,YAAA;IAAAG,SAAA,GAAAR,IAAA,CAChCS,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAGE,QAAQ,CAACC,cAAc,GAAAH,SAAA;IAAAI,YAAA,GAAAZ,IAAA,CAC9Ba,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,YAAA;IAAAE,gBAAA,GAAAd,IAAA,CACfe,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAA,MAAA,GAAGE,eAAe,CAACC,IAAI,GAAAH,gBAAA;IAClCI,OAAO,GAAAlB,IAAA,CAAPkB,OAAO;IAAAC,WAAA,GAAAnB,IAAA,CACPoB,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAA,MAAA,GAAGT,QAAQ,CAACU,MAAM,GAAAD,WAAA;IACxBF,IAAI,GAAAjB,IAAA,CAAJiB,IAAI;IAAAI,SAAA,GAAArB,IAAA,CACJsB,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAGd,cAAc,CAACe,IAAI,GAAAD,SAAA;IAC1BE,OAAO,GAAAvB,IAAA,CAAPuB,OAAO;AACJC,IAAAA,cAAc,GAAAC,wBAAA,~~CAAAzB~~,IAAA,~~EAAA0B~~,SAAA,CAAA;AAIlB;AACF;AACA;AACA;AACA;AACA;AACE,EAAA,~~IAAIvB~~,IAAI,KAAK,GAAG,IAAIe,OAAO,EAAE;~~AAC5BS~~,IAAAA,OAAO,CAACC,KAAK,CAAC,8EAA8E,CAAC;AAC9F,EAAA;;AAEA;AACF;AACA;AACA;AACA;EACE,SAASC,aAAaA,CAACC,CAAsC,EAAE;IAC9DA,CAAC,CAACC,eAAe,EAAE;~~AAEnB~~,IAAA,~~IAAIb~~,OAAO,IAAI,OAAOA,OAAO,KAAK,UAAU,EAAE;MAC7CA,OAAO,~~CAACY~~,CAAC,CAAC;AACX,IAAA;AACD,EAAA;AAEA,EAAA,~~IAAME~~,UAAU,GAAGC,UAAU,CAC5B,yBAAyB,EAAA,aAAA,CAAAC,MAAA,~~CACXZ~~,IAAI,CAAA,EAAA,aAAA,~~CAAAY~~,MAAA,~~CACJzB~~,IAAI,CAAA,EAClB,CAACL,IAAI,IAAIS,OAAO,IAAA,oBAAwB,EACxCT,IAAI,IAAA,kBAAA,~~CAAA8B~~,MAAA,~~CAAuB5B~~,OAAO,CAAE,EACpCJ,SACD,CAAC;AAED,EAAA,~~IAAMiC~~,YAAY,GAAGC,aAAa,~~CAAC3B~~,IAAI,EAAmBa,IAAI,CAAC;AAC/D,EAAA,~~IAAMe~~,YAAY,~~GAAGjC~~,IAAI,GAAG,EAAE,GAAG,mBAAmB;AACpD,EAAA,~~IAAMkC~~,OAAO,~~gBACZxC~~,KAAA,~~CAAAyC~~,aAAA,CAACC,UAAU,EAAA;~~AACVtC~~,IAAAA,SAAS,~~EAAEmC~~,YAAa;~~IACxB5B~~,IAAI,~~EAAE0B~~,YAAY,~~CAAC1B~~,IAAK;~~AACxBgC~~,IAAAA,IAAI,EAAC,MAAM;~~IACXnB~~,IAAI,~~EAAEa~~,YAAY,~~CAACb~~,IAAK;AACxBL,IAAAA,IAAI,EAAEF;AAAY,GAClB,CACD;EAED,~~IAAM2B~~,gBAAgB,GAAGA,~~mBACxB5C~~,KAAA,~~CAAAyC~~,aAAA,CAAA,GAAA,EAAAI,QAAA,CAAA,EAAA,~~EACKnB~~,cAAc,EAAA;~~AAClBtB~~,IAAAA,SAAS,~~EAAE8B~~,UAAW;~~AACtB7B~~,IAAAA,IAAI,EAAEA,IAAK;AACXiB,IAAAA,MAAM,EAAEA,MAAO;AACfnB,IAAAA,GAAG,EAAEA,GAAI;AACTiB,IAAAA,OAAO,~~EAAEW~~;GAAc,CAAA,~~EAEtBhB~~,OAAO,~~GAAGyB~~,OAAO,~~GAAGlC~~,IAAI,eACzBN,KAAA,~~CAAAyC~~,aAAA,CAAA,MAAA,EAAA;~~AAAMrC~~,IAAAA,SAAS,EAAC;GAAgB,EAAEe,IAAW,CAC3C,CACH;EAED,OAAO,CAACM,OAAO,~~GACdmB~~,gBAAgB,EAAE,~~gBAElB5C~~,KAAA,~~CAAAyC~~,aAAA,CAACK,UAAU,EAAA;AACVC,IAAAA,QAAQ,~~EAAEtB~~,OAAO,~~CAACsB~~,QAAQ,IAAI,QAAS;AACvCC,IAAAA,MAAM,~~EAAEvB~~,OAAO,~~CAACuB~~,MAAM,IAAI,QAAS;~~IACnC7B~~,IAAI,EAAEM,OAAO,CAACN,IAAK;~~IACnB8B~~,MAAM,~~EAAExB~~,OAAO,~~CAACwB~~;GAAO,EAEtBL,gBAAgB,EACN,CACZ;AACF,CACD;;;;"}
1	+ {"version":3,"file":"MrlLinkButton.js","sources":["../../../../../src/components/link/MrlLinkButton/MrlLinkButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { buttonDefaults, MrlButtonKind, MrlButtonSize, IconPosition } from '../../button/constants';\nimport { _spinnerProps } from '../../button/helpers';\nimport { defaults, LinkTargetType, MrlLinkButtonKind } from '../constants';\nimport { MrlSpinner, MrlTooltip, TooltipConfig } from '../../';\nimport { spinnerDefaults } from '../../loader/constants';\nimport { MrlComponentProps } from '../../../utils';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nimport './MrlLinkButton.global.scss';\n\nexport interface MrlLinkButtonProps\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tReact.ComponentProps<'a'> {\n\t/** Specifies where to redirect the linked document /\n\thref: string;\n\t/* Specifies how to open the linked document /\n\ttarget?: LinkTargetType;\n\t/\n\t Allow developers to add icon to buttons.\n\t /\n\ticon?: React.ReactElement;\n\t/\n\t Allows developers to right-align an icon within a button.\n\t /\n\ticonPos?: IconPosition;\n\t/\n\t Changes the visual emphasis of the button.\n\t /\n\tkind?: MrlLinkButtonKind;\n\t/\n\t Displays a spinner in the button to indicate some action is in progress.\n\t /\n\tloading?: boolean;\n\t/\n\t Text for the spinner when the button is in a loading state.\n\t /\n\tloadingText?: string;\n\t/\n\t onClick event for the button.\n\t /\n\tonClick?: (e: React.SyntheticEvent<HTMLAnchorElement>) => void;\n\t/\n\t Changes the size of the button so it can scale with its surrounding context.\n\t /\n\tsize?: MrlButtonSize;\n\t/\n\t The textual label describing the button's purpose/action.\n\t * Icon buttons require a text label to ensure accessibility.\n\t /\n\ttext: string;\n\n\t/\n\t Tooltip configuration for the button\n\t /\n\ttooltip?: TooltipConfig;\n\n\t/\n\t Enables interaction tracking for this link button. Provide a stable, non-PII id\n\t * (e.g. 'upgrade-plan-cta'). When omitted, the link button emits no analytics.\n\t /\n\teventId?: string;\n}\n\n/\n Warning: use this component with care. Our links generally do not look like buttons.\n * If this interaction does not navigate the user - use `MrlButton`.\n /\nexport const MrlLinkButton = React.forwardRef<HTMLAnchorElement, MrlLinkButtonProps>(\n\tfunction MrlLinkButton(\n\t\t{\n\t\t\tclassName,\n\t\t\thref,\n\t\t\ticon,\n\t\t\ticonPos = buttonDefaults.iconPos,\n\t\t\tkind = defaults.linkButtonKind,\n\t\t\tloading = false,\n\t\t\tloadingText = spinnerDefaults.text,\n\t\t\tonClick,\n\t\t\ttarget = defaults.target,\n\t\t\ttext,\n\t\t\tsize = buttonDefaults.size,\n\t\t\ttooltip,\n\t\t\teventId,\n\t\t\t...remainingProps\n\t\t}: MrlLinkButtonProps,\n\t\tref\n\t) {\n\t\tconst trackInteraction = useMrlTrackInteraction('MrlLinkButton', eventId);\n\n\t\t/\n\t\t If the link has an href of `#` and an `onClick`\n\t\t * then a button should be used instead. Links should navigate\n\t\t * the user somewhere, and this pattern shows us that we aren't\n\t\t * navigating but are performing an action instead.\n\t\t /\n\t\tif (href === '#' && onClick) {\n\t\t\tconsole.error('Error: `MrlLinkButton` should have an href that navigates the user somewhere');\n\t\t}\n\n\t\t/\n\t\t Handle onClick events\n\t\t \n\t\t @param {React.MouseEvent<HTMLAnchorElement>} e - mouse event\n\t\t */\n\t\tfunction handleOnClick(e: React.MouseEvent<HTMLAnchorElement>) {\n\t\t\te.stopPropagation();\n\n\t\t\ttrackInteraction({ action: 'click', metadata: { target }, variant: kind });\n\n\t\t\tif (onClick && typeof onClick === 'function') {\n\t\t\t\tonClick(e);\n\t\t\t}\n\t\t}\n\n\t\tconst classNames = classnames(\n\t\t\t'mrlButton mrlLinkButton',\n\t\t\t`mrlButton--${size}`,\n\t\t\t`mrlButton--${kind}`,\n\t\t\t!icon && loading && `mrlButton--loading`,\n\t\t\ticon && `mrlButton--icon-${iconPos}`,\n\t\t\tclassName\n\t\t);\n\n\t\tconst spinnerProps = _spinnerProps(kind as MrlButtonKind, size);\n\t\tconst spinnerClass = icon ? '' : 'mrlButton-spinner';\n\t\tconst spinner = (\n\t\t\t<MrlSpinner\n\t\t\t\tclassName={spinnerClass}\n\t\t\t\tkind={spinnerProps.kind}\n\t\t\t\trole=\"none\"\n\t\t\t\tsize={spinnerProps.size}\n\t\t\t\ttext={loadingText}\n\t\t\t/>\n\t\t);\n\n\t\tconst renderLinkButton = () => (\n\t\t\t<a\n\t\t\t\t{...remainingProps}\n\t\t\t\tclassName={classNames}\n\t\t\t\thref={href}\n\t\t\t\ttarget={target}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={handleOnClick}\n\t\t\t>\n\t\t\t\t{loading ? spinner : icon}\n\t\t\t\t<span className=\"mrlButton-text\">{text}</span>\n\t\t\t</a>\n\t\t);\n\n\t\treturn !tooltip ? (\n\t\t\trenderLinkButton()\n\t\t) : (\n\t\t\t<MrlTooltip\n\t\t\t\tposition={tooltip.position \|\| 'bottom'}\n\t\t\t\tanchor={tooltip.anchor \|\| 'center'}\n\t\t\t\ttext={tooltip.text}\n\t\t\t\tdataQa={tooltip.dataQa}\n\t\t\t>\n\t\t\t\t{renderLinkButton()}\n\t\t\t</MrlTooltip>\n\t\t);\n\t}\n);\n"],"names":["MrlLinkButton","React","forwardRef","_ref","ref","className","href","icon","_ref$iconPos","iconPos","buttonDefaults","_ref$kind","kind","defaults","linkButtonKind","_ref$loading","loading","_ref$loadingText","loadingText","spinnerDefaults","text","onClick","_ref$target","target","_ref$size","size","tooltip","eventId","remainingProps","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","console","error","handleOnClick","e","stopPropagation","action","metadata","variant","classNames","classnames","concat","spinnerProps","_spinnerProps","spinnerClass","spinner","createElement","MrlSpinner","role","renderLinkButton","_extends","MrlTooltip","position","anchor","dataQa"],"mappings":"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"}