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

package/dist/esm/components/form/select/MrlSelect/MrlSelect.js

@@ -3,12 +3,14 @@ import * as React from 'react';
 import Select from 'react-select';
 import { getSelectStyles } from '../styles/index.js';
 import { closeMenuOnScroll } from '../utils/closeMenuOnScroll.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlSelectValueContainer } from '../components/MrlSelectValueContainer.js';
 import { MrlSelectContainer } from '../components/MrlSelectContainer.js';
 import { MrlSelectOption } from '../components/MrlSelectOption.js';
 import { MrlSelectDropdownIndicator } from '../components/MrlSelectDropdownIndicator.js';
 
-var _excluded = ["hasError", "isReadOnly", "kind", "isSearchable"];
+var _excluded = ["hasError", "isReadOnly", "kind", "isSearchable"],
+  _excluded2 = ["eventId"];
 var SELECT_CLASS_NAME_PREFIX = 'MrlSelect';
 var SELECT_MENU_LIST_CLASS_NAME = "".concat(SELECT_CLASS_NAME_PREFIX, "__menu-list");
 
@@ -25,6 +27,11 @@ function MrlSelect(props) {
     _props$isSearchable = props.isSearchable,
     isSearchable = _props$isSearchable === void 0 ? false : _props$isSearchable,
     rest = _objectWithoutProperties(props, _excluded);
+
+  // `eventId` is toolkit-only and must never reach react-select
+  var eventId = props.eventId,
+    selectProps = _objectWithoutProperties(props, _excluded2);
+  var trackInteraction = useMrlTrackInteraction('MrlSelect', eventId);
   var defaultStyles = React.useMemo(() => {
     return getSelectStyles(kind);
   }, [kind]);
@@ -43,9 +50,34 @@ function MrlSelect(props) {
   return /*#__PURE__*/React.createElement(Select, _extends({
     classNamePrefix: SELECT_CLASS_NAME_PREFIX,
     closeMenuOnScroll: closeMenuOnScroll(SELECT_MENU_LIST_CLASS_NAME)
-  }, rest, props, {
+  }, rest, selectProps, {
     styles: _objectSpread2(_objectSpread2({}, defaultStyles), props.styles),
     components: customComponents,
+    onChange: (value, actionMeta) => {
+      var _props$onChange;
+      // only the kind of change is emitted; option labels/values may be free text.
+      trackInteraction({
+        action: 'change',
+        metadata: {
+          changeType: actionMeta.action
+        }
+      });
+      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, value, actionMeta);
+    },
+    onMenuOpen: () => {
+      var _props$onMenuOpen;
+      trackInteraction({
+        action: 'open'
+      });
+      (_props$onMenuOpen = props.onMenuOpen) === null || _props$onMenuOpen === void 0 ? void 0 : _props$onMenuOpen.call(props);
+    },
+    onMenuClose: () => {
+      var _props$onMenuClose;
+      trackInteraction({
+        action: 'close'
+      });
+      (_props$onMenuClose = props.onMenuClose) === null || _props$onMenuClose === void 0 ? void 0 : _props$onMenuClose.call(props);
+    },
     "aria-invalid": hasError,
     "aria-readonly": isReadOnly,
     menuIsOpen: isReadOnly ? false : props.menuIsOpen,

package/dist/esm/components/form/select/MrlSelect/MrlSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlSelect.js","sources":["../../../../../../src/components/form/select/MrlSelect/MrlSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport Select, { GroupBase, Props } from 'react-select';\nimport { getSelectStyles } from '../styles';\nimport {\n\tMrlSelectDropdownIndicator,\n\tMrlSelectOption,\n\tMrlSelectContainer,\n\tMrlSelectValueContainer\n} from '../components';\nimport { SelectKind } from '../types';\nimport { closeMenuOnScroll } from '../utils/closeMenuOnScroll';\n\nexport interface MrlSelectProps<\n\tOption,\n\tIsMulti extends boolean = false,\n\tGroup extends GroupBase<Option> = GroupBase<Option>\n> extends Props<Option, IsMulti, Group> {\n\thasError?: boolean;\n\tisReadOnly?: boolean;\n\tkind?: SelectKind;\n\t/**\n\t * The data-qa prefix, it will be used to add data-qa attributes to different sub components of the MrlSelect component.\n\t *\n\t * Available subcomponents:\n\t * - container, <data-qa-prefix>-container\n\t * - value-container, <data-qa-prefix>-value-container\n\t */\n\t['data-qa']?: string;\n}\n\nexport const SELECT_CLASS_NAME_PREFIX = 'MrlSelect';\nexport const SELECT_MENU_LIST_CLASS_NAME = `${SELECT_CLASS_NAME_PREFIX}__menu-list`;\n\n/**\n * MrlSelect component\n * @param props - the component props\n * @returns the select component\n */\nexport function MrlSelect<T>(props: MrlSelectProps<T>): JSX.Element {\n\tconst { hasError, isReadOnly, kind = 'default', isSearchable = false, ...rest } = props;\n\n\tconst defaultStyles = React.useMemo(() => {\n\t\treturn getSelectStyles<T>(kind);\n\t}, [kind]);\n\n\tconst customComponents = React.useMemo(() => {\n\t\tconst defaults = {\n\t\t\tDropdownIndicator: MrlSelectDropdownIndicator<T>,\n\t\t\tOption: MrlSelectOption<T>,\n\t\t\tSelectContainer: MrlSelectContainer<T>,\n\t\t\tValueContainer: MrlSelectValueContainer<T>\n\t\t};\n\n\t\tif (props.components) {\n\t\t\tObject.assign(defaults, props.components);\n\t\t}\n\n\t\treturn defaults;\n\t}, [props.components]);\n\n\treturn (\n\t\t<Select\n\t\t\tclassNamePrefix={SELECT_CLASS_NAME_PREFIX}\n\t\t\tcloseMenuOnScroll={closeMenuOnScroll(SELECT_MENU_LIST_CLASS_NAME)}\n\t\t\t{...rest}\n\t\t\t{...props}\n\t\t\tstyles={{\n\t\t\t\t...defaultStyles,\n\t\t\t\t...props.styles\n\t\t\t}}\n\t\t\tcomponents={customComponents}\n\t\t\taria-invalid={hasError}\n\t\t\taria-readonly={isReadOnly}\n\t\t\tmenuIsOpen={isReadOnly ? false : props.menuIsOpen}\n\t\t\tbackspaceRemovesValue={!isReadOnly}\n\t\t\tisSearchable={isSearchable && !isReadOnly}\n\t\t\tisMulti={false}\n\t\t/>\n\t);\n}\n"],"names":["SELECT_CLASS_NAME_PREFIX","SELECT_MENU_LIST_CLASS_NAME","concat","MrlSelect","props","hasError","isReadOnly","_props$kind","kind","_props$isSearchable","isSearchable","rest","_objectWithoutProperties","_excluded","defaultStyles","React","useMemo","getSelectStyles","customComponents","defaults","DropdownIndicator","MrlSelectDropdownIndicator","Option","MrlSelectOption","SelectContainer","MrlSelectContainer","ValueContainer","MrlSelectValueContainer","components","Object","assign","createElement","Select","_extends","classNamePrefix","closeMenuOnScroll","styles","_objectSpread","menuIsOpen","backspaceRemovesValue","isMulti"],"mappings":";;;;;;;;;;;AA8BO,IAAMA,wBAAwB,GAAG;IAC3BC,2BAA2B,GAAA,EAAA,CAAAC,MAAA,CAAMF,wBAAwB,EAAA,aAAA;;AAEtE;AACA;AACA;AACA;AACA;AACO,SAASG,SAASA,CAAIC,KAAwB,EAAe;AACnE,EAAA,IAAQC,QAAQ,GAAkED,KAAK,CAA/EC,QAAQ;IAAEC,UAAU,GAAsDF,KAAK,CAArEE,UAAU;IAAAC,WAAA,GAAsDH,KAAK,CAAzDI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,WAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,WAAA;IAAAE,mBAAA,GAAoCL,KAAK,CAAvCM,YAAY;AAAZA,IAAAA,YAAY,GAAAD,mBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,mBAAA;AAAKE,IAAAA,IAAI,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA,CAAA;AAEvF,EAAA,IAAMC,aAAa,GAAGC,KAAK,CAACC,OAAO,CAAC,MAAM;IACzC,OAAOC,eAAe,CAAIT,IAAI,CAAC;AAChC,EAAA,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;AAEV,EAAA,IAAMU,gBAAgB,GAAGH,KAAK,CAACC,OAAO,CAAC,MAAM;AAC5C,IAAA,IAAMG,QAAQ,GAAG;AAChBC,MAAAA,iBAAiB,EAAEC,0BAA6B;AAChDC,MAAAA,MAAM,EAAEC,eAAkB;AAC1BC,MAAAA,eAAe,EAAEC,kBAAqB;AACtCC,MAAAA,cAAc,EAAEC;KAChB;IAED,IAAIvB,KAAK,CAACwB,UAAU,EAAE;MACrBC,MAAM,CAACC,MAAM,CAACX,QAAQ,EAAEf,KAAK,CAACwB,UAAU,CAAC;AAC1C,IAAA;AAEA,IAAA,OAAOT,QAAQ;AAChB,EAAA,CAAC,EAAE,CAACf,KAAK,CAACwB,UAAU,CAAC,CAAC;AAEtB,EAAA,oBACCb,KAAA,CAAAgB,aAAA,CAACC,MAAM,EAAAC,QAAA,CAAA;AACNC,IAAAA,eAAe,EAAElC,wBAAyB;IAC1CmC,iBAAiB,EAAEA,iBAAiB,CAAClC,2BAA2B;GAAE,EAC9DU,IAAI,EACJP,KAAK,EAAA;IACTgC,MAAM,EAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACFvB,aAAa,CAAA,EACbV,KAAK,CAACgC,MAAM,CACd;AACFR,IAAAA,UAAU,EAAEV,gBAAiB;AAC7B,IAAA,cAAA,EAAcb,QAAS;AACvB,IAAA,eAAA,EAAeC,UAAW;AAC1BgC,IAAAA,UAAU,EAAEhC,UAAU,GAAG,KAAK,GAAGF,KAAK,CAACkC,UAAW;IAClDC,qBAAqB,EAAE,CAACjC,UAAW;AACnCI,IAAAA,YAAY,EAAEA,YAAY,IAAI,CAACJ,UAAW;AAC1CkC,IAAAA,OAAO,EAAE;AAAM,GAAA,CACf,CAAC;AAEJ;;;;"}
+{"version":3,"file":"MrlSelect.js","sources":["../../../../../../src/components/form/select/MrlSelect/MrlSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport Select, { GroupBase, Props } from 'react-select';\nimport { getSelectStyles } from '../styles';\nimport {\n\tMrlSelectDropdownIndicator,\n\tMrlSelectOption,\n\tMrlSelectContainer,\n\tMrlSelectValueContainer\n} from '../components';\nimport { SelectKind } from '../types';\nimport { closeMenuOnScroll } from '../utils/closeMenuOnScroll';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nexport interface MrlSelectProps<\n\tOption,\n\tIsMulti extends boolean = false,\n\tGroup extends GroupBase<Option> = GroupBase<Option>\n> extends Props<Option, IsMulti, Group> {\n\thasError?: boolean;\n\tisReadOnly?: boolean;\n\tkind?: SelectKind;\n\t/**\n\t * The data-qa prefix, it will be used to add data-qa attributes to different sub components of the MrlSelect component.\n\t *\n\t * Available subcomponents:\n\t * - container, <data-qa-prefix>-container\n\t * - value-container, <data-qa-prefix>-value-container\n\t */\n\t['data-qa']?: string;\n\t/**\n\t * Enables interaction tracking for this select. Provide a stable, non-PII id\n\t * (e.g. 'member-role-select'). When omitted, the select emits no analytics.\n\t *\n\t * Note: option labels and values are never emitted — only the kind of change.\n\t */\n\teventId?: string;\n}\n\nexport const SELECT_CLASS_NAME_PREFIX = 'MrlSelect';\nexport const SELECT_MENU_LIST_CLASS_NAME = `${SELECT_CLASS_NAME_PREFIX}__menu-list`;\n\n/**\n * MrlSelect component\n * @param props - the component props\n * @returns the select component\n */\nexport function MrlSelect<T>(props: MrlSelectProps<T>): JSX.Element {\n\tconst { hasError, isReadOnly, kind = 'default', isSearchable = false, ...rest } = props;\n\n\t// `eventId` is toolkit-only and must never reach react-select\n\tconst { eventId, ...selectProps } = props;\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlSelect', eventId);\n\n\tconst defaultStyles = React.useMemo(() => {\n\t\treturn getSelectStyles<T>(kind);\n\t}, [kind]);\n\n\tconst customComponents = React.useMemo(() => {\n\t\tconst defaults = {\n\t\t\tDropdownIndicator: MrlSelectDropdownIndicator<T>,\n\t\t\tOption: MrlSelectOption<T>,\n\t\t\tSelectContainer: MrlSelectContainer<T>,\n\t\t\tValueContainer: MrlSelectValueContainer<T>\n\t\t};\n\n\t\tif (props.components) {\n\t\t\tObject.assign(defaults, props.components);\n\t\t}\n\n\t\treturn defaults;\n\t}, [props.components]);\n\n\treturn (\n\t\t<Select\n\t\t\tclassNamePrefix={SELECT_CLASS_NAME_PREFIX}\n\t\t\tcloseMenuOnScroll={closeMenuOnScroll(SELECT_MENU_LIST_CLASS_NAME)}\n\t\t\t{...rest}\n\t\t\t{...selectProps}\n\t\t\tstyles={{\n\t\t\t\t...defaultStyles,\n\t\t\t\t...props.styles\n\t\t\t}}\n\t\t\tcomponents={customComponents}\n\t\t\tonChange={(value, actionMeta) => {\n\t\t\t\t// only the kind of change is emitted; option labels/values may be free text.\n\t\t\t\ttrackInteraction({ action: 'change', metadata: { changeType: actionMeta.action } });\n\n\t\t\t\tprops.onChange?.(value, actionMeta);\n\t\t\t}}\n\t\t\tonMenuOpen={() => {\n\t\t\t\ttrackInteraction({ action: 'open' });\n\n\t\t\t\tprops.onMenuOpen?.();\n\t\t\t}}\n\t\t\tonMenuClose={() => {\n\t\t\t\ttrackInteraction({ action: 'close' });\n\n\t\t\t\tprops.onMenuClose?.();\n\t\t\t}}\n\t\t\taria-invalid={hasError}\n\t\t\taria-readonly={isReadOnly}\n\t\t\tmenuIsOpen={isReadOnly ? false : props.menuIsOpen}\n\t\t\tbackspaceRemovesValue={!isReadOnly}\n\t\t\tisSearchable={isSearchable && !isReadOnly}\n\t\t\tisMulti={false}\n\t\t/>\n\t);\n}\n"],"names":["SELECT_CLASS_NAME_PREFIX","SELECT_MENU_LIST_CLASS_NAME","concat","MrlSelect","props","hasError","isReadOnly","_props$kind","kind","_props$isSearchable","isSearchable","rest","_objectWithoutProperties","_excluded","eventId","selectProps","_excluded2","trackInteraction","useMrlTrackInteraction","defaultStyles","React","useMemo","getSelectStyles","customComponents","defaults","DropdownIndicator","MrlSelectDropdownIndicator","Option","MrlSelectOption","SelectContainer","MrlSelectContainer","ValueContainer","MrlSelectValueContainer","components","Object","assign","createElement","Select","_extends","classNamePrefix","closeMenuOnScroll","styles","_objectSpread","onChange","value","actionMeta","_props$onChange","action","metadata","changeType","call","onMenuOpen","_props$onMenuOpen","onMenuClose","_props$onMenuClose","menuIsOpen","backspaceRemovesValue","isMulti"],"mappings":"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"}

package/dist/esm/components/form/switch/MrlSwitch/MrlSwitch.js

@@ -4,9 +4,10 @@ import { memo, useMemo } from 'react';
 import classnames from 'classnames';
 import styles from './MrlSwitch.module.scss.js';
 import { getUniqueId } from '../../../../utils/setAttributes/setAttributes.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlSwitchStandalone } from '../MrlSwitchStandalone/MrlSwitchStandalone.js';
 
-var _excluded = ["className", "disabled", "id", "label", "onChange", "selected"];
+var _excluded = ["className", "disabled", "id", "label", "onChange", "selected", "eventId"];
 var MrlSwitch = /*#__PURE__*/memo(_ref => {
   var className = _ref.className,
     disabled = _ref.disabled,
@@ -16,8 +17,19 @@ var MrlSwitch = /*#__PURE__*/memo(_ref => {
     onChange = _ref.onChange,
     _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? false : _ref$selected,
+    eventId = _ref.eventId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var inputId = useMemo(() => id || getUniqueId('mrl-toggle-'), [id]);
+  var trackInteraction = useMrlTrackInteraction('MrlSwitch', eventId);
+  var handleChange = e => {
+    trackInteraction({
+      action: 'toggle',
+      metadata: {
+        selected: e.target.checked
+      }
+    });
+    onChange(e);
+  };
   var textOnlyLabel = typeof label === 'string';
   var containerClasses = classnames('MrlSwitch', styles['MrlSwitch'], className, {
     ['mrl-label']: textOnlyLabel,
@@ -30,7 +42,7 @@ var MrlSwitch = /*#__PURE__*/memo(_ref => {
   }, label, /*#__PURE__*/React.createElement(MrlSwitchStandalone, _extends({}, rest, {
     disabled: disabled,
     id: inputId,
-    onChange: onChange,
+    onChange: handleChange,
     selected: selected
   })));
 });

package/dist/esm/components/form/switch/MrlSwitch/MrlSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlSwitch.js","sources":["../../../../../../src/components/form/switch/MrlSwitch/MrlSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { memo, useMemo } from 'react';\nimport { MrlSwitchStandalone } from '../../..';\nimport { getUniqueId } from '../../../../utils';\n\nimport styles from './MrlSwitch.module.scss';\n\ninterface MrlSwitchProps extends React.ComponentPropsWithoutRef<'input'> {\n\tclassName?: string;\n\tdisabled?: boolean;\n\tid?: string;\n\t/**\n\t * The `label` is best used as a string, which will style according to MrlLabel styles.\n\t * If you need custom styles, you can use `className` or use a span that you style as `label`\n\t */\n\tlabel: string | React.ReactNode;\n\tonChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\tselected?: boolean;\n}\n\nexport const MrlSwitch = memo(\n\t({\n\t\tclassName,\n\t\tdisabled,\n\t\tid = undefined,\n\t\tlabel,\n\t\tonChange,\n\t\tselected = false,\n\t\t...rest\n\t}: MrlSwitchProps) => {\n\t\tconst inputId = useMemo(() => id || getUniqueId('mrl-toggle-'), [id]);\n\t\tconst textOnlyLabel = typeof label === 'string';\n\t\tconst containerClasses = classnames('MrlSwitch', styles['MrlSwitch'], className, {\n\t\t\t['mrl-label']: textOnlyLabel,\n\t\t\t[styles['MrlLabel']]: textOnlyLabel,\n\t\t\t['MrlSwitch-disabled']: disabled,\n\t\t\t[styles['MrlSwitch-disabled']]: disabled\n\t\t});\n\n\t\treturn (\n\t\t\t<label className={containerClasses}>\n\t\t\t\t{label}\n\t\t\t\t<MrlSwitchStandalone\n\t\t\t\t\t{...rest}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tselected={selected}\n\t\t\t\t/>\n\t\t\t</label>\n\t\t);\n\t}\n);\n\nMrlSwitch.displayName = 'MrlSwitch';\n"],"names":["MrlSwitch","memo","_ref","className","disabled","_ref$id","id","undefined","label","onChange","_ref$selected","selected","rest","_objectWithoutProperties","_excluded","inputId","useMemo","getUniqueId","textOnlyLabel","containerClasses","classnames","styles","React","createElement","MrlSwitchStandalone","_extends","displayName"],"mappings":";;;;;;;;;IAqBaA,SAAS,gBAAGC,IAAI,CAC5BC,IAAA,IAQsB;AAAA,EAAA,IAPrBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,OAAA,GAAAH,IAAA,CACRI,EAAE;AAAFA,IAAAA,EAAE,GAAAD,OAAA,KAAA,MAAA,GAAGE,SAAS,GAAAF,OAAA;IACdG,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IAAAC,aAAA,GAAAR,IAAA,CACRS,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,aAAA;AACbE,IAAAA,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA;AAEP,EAAA,IAAMC,OAAO,GAAGC,OAAO,CAAC,MAAMV,EAAE,IAAIW,WAAW,CAAC,aAAa,CAAC,EAAE,CAACX,EAAE,CAAC,CAAC;AACrE,EAAA,IAAMY,aAAa,GAAG,OAAOV,KAAK,KAAK,QAAQ;AAC/C,EAAA,IAAMW,gBAAgB,GAAGC,UAAU,CAAC,WAAW,EAAEC,MAAM,CAAC,WAAW,CAAC,EAAElB,SAAS,EAAE;IAChF,CAAC,WAAW,GAAGe,aAAa;AAC5B,IAAA,CAACG,MAAM,CAAC,UAAU,CAAC,GAAGH,aAAa;IACnC,CAAC,oBAAoB,GAAGd,QAAQ;AAChC,IAAA,CAACiB,MAAM,CAAC,oBAAoB,CAAC,GAAGjB;AACjC,GAAC,CAAC;EAEF,oBACCkB,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AAAOpB,IAAAA,SAAS,EAAEgB;GAAiB,EACjCX,KAAK,eACNc,KAAA,CAAAC,aAAA,CAACC,mBAAmB,EAAAC,QAAA,CAAA,EAAA,EACfb,IAAI,EAAA;AACRR,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,EAAE,EAAES,OAAQ;AACZN,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,QAAQ,EAAEA;AAAS,GAAA,CACnB,CACK,CAAC;AAEV,CACD;AAEAX,SAAS,CAAC0B,WAAW,GAAG,WAAW;;;;"}
+{"version":3,"file":"MrlSwitch.js","sources":["../../../../../../src/components/form/switch/MrlSwitch/MrlSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { memo, useMemo } from 'react';\nimport { MrlSwitchStandalone } from '../../..';\nimport { getUniqueId } from '../../../../utils';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlSwitch.module.scss';\n\ninterface MrlSwitchProps extends React.ComponentPropsWithoutRef<'input'> {\n\tclassName?: string;\n\tdisabled?: boolean;\n\tid?: string;\n\t/**\n\t * Enables interaction tracking for this switch. Provide a stable, non-PII id\n\t * (e.g. 'workspace-sso-toggle'). When omitted, the switch emits no analytics.\n\t */\n\teventId?: string;\n\t/**\n\t * The `label` is best used as a string, which will style according to MrlLabel styles.\n\t * If you need custom styles, you can use `className` or use a span that you style as `label`\n\t */\n\tlabel: string | React.ReactNode;\n\tonChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\tselected?: boolean;\n}\n\nexport const MrlSwitch = memo(\n\t({\n\t\tclassName,\n\t\tdisabled,\n\t\tid = undefined,\n\t\tlabel,\n\t\tonChange,\n\t\tselected = false,\n\t\t// destructured so it never reaches the nested input as an unknown DOM attribute,\n\t\t// and so the standalone switch doesn't emit a duplicate event.\n\t\teventId,\n\t\t...rest\n\t}: MrlSwitchProps) => {\n\t\tconst inputId = useMemo(() => id || getUniqueId('mrl-toggle-'), [id]);\n\t\tconst trackInteraction = useMrlTrackInteraction('MrlSwitch', eventId);\n\n\t\tconst handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\ttrackInteraction({ action: 'toggle', metadata: { selected: e.target.checked } });\n\n\t\t\tonChange(e);\n\t\t};\n\n\t\tconst textOnlyLabel = typeof label === 'string';\n\t\tconst containerClasses = classnames('MrlSwitch', styles['MrlSwitch'], className, {\n\t\t\t['mrl-label']: textOnlyLabel,\n\t\t\t[styles['MrlLabel']]: textOnlyLabel,\n\t\t\t['MrlSwitch-disabled']: disabled,\n\t\t\t[styles['MrlSwitch-disabled']]: disabled\n\t\t});\n\n\t\treturn (\n\t\t\t<label className={containerClasses}>\n\t\t\t\t{label}\n\t\t\t\t<MrlSwitchStandalone\n\t\t\t\t\t{...rest}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tselected={selected}\n\t\t\t\t/>\n\t\t\t</label>\n\t\t);\n\t}\n);\n\nMrlSwitch.displayName = 'MrlSwitch';\n"],"names":["MrlSwitch","memo","_ref","className","disabled","_ref$id","id","undefined","label","onChange","_ref$selected","selected","eventId","rest","_objectWithoutProperties","_excluded","inputId","useMemo","getUniqueId","trackInteraction","useMrlTrackInteraction","handleChange","e","action","metadata","target","checked","textOnlyLabel","containerClasses","classnames","styles","React","createElement","MrlSwitchStandalone","_extends","displayName"],"mappings":";;;;;;;;;;IA2BaA,SAAS,gBAAGC,IAAI,CAC5BC,IAAA,IAWsB;AAAA,EAAA,IAVrBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,OAAA,GAAAH,IAAA,CACRI,EAAE;AAAFA,IAAAA,EAAE,GAAAD,OAAA,KAAA,MAAA,GAAGE,SAAS,GAAAF,OAAA;IACdG,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IAAAC,aAAA,GAAAR,IAAA,CACRS,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,aAAA;IAGhBE,OAAO,GAAAV,IAAA,CAAPU,OAAO;AACJC,IAAAA,IAAI,GAAAC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA,CAAA;AAEP,EAAA,IAAMC,OAAO,GAAGC,OAAO,CAAC,MAAMX,EAAE,IAAIY,WAAW,CAAC,aAAa,CAAC,EAAE,CAACZ,EAAE,CAAC,CAAC;AACrE,EAAA,IAAMa,gBAAgB,GAAGC,sBAAsB,CAAC,WAAW,EAAER,OAAO,CAAC;EAErE,IAAMS,YAAY,GAAIC,CAAsC,IAAK;AAChEH,IAAAA,gBAAgB,CAAC;AAAEI,MAAAA,MAAM,EAAE,QAAQ;AAAEC,MAAAA,QAAQ,EAAE;AAAEb,QAAAA,QAAQ,EAAEW,CAAC,CAACG,MAAM,CAACC;AAAQ;AAAE,KAAC,CAAC;IAEhFjB,QAAQ,CAACa,CAAC,CAAC;EACZ,CAAC;AAED,EAAA,IAAMK,aAAa,GAAG,OAAOnB,KAAK,KAAK,QAAQ;AAC/C,EAAA,IAAMoB,gBAAgB,GAAGC,UAAU,CAAC,WAAW,EAAEC,MAAM,CAAC,WAAW,CAAC,EAAE3B,SAAS,EAAE;IAChF,CAAC,WAAW,GAAGwB,aAAa;AAC5B,IAAA,CAACG,MAAM,CAAC,UAAU,CAAC,GAAGH,aAAa;IACnC,CAAC,oBAAoB,GAAGvB,QAAQ;AAChC,IAAA,CAAC0B,MAAM,CAAC,oBAAoB,CAAC,GAAG1B;AACjC,GAAC,CAAC;EAEF,oBACC2B,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AAAO7B,IAAAA,SAAS,EAAEyB;GAAiB,EACjCpB,KAAK,eACNuB,KAAA,CAAAC,aAAA,CAACC,mBAAmB,EAAAC,QAAA,CAAA,EAAA,EACfrB,IAAI,EAAA;AACRT,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,EAAE,EAAEU,OAAQ;AACZP,IAAAA,QAAQ,EAAEY,YAAa;AACvBV,IAAAA,QAAQ,EAAEA;AAAS,GAAA,CACnB,CACK,CAAC;AAEV,CACD;AAEAX,SAAS,CAACmC,WAAW,GAAG,WAAW;;;;"}

package/dist/esm/components/form/switch/MrlSwitchStandalone/MrlSwitchStandalone.js

@@ -4,9 +4,10 @@ import * as React from 'react';
 import { memo, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import styles from './MrlSwitchStandalone.module.scss.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlSvg } from '../../../svg/MrlSvg/MrlSvg.js';
 
-var _excluded = ["className", "id", "labelledBy", "onChange", "selected"];
+var _excluded = ["className", "id", "labelledBy", "onChange", "selected", "eventId"];
 var MrlSwitchStandalone = /*#__PURE__*/memo(_ref => {
   var className = _ref.className,
     id = _ref.id,
@@ -14,15 +15,23 @@ var MrlSwitchStandalone = /*#__PURE__*/memo(_ref => {
     onChange = _ref.onChange,
     _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? false : _ref$selected,
+    eventId = _ref.eventId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(selected),
     _useState2 = _slicedToArray(_useState, 2),
     isChecked = _useState2[0],
     setIsChecked = _useState2[1];
+  var trackInteraction = useMrlTrackInteraction('MrlSwitchStandalone', eventId);
   useEffect(() => {
     setIsChecked(selected);
   }, [selected]);
   var handleChange = e => {
+    trackInteraction({
+      action: 'toggle',
+      metadata: {
+        selected: e.target.checked
+      }
+    });
     setIsChecked(e.target.checked);
     onChange(e);
   };

package/dist/esm/components/form/switch/MrlSwitchStandalone/MrlSwitchStandalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlSwitchStandalone.js","sources":["../../../../../../src/components/form/switch/MrlSwitchStandalone/MrlSwitchStandalone.tsx"],"sourcesContent":["import { check, minus } from '@muraldevkit/ds-icons';\nimport * as React from 'react';\nimport classnames from 'classnames';\nimport { memo, useState, useEffect } from 'react';\nimport { MrlSvg } from '../../..';\n\nimport styles from './MrlSwitchStandalone.module.scss';\n\ninterface MrlSwitchStandaloneProps extends React.ComponentPropsWithoutRef<'input'> {\n\tclassName?: string;\n\tid: string;\n\tlabelledBy?: string;\n\tonChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\tselected?: boolean;\n}\n\nexport const MrlSwitchStandalone = memo(\n\t({\n\t\tclassName,\n\t\tid,\n\t\tlabelledBy,\n\t\tonChange,\n\t\tselected = false,\n\t\t...rest\n\t}: MrlSwitchStandaloneProps) => {\n\t\tconst [isChecked, setIsChecked] = useState(selected);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsChecked(selected);\n\t\t}, [selected]);\n\n\t\tconst handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\tsetIsChecked(e.target.checked);\n\t\t\tonChange(e);\n\t\t};\n\n\t\tconst containerClasses = classnames(\n\t\t\tclassName,\n\t\t\t'MrlSwitchStandalone',\n\t\t\tstyles['MrlSwitchStandalone']\n\t\t);\n\n\t\treturn (\n\t\t\t<div className={containerClasses}>\n\t\t\t\t<input\n\t\t\t\t\t{...rest}\n\t\t\t\t\taria-labelledby={labelledBy}\n\t\t\t\t\taria-checked={isChecked}\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\t'MrlSwitchStandalone-checkbox',\n\t\t\t\t\t\tstyles['MrlSwitchStandalone-checkbox']\n\t\t\t\t\t)}\n\t\t\t\t\tid={id}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\trole=\"switch\"\n\t\t\t\t/>\n\t\t\t\t<span\n\t\t\t\t\tclassName={classnames('MrlSwitchStandalone-switch', styles['MrlSwitchStandalone-switch'])}\n\t\t\t\t/>\n\t\t\t\t<span\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\t'MrlSwitchStandalone-switch-indicator',\n\t\t\t\t\t\tstyles['MrlSwitchStandalone-switch-indicator']\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<MrlSvg size=\"auto\" svg={isChecked ? check : minus} />\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nMrlSwitchStandalone.displayName = 'MrlSwitchStandalone';\n"],"names":["MrlSwitchStandalone","memo","_ref","className","id","labelledBy","onChange","_ref$selected","selected","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","isChecked","setIsChecked","useEffect","handleChange","e","target","checked","containerClasses","classnames","styles","React","createElement","_extends","type","role","MrlSvg","size","svg","check","minus","displayName"],"mappings":";;;;;;;;;IAgBaA,mBAAmB,gBAAGC,IAAI,CACtCC,IAAA,IAOgC;AAAA,EAAA,IAN/BC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAAC,aAAA,GAAAL,IAAA,CACRM,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,aAAA;AACbE,IAAAA,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA;AAEP,EAAA,IAAAC,SAAA,GAAkCC,QAAQ,CAACL,QAAQ,CAAC;IAAAM,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA7CI,IAAAA,SAAS,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,YAAY,GAAAH,UAAA,CAAA,CAAA,CAAA;AAE9BI,EAAAA,SAAS,CAAC,MAAM;IACfD,YAAY,CAACT,QAAQ,CAAC;AACvB,EAAA,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAMW,YAAY,GAAIC,CAAsC,IAAK;AAChEH,IAAAA,YAAY,CAACG,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC;IAC9BhB,QAAQ,CAACc,CAAC,CAAC;EACZ,CAAC;AAED,EAAA,IAAMG,gBAAgB,GAAGC,UAAU,CAClCrB,SAAS,EACT,qBAAqB,EACrBsB,MAAM,CAAC,qBAAqB,CAC7B,CAAC;EAED,oBACCC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKxB,IAAAA,SAAS,EAAEoB;AAAiB,GAAA,eAChCG,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAAC,QAAA,KACKnB,IAAI,EAAA;AACR,IAAA,iBAAA,EAAiBJ,UAAW;AAC5B,IAAA,cAAA,EAAcW,SAAU;IACxBb,SAAS,EAAEqB,UAAU,CACpB,8BAA8B,EAC9BC,MAAM,CAAC,8BAA8B,CACtC,CAAE;AACFrB,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,QAAQ,EAAEa,YAAa;AACvBU,IAAAA,IAAI,EAAC,UAAU;AACfC,IAAAA,IAAI,EAAC;AAAQ,GAAA,CACb,CAAC,eACFJ,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IACCxB,SAAS,EAAEqB,UAAU,CAAC,4BAA4B,EAAEC,MAAM,CAAC,4BAA4B,CAAC;AAAE,GAC1F,CAAC,eACFC,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IACCxB,SAAS,EAAEqB,UAAU,CACpB,sCAAsC,EACtCC,MAAM,CAAC,sCAAsC,CAC9C;AAAE,GAAA,eAEFC,KAAA,CAAAC,aAAA,CAACI,MAAM,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAM;AAACC,IAAAA,GAAG,EAAEjB,SAAS,GAAGkB,KAAK,GAAGC;GAAQ,CAChD,CACF,CAAC;AAER,CACD;AAEAnC,mBAAmB,CAACoC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"MrlSwitchStandalone.js","sources":["../../../../../../src/components/form/switch/MrlSwitchStandalone/MrlSwitchStandalone.tsx"],"sourcesContent":["import { check, minus } from '@muraldevkit/ds-icons';\nimport * as React from 'react';\nimport classnames from 'classnames';\nimport { memo, useState, useEffect } from 'react';\nimport { MrlSvg } from '../../..';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlSwitchStandalone.module.scss';\n\ninterface MrlSwitchStandaloneProps extends React.ComponentPropsWithoutRef<'input'> {\n\tclassName?: string;\n\tid: string;\n\tlabelledBy?: string;\n\tonChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\tselected?: boolean;\n\t/**\n\t * Enables interaction tracking for this switch. Provide a stable, non-PII id\n\t * (e.g. 'workspace-sso-toggle'). When omitted, the switch emits no analytics.\n\t */\n\teventId?: string;\n}\n\nexport const MrlSwitchStandalone = memo(\n\t({\n\t\tclassName,\n\t\tid,\n\t\tlabelledBy,\n\t\tonChange,\n\t\tselected = false,\n\t\teventId,\n\t\t...rest\n\t}: MrlSwitchStandaloneProps) => {\n\t\tconst [isChecked, setIsChecked] = useState(selected);\n\n\t\tconst trackInteraction = useMrlTrackInteraction('MrlSwitchStandalone', eventId);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsChecked(selected);\n\t\t}, [selected]);\n\n\t\tconst handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\ttrackInteraction({ action: 'toggle', metadata: { selected: e.target.checked } });\n\n\t\t\tsetIsChecked(e.target.checked);\n\t\t\tonChange(e);\n\t\t};\n\n\t\tconst containerClasses = classnames(\n\t\t\tclassName,\n\t\t\t'MrlSwitchStandalone',\n\t\t\tstyles['MrlSwitchStandalone']\n\t\t);\n\n\t\treturn (\n\t\t\t<div className={containerClasses}>\n\t\t\t\t<input\n\t\t\t\t\t{...rest}\n\t\t\t\t\taria-labelledby={labelledBy}\n\t\t\t\t\taria-checked={isChecked}\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\t'MrlSwitchStandalone-checkbox',\n\t\t\t\t\t\tstyles['MrlSwitchStandalone-checkbox']\n\t\t\t\t\t)}\n\t\t\t\t\tid={id}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\trole=\"switch\"\n\t\t\t\t/>\n\t\t\t\t<span\n\t\t\t\t\tclassName={classnames('MrlSwitchStandalone-switch', styles['MrlSwitchStandalone-switch'])}\n\t\t\t\t/>\n\t\t\t\t<span\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\t'MrlSwitchStandalone-switch-indicator',\n\t\t\t\t\t\tstyles['MrlSwitchStandalone-switch-indicator']\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<MrlSvg size=\"auto\" svg={isChecked ? check : minus} />\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nMrlSwitchStandalone.displayName = 'MrlSwitchStandalone';\n"],"names":["MrlSwitchStandalone","memo","_ref","className","id","labelledBy","onChange","_ref$selected","selected","eventId","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","isChecked","setIsChecked","trackInteraction","useMrlTrackInteraction","useEffect","handleChange","e","action","metadata","target","checked","containerClasses","classnames","styles","React","createElement","_extends","type","role","MrlSvg","size","svg","check","minus","displayName"],"mappings":";;;;;;;;;;IAsBaA,mBAAmB,gBAAGC,IAAI,CACtCC,IAAA,IAQgC;AAAA,EAAA,IAP/BC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAAC,aAAA,GAAAL,IAAA,CACRM,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,aAAA;IAChBE,OAAO,GAAAP,IAAA,CAAPO,OAAO;AACJC,IAAAA,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA;AAEP,EAAA,IAAAC,SAAA,GAAkCC,QAAQ,CAACN,QAAQ,CAAC;IAAAO,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA7CI,IAAAA,SAAS,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,YAAY,GAAAH,UAAA,CAAA,CAAA,CAAA;AAE9B,EAAA,IAAMI,gBAAgB,GAAGC,sBAAsB,CAAC,qBAAqB,EAAEX,OAAO,CAAC;AAE/EY,EAAAA,SAAS,CAAC,MAAM;IACfH,YAAY,CAACV,QAAQ,CAAC;AACvB,EAAA,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAMc,YAAY,GAAIC,CAAsC,IAAK;AAChEJ,IAAAA,gBAAgB,CAAC;AAAEK,MAAAA,MAAM,EAAE,QAAQ;AAAEC,MAAAA,QAAQ,EAAE;AAAEjB,QAAAA,QAAQ,EAAEe,CAAC,CAACG,MAAM,CAACC;AAAQ;AAAE,KAAC,CAAC;AAEhFT,IAAAA,YAAY,CAACK,CAAC,CAACG,MAAM,CAACC,OAAO,CAAC;IAC9BrB,QAAQ,CAACiB,CAAC,CAAC;EACZ,CAAC;AAED,EAAA,IAAMK,gBAAgB,GAAGC,UAAU,CAClC1B,SAAS,EACT,qBAAqB,EACrB2B,MAAM,CAAC,qBAAqB,CAC7B,CAAC;EAED,oBACCC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAK7B,IAAAA,SAAS,EAAEyB;AAAiB,GAAA,eAChCG,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAAC,QAAA,KACKvB,IAAI,EAAA;AACR,IAAA,iBAAA,EAAiBL,UAAW;AAC5B,IAAA,cAAA,EAAcY,SAAU;IACxBd,SAAS,EAAE0B,UAAU,CACpB,8BAA8B,EAC9BC,MAAM,CAAC,8BAA8B,CACtC,CAAE;AACF1B,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,QAAQ,EAAEgB,YAAa;AACvBY,IAAAA,IAAI,EAAC,UAAU;AACfC,IAAAA,IAAI,EAAC;AAAQ,GAAA,CACb,CAAC,eACFJ,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IACC7B,SAAS,EAAE0B,UAAU,CAAC,4BAA4B,EAAEC,MAAM,CAAC,4BAA4B,CAAC;AAAE,GAC1F,CAAC,eACFC,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IACC7B,SAAS,EAAE0B,UAAU,CACpB,sCAAsC,EACtCC,MAAM,CAAC,sCAAsC,CAC9C;AAAE,GAAA,eAEFC,KAAA,CAAAC,aAAA,CAACI,MAAM,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAM;AAACC,IAAAA,GAAG,EAAErB,SAAS,GAAGsB,KAAK,GAAGC;GAAQ,CAChD,CACF,CAAC;AAER,CACD;AAEAxC,mBAAmB,CAACyC,WAAW,GAAG,qBAAqB;;;;"}

package/dist/esm/components/form/text-input/MrlEditableTextInput/MrlEditableTextInput.js

@@ -6,9 +6,10 @@ import styles from './MrlEditableTextInput.module.scss.js';
 import { useActiveColor } from '../../hooks/useActiveColor.js';
 import { useIsEditable } from '../../hooks/useIsEditable.js';
 import { MrlEditableTextInputRightButton } from './MrlEditableTextInputRightIcon.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlSvg } from '../../../svg/MrlSvg/MrlSvg.js';
 
-var _excluded = ["inputId", "maxLength", "placeholder", "state", "value", "error", "isEditable", "setIsEditable", "showIconOnHover", "inputLabelText"];
+var _excluded = ["inputId", "maxLength", "placeholder", "state", "value", "error", "isEditable", "setIsEditable", "showIconOnHover", "inputLabelText", "eventId"];
 var MrlEditableTextInput = /*#__PURE__*/React.forwardRef(function MrlEditiableTextInput(props, ref) {
   var inputId = props.inputId,
     maxLength = props.maxLength,
@@ -21,11 +22,16 @@ var MrlEditableTextInput = /*#__PURE__*/React.forwardRef(function MrlEditiableTe
     _props$showIconOnHove = props.showIconOnHover,
     showIconOnHover = _props$showIconOnHove === void 0 ? false : _props$showIconOnHove,
     inputLabelText = props.inputLabelText,
+    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 textInputRef = 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('MrlEditableTextInput', eventId);
   var _useActiveColor = useActiveColor(state),
     hasActiveColor = _useActiveColor.hasActiveColor,
     setHasActiveColor = _useActiveColor.setHasActiveColor;
@@ -41,9 +47,12 @@ var MrlEditableTextInput = /*#__PURE__*/React.forwardRef(function MrlEditiableTe
     setIsEditing = _useIsEditable.setIsEditing;
   React.useImperativeHandle(ref, () => iconRef.current);
   var unlockInput = React.useCallback(() => {
+    trackInteraction({
+      action: 'edit'
+    });
     setIsEditable(true);
     setIsEditing(true);
-  }, [setIsEditable, setIsEditing]);
+  }, [setIsEditable, setIsEditing, trackInteraction]);
   var lockInput = React.useCallback(() => {
     setIsEditable(false);
     setIsEditing(false);
@@ -78,12 +87,20 @@ var MrlEditableTextInput = /*#__PURE__*/React.forwardRef(function MrlEditiableTe
   var handleOnBlur = React.useCallback(e => {
     setHasActiveColor(false);
     lockInput();
+
+    // 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, lockInput]);
+  }, [attrs, setHasActiveColor, lockInput, trackInteraction]);
   var handleOnFocus = React.useCallback(e => {
     setHasActiveColor(true);
+    valueOnFocusRef.current = e.target.value;
     if (typeof attrs.onFocus === 'function') {
       attrs.onFocus(e);
     }

package/dist/esm/components/form/text-input/MrlEditableTextInput/MrlEditableTextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlEditableTextInput.js","sources":["../../../../../../src/components/form/text-input/MrlEditableTextInput/MrlEditableTextInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { InputStates, MrlFormInputError } from '../../constants';\nimport { edit, error as errorIcon } from '@muraldevkit/ds-icons';\nimport styles from './MrlEditableTextInput.module.scss';\nimport './MrlEditableTextInput.global.scss';\nimport { useActiveColor } from '../../hooks/useActiveColor';\nimport { useIsEditable } from '../../hooks/useIsEditable';\nimport { MrlEditableTextInputRightButton } from './MrlEditableTextInputRightIcon';\nimport { MrlSvg } from '../../..';\n\ninterface MrlEditableTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n\t/** Id of the text input */\n\tinputId: 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/** The value of the text input 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/** Text placeholder for the text input */\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\terror?: MrlFormInputError;\n\t'data-qa': string;\n\t/* Expost isEditable and setIsEditable as optionally controlled state */\n\tisEditable?: boolean;\n\tsetIsEditable?: (isEditableUpdate: boolean) => void;\n\n\t/**\n\t * Show icon on hover, if true the icon will be hidden and show on hover and focus\n\t * @default false\n\t */\n\tshowIconOnHover?: boolean;\n}\n\nexport const MrlEditableTextInput = React.forwardRef<HTMLButtonElement, MrlEditableTextInputProps>(\n\tfunction MrlEditiableTextInput(\n\t\tprops: MrlEditableTextInputProps,\n\t\tref: React.Ref<HTMLButtonElement>\n\t): JSX.Element {\n\t\tconst {\n\t\t\tinputId,\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\tshowIconOnHover = false,\n\t\t\tinputLabelText,\n\t\t\t...attrs\n\t\t} = props;\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 textInputRef = React.useRef<HTMLInputElement>(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\n\t\tReact.useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n\t\t\tref,\n\t\t\t() => iconRef.current\n\t\t);\n\n\t\tconst unlockInput = React.useCallback(() => {\n\t\t\tsetIsEditable(true);\n\t\t\tsetIsEditing(true);\n\t\t}, [setIsEditable, setIsEditing]);\n\n\t\tconst lockInput = React.useCallback(() => {\n\t\t\tsetIsEditable(false);\n\t\t\tsetIsEditing(false);\n\t\t}, [setIsEditable, setIsEditing]);\n\t\tconst handleOnClick = (e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\tif (!isEditable && !isEditing) {\n\t\t\t\tunlockInput();\n\t\t\t}\n\n\t\t\t/*\n\t\t\t * Only to be executed if onClick is provided as a prop\n\t\t\t */\n\t\t\tif (typeof attrs.onClick === 'function') {\n\t\t\t\tattrs.onClick(e);\n\t\t\t}\n\t\t};\n\n\t\tconst handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\tconst { key } = event;\n\n\t\t\t// Selects the item on enter or spacebar and closes the select\n\t\t\tif (key === 'Escape') {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tlockInput();\n\t\t\t\ticonRef.current?.focus();\n\t\t\t}\n\n\t\t\tif (typeof attrs.onKeyDown === 'function') {\n\t\t\t\tattrs.onKeyDown(event);\n\t\t\t}\n\t\t};\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tlockInput();\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, lockInput]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(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]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\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<HTMLInputElement>) => {\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\tReact.useEffect(() => {\n\t\t\tif (iconRef.current) {\n\t\t\t\tif (attrs.autoFocus) {\n\t\t\t\t\ticonRef.current.focus();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// it should only run on the first render\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, []);\n\n\t\tReact.useEffect(() => {\n\t\t\t// when editiable changes focus to current thingy\n\t\t\tif (isEditable && textInputRef.current) {\n\t\t\t\ttextInputRef.current.focus();\n\t\t\t}\n\t\t}, [isEditable, isEditing]);\n\n\t\tconst inputClasses = classnames(\n\t\t\t'MrlEditableTextInput',\n\t\t\tstyles['MrlEditableTextInput'],\n\t\t\tstyles['mrl-textInput'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextInput-errorMessage']]: state === 'error',\n\t\t\t\t[styles['MrlEditableTextInput-errorIcon']]: state === 'error',\n\t\t\t\t[styles['MrlEditableTextInput--dynamicIcon']]: state !== 'read-only',\n\t\t\t\t[styles['MrlEditableTextInput--readOnly']]: state === 'read-only',\n\t\t\t\t[styles['MrlEditableTextInput--active']]: hasActiveColor,\n\t\t\t\t// if an onClick property is provided, we need to apply the class that allows pointer events\n\t\t\t\t[styles['MrlEditableTextInput--allowOnClick']]: typeof attrs.onClick === 'function'\n\t\t\t},\n\t\t\tattrs.className\n\t\t);\n\n\t\tconst hasCounter = typeof maxLength !== 'undefined' && Number(maxLength) > 0;\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\t// do not pass class info to child elements/components\n\t\tdelete attrs.className;\n\n\t\tconst iconClasses = classnames(\n\t\t\t'MrlEditableTextInput-right-button',\n\t\t\tstyles['MrlEditableTextInput-right-button'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextInput-hover-button']]: showIconOnHover\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlEditableTextInput--wrapper'],\n\t\t\t\t\t\t'MrlEditableTextInput--wrapper'\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t{...attrs}\n\t\t\t\t\t\tonClick={handleOnClick}\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\tclassName={inputClasses}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\tmaxLength={hasCounter ? maxLength : 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={handleKeyDown}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadOnly={state === 'read-only' || !isEditable}\n\t\t\t\t\t\ttabIndex={!isEditable ? -1 : 0}\n\t\t\t\t\t\tref={textInputRef}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t/>\n\t\t\t\t\t{state !== 'read-only' && state !== 'disabled' && (\n\t\t\t\t\t\t<span className={iconClasses}>\n\t\t\t\t\t\t\t<MrlEditableTextInputRightButton\n\t\t\t\t\t\t\t\taction={unlockInput}\n\t\t\t\t\t\t\t\ticon={edit}\n\t\t\t\t\t\t\t\tlabel={`Edit: ${inputLabelText || inputId}`}\n\t\t\t\t\t\t\t\tdataQa={attrs['data-qa'] && `${attrs['data-qa']}-edit`}\n\t\t\t\t\t\t\t\thasActiveColor={hasActiveColor || isEditable}\n\t\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\t\tref={iconRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCounter && (\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' }} 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{hasErrorMessage && (\n\t\t\t\t\t<span className={styles['MrlEditableTextInput-errorMessage']}>\n\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\tclassName={styles['MrlEditableTextInput-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":["MrlEditableTextInput","React","forwardRef","MrlEditiableTextInput","props","ref","inputId","maxLength","placeholder","state","value","error","controlledIsEditable","isEditable","controlledIsEditableUpdate","setIsEditable","_props$showIconOnHove","showIconOnHover","inputLabelText","attrs","_objectWithoutProperties","_excluded","describedById","concat","textInputRef","useRef","iconRef","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","_useIsEditable","useIsEditable","changeHandler","initialValue","isEditing","setIsEditing","useImperativeHandle","current","unlockInput","useCallback","lockInput","handleOnClick","e","onClick","handleKeyDown","event","key","_iconRef$current","stopPropagation","preventDefault","focus","onKeyDown","handleOnBlur","onBlur","handleOnFocus","onFocus","handleOnMouseEnter","onMouseEnter","handleOnMouseLeave","onMouseLeave","useEffect","autoFocus","inputClasses","classnames","styles","className","hasCounter","Number","isNaN","Error","hasErrorMessage","message","iconClasses","createElement","Fragment","_extends","type","undefined","disabled","id","readOnly","tabIndex","MrlEditableTextInputRightButton","action","icon","edit","label","dataQa","length","style","display","MrlSvg","svg","errorIcon","size"],"mappings":"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"}
+{"version":3,"file":"MrlEditableTextInput.js","sources":["../../../../../../src/components/form/text-input/MrlEditableTextInput/MrlEditableTextInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { InputStates, MrlFormInputError } from '../../constants';\nimport { edit, error as errorIcon } from '@muraldevkit/ds-icons';\nimport styles from './MrlEditableTextInput.module.scss';\nimport './MrlEditableTextInput.global.scss';\nimport { useActiveColor } from '../../hooks/useActiveColor';\nimport { useIsEditable } from '../../hooks/useIsEditable';\nimport { MrlEditableTextInputRightButton } from './MrlEditableTextInputRightIcon';\nimport { MrlSvg } from '../../..';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\ninterface MrlEditableTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n\t/** Id of the text input */\n\tinputId: 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/** The value of the text input 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/** Text placeholder for the text input */\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\terror?: MrlFormInputError;\n\t'data-qa': string;\n\t/* Expost isEditable and setIsEditable as optionally controlled state */\n\tisEditable?: boolean;\n\tsetIsEditable?: (isEditableUpdate: boolean) => void;\n\n\t/**\n\t * Show icon on hover, if true the icon will be hidden and show on hover and focus\n\t * @default false\n\t */\n\tshowIconOnHover?: boolean;\n\n\t/**\n\t * Enables interaction tracking for this input. Provide a stable, non-PII id\n\t * (e.g. 'mural-title'). When omitted, the input emits no analytics.\n\t *\n\t * Note: the input'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\nexport const MrlEditableTextInput = React.forwardRef<HTMLButtonElement, MrlEditableTextInputProps>(\n\tfunction MrlEditiableTextInput(\n\t\tprops: MrlEditableTextInputProps,\n\t\tref: React.Ref<HTMLButtonElement>\n\t): JSX.Element {\n\t\tconst {\n\t\t\tinputId,\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\tshowIconOnHover = false,\n\t\t\tinputLabelText,\n\t\t\teventId,\n\t\t\t...attrs\n\t\t} = props;\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 textInputRef = React.useRef<HTMLInputElement>(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('MrlEditableTextInput', 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\n\t\tReact.useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n\t\t\tref,\n\t\t\t() => iconRef.current\n\t\t);\n\n\t\tconst unlockInput = React.useCallback(() => {\n\t\t\ttrackInteraction({ action: 'edit' });\n\n\t\t\tsetIsEditable(true);\n\t\t\tsetIsEditing(true);\n\t\t}, [setIsEditable, setIsEditing, trackInteraction]);\n\n\t\tconst lockInput = React.useCallback(() => {\n\t\t\tsetIsEditable(false);\n\t\t\tsetIsEditing(false);\n\t\t}, [setIsEditable, setIsEditing]);\n\t\tconst handleOnClick = (e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\tif (!isEditable && !isEditing) {\n\t\t\t\tunlockInput();\n\t\t\t}\n\n\t\t\t/*\n\t\t\t * Only to be executed if onClick is provided as a prop\n\t\t\t */\n\t\t\tif (typeof attrs.onClick === 'function') {\n\t\t\t\tattrs.onClick(e);\n\t\t\t}\n\t\t};\n\n\t\tconst handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\tconst { key } = event;\n\n\t\t\t// Selects the item on enter or spacebar and closes the select\n\t\t\tif (key === 'Escape') {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tlockInput();\n\t\t\t\ticonRef.current?.focus();\n\t\t\t}\n\n\t\t\tif (typeof attrs.onKeyDown === 'function') {\n\t\t\t\tattrs.onKeyDown(event);\n\t\t\t}\n\t\t};\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tlockInput();\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, lockInput, trackInteraction]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(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]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\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<HTMLInputElement>) => {\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\tReact.useEffect(() => {\n\t\t\tif (iconRef.current) {\n\t\t\t\tif (attrs.autoFocus) {\n\t\t\t\t\ticonRef.current.focus();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// it should only run on the first render\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, []);\n\n\t\tReact.useEffect(() => {\n\t\t\t// when editiable changes focus to current thingy\n\t\t\tif (isEditable && textInputRef.current) {\n\t\t\t\ttextInputRef.current.focus();\n\t\t\t}\n\t\t}, [isEditable, isEditing]);\n\n\t\tconst inputClasses = classnames(\n\t\t\t'MrlEditableTextInput',\n\t\t\tstyles['MrlEditableTextInput'],\n\t\t\tstyles['mrl-textInput'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextInput-errorMessage']]: state === 'error',\n\t\t\t\t[styles['MrlEditableTextInput-errorIcon']]: state === 'error',\n\t\t\t\t[styles['MrlEditableTextInput--dynamicIcon']]: state !== 'read-only',\n\t\t\t\t[styles['MrlEditableTextInput--readOnly']]: state === 'read-only',\n\t\t\t\t[styles['MrlEditableTextInput--active']]: hasActiveColor,\n\t\t\t\t// if an onClick property is provided, we need to apply the class that allows pointer events\n\t\t\t\t[styles['MrlEditableTextInput--allowOnClick']]: typeof attrs.onClick === 'function'\n\t\t\t},\n\t\t\tattrs.className\n\t\t);\n\n\t\tconst hasCounter = typeof maxLength !== 'undefined' && Number(maxLength) > 0;\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\t// do not pass class info to child elements/components\n\t\tdelete attrs.className;\n\n\t\tconst iconClasses = classnames(\n\t\t\t'MrlEditableTextInput-right-button',\n\t\t\tstyles['MrlEditableTextInput-right-button'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextInput-hover-button']]: showIconOnHover\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlEditableTextInput--wrapper'],\n\t\t\t\t\t\t'MrlEditableTextInput--wrapper'\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t{...attrs}\n\t\t\t\t\t\tonClick={handleOnClick}\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\tclassName={inputClasses}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\tmaxLength={hasCounter ? maxLength : 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={handleKeyDown}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadOnly={state === 'read-only' || !isEditable}\n\t\t\t\t\t\ttabIndex={!isEditable ? -1 : 0}\n\t\t\t\t\t\tref={textInputRef}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t/>\n\t\t\t\t\t{state !== 'read-only' && state !== 'disabled' && (\n\t\t\t\t\t\t<span className={iconClasses}>\n\t\t\t\t\t\t\t<MrlEditableTextInputRightButton\n\t\t\t\t\t\t\t\taction={unlockInput}\n\t\t\t\t\t\t\t\ticon={edit}\n\t\t\t\t\t\t\t\tlabel={`Edit: ${inputLabelText || inputId}`}\n\t\t\t\t\t\t\t\tdataQa={attrs['data-qa'] && `${attrs['data-qa']}-edit`}\n\t\t\t\t\t\t\t\thasActiveColor={hasActiveColor || isEditable}\n\t\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\t\tref={iconRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCounter && (\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' }} 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{hasErrorMessage && (\n\t\t\t\t\t<span className={styles['MrlEditableTextInput-errorMessage']}>\n\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\tclassName={styles['MrlEditableTextInput-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":["MrlEditableTextInput","React","forwardRef","MrlEditiableTextInput","props","ref","inputId","maxLength","placeholder","state","value","error","controlledIsEditable","isEditable","controlledIsEditableUpdate","setIsEditable","_props$showIconOnHove","showIconOnHover","inputLabelText","eventId","attrs","_objectWithoutProperties","_excluded","describedById","concat","textInputRef","useRef","iconRef","valueOnFocusRef","trackInteraction","useMrlTrackInteraction","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","_useIsEditable","useIsEditable","changeHandler","initialValue","isEditing","setIsEditing","useImperativeHandle","current","unlockInput","useCallback","action","lockInput","handleOnClick","e","onClick","handleKeyDown","event","key","_iconRef$current","stopPropagation","preventDefault","focus","onKeyDown","handleOnBlur","target","onBlur","handleOnFocus","onFocus","handleOnMouseEnter","onMouseEnter","handleOnMouseLeave","onMouseLeave","useEffect","autoFocus","inputClasses","classnames","styles","className","hasCounter","Number","isNaN","Error","hasErrorMessage","message","iconClasses","createElement","Fragment","_extends","type","undefined","disabled","id","readOnly","tabIndex","MrlEditableTextInputRightButton","icon","edit","label","dataQa","length","style","display","MrlSvg","svg","errorIcon","size"],"mappings":"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"}

package/dist/esm/components/form/text-input/MrlTextInput/MrlTextInput.js

@@ -5,10 +5,11 @@ import { MrlTextInputRightIcon } from './MrlTextInputRightIcon.js';
 import { closeAlt } from '@muraldevkit/ds-icons';
 import { useActiveColor } from '../../hooks/useActiveColor.js';
 import styles from './MrlTextInput.module.scss.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { setAttributes } from '../../../../utils/setAttributes/setAttributes.js';
 import { MrlSvg } from '../../../svg/MrlSvg/MrlSvg.js';
 
-var _excluded = ["attrs", "inputId", "isClearable", "dynamicIcon", "hookClear", "maxLength", "persistIcon", "placeholder", "state", "value", "aria-describedby"],
+var _excluded = ["attrs", "inputId", "isClearable", "dynamicIcon", "hookClear", "maxLength", "persistIcon", "placeholder", "state", "eventId", "value", "aria-describedby"],
   _excluded2 = ["aria-describedby"];
 /**
  * @todo - we need to add static icon support for right
@@ -31,15 +32,23 @@ var MrlTextInput = /*#__PURE__*/React.forwardRef(function MrlTextInput(_ref, ref
     persistIcon = _ref.persistIcon,
     placeholder = _ref.placeholder,
     state = _ref.state,
+    eventId = _ref.eventId,
     value = _ref.value,
     ariaDescribedByProp = _ref['aria-describedby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var textInputRef = 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('MrlTextInput', eventId);
   var _useActiveColor = useActiveColor(state),
     hasActiveColor = _useActiveColor.hasActiveColor,
     setHasActiveColor = _useActiveColor.setHasActiveColor;
   React.useImperativeHandle(ref, () => textInputRef.current);
   var clearInput = React.useCallback(() => {
+    trackInteraction({
+      action: 'clear'
+    });
     if (textInputRef.current) {
       textInputRef.current.value = '';
       textInputRef.current.focus();
@@ -47,7 +56,7 @@ var MrlTextInput = /*#__PURE__*/React.forwardRef(function MrlTextInput(_ref, ref
     if (hookClear && typeof hookClear === 'function') {
       hookClear();
     }
-  }, [hookClear]);
+  }, [hookClear, trackInteraction]);
   var hasValue = () => {
     var _textInputRef$current;
     return ((_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.value) !== '' || value !== '';
@@ -58,15 +67,23 @@ var MrlTextInput = /*#__PURE__*/React.forwardRef(function MrlTextInput(_ref, ref
   var ariaDescribedBy = ariaDescribedByProp || ariaDescribedByAttrs;
   var handleOnBlur = React.useCallback(e => {
     setHasActiveColor(false);
+
+    // the value itself is never emitted — only the fact that it changed.
+    if (e.target.value !== valueOnFocusRef.current) {
+      trackInteraction({
+        action: 'change'
+      });
+    }
     if (typeof rest.onBlur === 'function') {
       rest.onBlur(e);
     }
     if (typeof attributes.onBlur === 'function') {
       attributes.onBlur(e);
     }
-  }, [attributes, rest, setHasActiveColor]);
+  }, [attributes, rest, setHasActiveColor, trackInteraction]);
   var handleOnFocus = React.useCallback(e => {
     setHasActiveColor(true);
+    valueOnFocusRef.current = e.target.value;
     if (typeof rest.onFocus === 'function') {
       rest.onFocus(e);
     }

package/dist/esm/components/form/text-input/MrlTextInput/MrlTextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlTextInput.js","sources":["../../../../../../src/components/form/text-input/MrlTextInput/MrlTextInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { DSIconType, MrlSvg } from '../../../';\nimport { MrlTextInputRightIcon } from './MrlTextInputRightIcon';\nimport { AttrsObject, setAttributes, MrlComponentProps } from '../../../../utils';\nimport { closeAlt } from '@muraldevkit/ds-icons';\nimport { RightActionConfig, InputStates } from '../../constants';\nimport { useActiveColor } from '../../hooks/useActiveColor';\n\nimport styles from './MrlTextInput.module.scss';\n/**\n * @todo - we need to add static icon support for right\n */\n\ninterface MrlTextInputProps\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tReact.ComponentProps<'input'> {\n\t/** Applies additional HTML attributes to the text input element */\n\tattrs?: AttrsObject;\n\t/** Additional function to be run when the input's value is cleared */\n\thookClear?: () => void;\n\t/** Id of the text input */\n\tinputId: string;\n\t/** The value of the text input 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 *\n\t * If undefined or set to \"0\", removes the character counter from the input\n\t */\n\tmaxLength?: number;\n\t/** Text placeholder for the text input */\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/** Configures a static icon to persistently display on the left side of the input */\n\tpersistIcon?: DSIconType;\n\t/** Configures an icon to the right side of the input */\n\tdynamicIcon?: RightActionConfig;\n\t/** Preset for setting up a clearable input via a right icon */\n\tisClearable?: boolean;\n}\n\n/**\n * Allows the user to input plain text\n * @param {MrlTextInputProps} props - the component props\n * @param {HTMLInputElement} ref - a ref to the input element in the DOM\n * @returns a text input element\n */\nexport const MrlTextInput = React.forwardRef<HTMLInputElement, MrlTextInputProps>(\n\tfunction MrlTextInput(\n\t\t{\n\t\t\tattrs = {},\n\t\t\tinputId,\n\t\t\tisClearable,\n\t\t\tdynamicIcon,\n\t\t\thookClear,\n\t\t\tmaxLength,\n\t\t\tpersistIcon,\n\t\t\tplaceholder,\n\t\t\tstate,\n\t\t\tvalue,\n\t\t\t'aria-describedby': ariaDescribedByProp,\n\t\t\t...rest\n\t\t},\n\t\tref\n\t): JSX.Element {\n\t\tconst textInputRef = React.useRef<HTMLInputElement>(null);\n\n\t\tconst { hasActiveColor, setHasActiveColor } = useActiveColor(state);\n\n\t\tReact.useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n\t\t\tref,\n\t\t\t() => textInputRef.current\n\t\t);\n\n\t\tconst clearInput = React.useCallback(() => {\n\t\t\tif (textInputRef.current) {\n\t\t\t\ttextInputRef.current.value = '';\n\t\t\t\ttextInputRef.current.focus();\n\t\t\t}\n\n\t\t\tif (hookClear && typeof hookClear === 'function') {\n\t\t\t\thookClear();\n\t\t\t}\n\t\t}, [hookClear]);\n\n\t\tconst hasValue = () => {\n\t\t\treturn textInputRef.current?.value !== '' || value !== '';\n\t\t};\n\n\t\tconst initialAttributes = setAttributes(attrs);\n\n\t\tconst { 'aria-describedby': ariaDescribedByAttrs, ...attributes } = initialAttributes;\n\t\tconst ariaDescribedBy = ariaDescribedByProp || ariaDescribedByAttrs;\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tif (typeof rest.onBlur === 'function') {\n\t\t\t\t\trest.onBlur(e);\n\t\t\t\t}\n\n\t\t\t\tif (typeof attributes.onBlur === 'function') {\n\t\t\t\t\tattributes.onBlur(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attributes, rest, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tif (typeof rest.onFocus === 'function') {\n\t\t\t\t\trest.onFocus(e);\n\t\t\t\t}\n\n\t\t\t\tif (typeof attributes.onFocus === 'function') {\n\t\t\t\t\tattributes.onFocus(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attributes, rest, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tif (typeof rest.onMouseEnter === 'function') {\n\t\t\t\t\trest.onMouseEnter(e);\n\t\t\t\t}\n\n\t\t\t\tif (typeof attributes.onMouseEnter === 'function') {\n\t\t\t\t\tattributes.onMouseEnter(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attributes, rest, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseLeave = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tif (typeof rest.onMouseLeave === 'function') {\n\t\t\t\t\trest.onMouseLeave(e);\n\t\t\t\t}\n\t\t\t\tif (typeof attributes.onMouseLeave === 'function') {\n\t\t\t\t\tattributes.onMouseLeave(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attributes, rest, setHasActiveColor]\n\t\t);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (textInputRef.current) {\n\t\t\t\tif (attributes.autofocus) {\n\t\t\t\t\ttextInputRef.current.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\t// it should only run on the first render\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, []);\n\n\t\tconst stateAllowsClearing = state !== 'disabled' && state !== 'read-only';\n\n\t\tconst inputClasses = classnames(\n\t\t\t'MrlTextInput',\n\t\t\tstyles['MrlTextInput'],\n\t\t\tstyles['mrl-textInput'],\n\t\t\t{\n\t\t\t\t[styles['MrlTextInput--dynamicIcon']]: isClearable && stateAllowsClearing,\n\t\t\t\t[styles['MrlTextInput--persistIcon']]: persistIcon !== undefined,\n\t\t\t\t[styles['MrlTextInput--active']]: hasActiveColor\n\t\t\t},\n\t\t\tattributes.class,\n\t\t\tattributes.className\n\t\t);\n\n\t\tconst hasDynamicIcon =\n\t\t\tstateAllowsClearing && !isClearable && typeof dynamicIcon !== 'undefined';\n\n\t\tconst dataMaxLength = attrs['data-maxlength'];\n\n\t\tconst hasMaxLength = typeof maxLength !== 'undefined' && Number(maxLength) > 0;\n\t\tconst hasDataMaxLength = typeof dataMaxLength !== 'undefined' && Number(dataMaxLength) > 0;\n\n\t\tif (hasMaxLength && isNaN(Number(maxLength))) {\n\t\t\tthrow new Error('maxLength should have type number');\n\t\t}\n\t\tif (hasDataMaxLength && isNaN(Number(dataMaxLength))) {\n\t\t\tthrow new Error('data-maxlength should have type number');\n\t\t}\n\n\t\tif (hasMaxLength && hasDataMaxLength) {\n\t\t\tthrow new Error('maxLength and data-maxlength should not be used at the same time');\n\t\t}\n\n\t\tconst displayCounter = hasMaxLength || hasDataMaxLength;\n\t\tconst counterDisplayValue = hasDataMaxLength ? dataMaxLength : maxLength;\n\t\tconst valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;\n\n\t\t// @todo - 2563 - move to setAttributes\n\t\tdelete attributes.class;\n\t\tdelete attributes.className;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className={styles['mrl-u-focus-wrapper']}>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\t{...attributes}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\tmaxLength={hasMaxLength ? maxLength : 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\tid={inputId}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadOnly={state === 'read-only'}\n\t\t\t\t\t\tref={textInputRef}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t/>\n\t\t\t\t\t<span className={styles['mrl-u-focus-indicator']}></span>\n\t\t\t\t\t{persistIcon && (\n\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tclassName={classnames(styles['MrlTextInput-persistIcon'], {\n\t\t\t\t\t\t\t\t[styles['MrlTextInput-persistIcon--active']]: hasActiveColor,\n\t\t\t\t\t\t\t\t[styles['MrlTextInput-persistIcon--disabled']]: state === 'disabled'\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tsvg={persistIcon}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonMouseEnter={() => setHasActiveColor(true)}\n\t\t\t\t\t\t\tonMouseLeave={() => setHasActiveColor(false)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{/* the clear icon should not be displayed when the input is disabled */}\n\t\t\t\t\t{stateAllowsClearing && hasValue() && isClearable && (\n\t\t\t\t\t\t<MrlTextInputRightIcon\n\t\t\t\t\t\t\taction={clearInput}\n\t\t\t\t\t\t\ticon={closeAlt}\n\t\t\t\t\t\t\tlabel=\"Clear input\"\n\t\t\t\t\t\t\tdataQa={attributes['data-qa'] && `${attributes['data-qa']}-clear`}\n\t\t\t\t\t\t\thasActiveColor={hasActiveColor}\n\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{hasDynamicIcon && (\n\t\t\t\t\t\t<MrlTextInputRightIcon\n\t\t\t\t\t\t\thasActiveColor={hasActiveColor}\n\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t{...dynamicIcon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{displayCounter && (\n\t\t\t\t\t<span className={classnames(styles['MrlForm-counter'], 'MrlForm-counter')}>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={classnames('MrlCounter', {\n\t\t\t\t\t\t\t\t'MrlCounter-overMaxLength': valueExceedsDataMaxLength\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tid={`${inputId}-visible-counter`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{value?.length || 0}/{counterDisplayValue}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p style={{ display: 'none' }} id={`${inputId}-counter`}>\n\t\t\t\t\t\t\t{`${\n\t\t\t\t\t\t\t\tcounterDisplayValue - (value?.length || 0)\n\t\t\t\t\t\t\t} of ${counterDisplayValue} 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</>\n\t\t);\n\t}\n);\n"],"names":["MrlTextInput","React","forwardRef","_ref","ref","_ref$attrs","attrs","inputId","isClearable","dynamicIcon","hookClear","maxLength","persistIcon","placeholder","state","value","ariaDescribedByProp","rest","_objectWithoutProperties","_excluded","textInputRef","useRef","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","useImperativeHandle","current","clearInput","useCallback","focus","hasValue","_textInputRef$current","initialAttributes","setAttributes","ariaDescribedByAttrs","attributes","_excluded2","ariaDescribedBy","handleOnBlur","e","onBlur","handleOnFocus","onFocus","handleOnMouseEnter","onMouseEnter","handleOnMouseLeave","onMouseLeave","useEffect","autofocus","stateAllowsClearing","inputClasses","classnames","styles","undefined","class","className","hasDynamicIcon","dataMaxLength","hasMaxLength","Number","hasDataMaxLength","isNaN","Error","displayCounter","counterDisplayValue","valueExceedsDataMaxLength","length","createElement","Fragment","_extends","type","disabled","id","readOnly","MrlSvg","svg","size","MrlTextInputRightIcon","action","icon","closeAlt","label","dataQa","concat","style","display"],"mappings":"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"}
+{"version":3,"file":"MrlTextInput.js","sources":["../../../../../../src/components/form/text-input/MrlTextInput/MrlTextInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { DSIconType, MrlSvg } from '../../../';\nimport { MrlTextInputRightIcon } from './MrlTextInputRightIcon';\nimport { AttrsObject, setAttributes, MrlComponentProps } from '../../../../utils';\nimport { closeAlt } from '@muraldevkit/ds-icons';\nimport { RightActionConfig, InputStates } from '../../constants';\nimport { useActiveColor } from '../../hooks/useActiveColor';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlTextInput.module.scss';\n/**\n * @todo - we need to add static icon support for right\n */\n\ninterface MrlTextInputProps\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tReact.ComponentProps<'input'> {\n\t/** Applies additional HTML attributes to the text input element */\n\tattrs?: AttrsObject;\n\t/** Additional function to be run when the input's value is cleared */\n\thookClear?: () => void;\n\t/** Id of the text input */\n\tinputId: string;\n\t/** The value of the text input 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 *\n\t * If undefined or set to \"0\", removes the character counter from the input\n\t */\n\tmaxLength?: number;\n\t/** Text placeholder for the text input */\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/** Configures a static icon to persistently display on the left side of the input */\n\tpersistIcon?: DSIconType;\n\t/** Configures an icon to the right side of the input */\n\tdynamicIcon?: RightActionConfig;\n\t/** Preset for setting up a clearable input via a right icon */\n\tisClearable?: boolean;\n\t/**\n\t * Enables interaction tracking for this input. Provide a stable, non-PII id\n\t * (e.g. 'mural-search'). When omitted, the input emits no analytics.\n\t *\n\t * Note: the input'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\n * @param {MrlTextInputProps} props - the component props\n * @param {HTMLInputElement} ref - a ref to the input element in the DOM\n * @returns a text input element\n */\nexport const MrlTextInput = React.forwardRef<HTMLInputElement, MrlTextInputProps>(\n\tfunction MrlTextInput(\n\t\t{\n\t\t\tattrs = {},\n\t\t\tinputId,\n\t\t\tisClearable,\n\t\t\tdynamicIcon,\n\t\t\thookClear,\n\t\t\tmaxLength,\n\t\t\tpersistIcon,\n\t\t\tplaceholder,\n\t\t\tstate,\n\t\t\teventId,\n\t\t\tvalue,\n\t\t\t'aria-describedby': ariaDescribedByProp,\n\t\t\t...rest\n\t\t},\n\t\tref\n\t): JSX.Element {\n\t\tconst textInputRef = React.useRef<HTMLInputElement>(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('MrlTextInput', eventId);\n\n\t\tconst { hasActiveColor, setHasActiveColor } = useActiveColor(state);\n\n\t\tReact.useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n\t\t\tref,\n\t\t\t() => textInputRef.current\n\t\t);\n\n\t\tconst clearInput = React.useCallback(() => {\n\t\t\ttrackInteraction({ action: 'clear' });\n\n\t\t\tif (textInputRef.current) {\n\t\t\t\ttextInputRef.current.value = '';\n\t\t\t\ttextInputRef.current.focus();\n\t\t\t}\n\n\t\t\tif (hookClear && typeof hookClear === 'function') {\n\t\t\t\thookClear();\n\t\t\t}\n\t\t}, [hookClear, trackInteraction]);\n\n\t\tconst hasValue = () => {\n\t\t\treturn textInputRef.current?.value !== '' || value !== '';\n\t\t};\n\n\t\tconst initialAttributes = setAttributes(attrs);\n\n\t\tconst { 'aria-describedby': ariaDescribedByAttrs, ...attributes } = initialAttributes;\n\t\tconst ariaDescribedBy = ariaDescribedByProp || ariaDescribedByAttrs;\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(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 rest.onBlur === 'function') {\n\t\t\t\t\trest.onBlur(e);\n\t\t\t\t}\n\n\t\t\t\tif (typeof attributes.onBlur === 'function') {\n\t\t\t\t\tattributes.onBlur(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attributes, rest, setHasActiveColor, trackInteraction]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tvalueOnFocusRef.current = e.target.value;\n\n\t\t\t\tif (typeof rest.onFocus === 'function') {\n\t\t\t\t\trest.onFocus(e);\n\t\t\t\t}\n\n\t\t\t\tif (typeof attributes.onFocus === 'function') {\n\t\t\t\t\tattributes.onFocus(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attributes, rest, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tif (typeof rest.onMouseEnter === 'function') {\n\t\t\t\t\trest.onMouseEnter(e);\n\t\t\t\t}\n\n\t\t\t\tif (typeof attributes.onMouseEnter === 'function') {\n\t\t\t\t\tattributes.onMouseEnter(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attributes, rest, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseLeave = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tif (typeof rest.onMouseLeave === 'function') {\n\t\t\t\t\trest.onMouseLeave(e);\n\t\t\t\t}\n\t\t\t\tif (typeof attributes.onMouseLeave === 'function') {\n\t\t\t\t\tattributes.onMouseLeave(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attributes, rest, setHasActiveColor]\n\t\t);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (textInputRef.current) {\n\t\t\t\tif (attributes.autofocus) {\n\t\t\t\t\ttextInputRef.current.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\t// it should only run on the first render\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, []);\n\n\t\tconst stateAllowsClearing = state !== 'disabled' && state !== 'read-only';\n\n\t\tconst inputClasses = classnames(\n\t\t\t'MrlTextInput',\n\t\t\tstyles['MrlTextInput'],\n\t\t\tstyles['mrl-textInput'],\n\t\t\t{\n\t\t\t\t[styles['MrlTextInput--dynamicIcon']]: isClearable && stateAllowsClearing,\n\t\t\t\t[styles['MrlTextInput--persistIcon']]: persistIcon !== undefined,\n\t\t\t\t[styles['MrlTextInput--active']]: hasActiveColor\n\t\t\t},\n\t\t\tattributes.class,\n\t\t\tattributes.className\n\t\t);\n\n\t\tconst hasDynamicIcon =\n\t\t\tstateAllowsClearing && !isClearable && typeof dynamicIcon !== 'undefined';\n\n\t\tconst dataMaxLength = attrs['data-maxlength'];\n\n\t\tconst hasMaxLength = typeof maxLength !== 'undefined' && Number(maxLength) > 0;\n\t\tconst hasDataMaxLength = typeof dataMaxLength !== 'undefined' && Number(dataMaxLength) > 0;\n\n\t\tif (hasMaxLength && isNaN(Number(maxLength))) {\n\t\t\tthrow new Error('maxLength should have type number');\n\t\t}\n\t\tif (hasDataMaxLength && isNaN(Number(dataMaxLength))) {\n\t\t\tthrow new Error('data-maxlength should have type number');\n\t\t}\n\n\t\tif (hasMaxLength && hasDataMaxLength) {\n\t\t\tthrow new Error('maxLength and data-maxlength should not be used at the same time');\n\t\t}\n\n\t\tconst displayCounter = hasMaxLength || hasDataMaxLength;\n\t\tconst counterDisplayValue = hasDataMaxLength ? dataMaxLength : maxLength;\n\t\tconst valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;\n\n\t\t// @todo - 2563 - move to setAttributes\n\t\tdelete attributes.class;\n\t\tdelete attributes.className;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className={styles['mrl-u-focus-wrapper']}>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\t{...attributes}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\tmaxLength={hasMaxLength ? maxLength : 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\tid={inputId}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadOnly={state === 'read-only'}\n\t\t\t\t\t\tref={textInputRef}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t/>\n\t\t\t\t\t<span className={styles['mrl-u-focus-indicator']}></span>\n\t\t\t\t\t{persistIcon && (\n\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tclassName={classnames(styles['MrlTextInput-persistIcon'], {\n\t\t\t\t\t\t\t\t[styles['MrlTextInput-persistIcon--active']]: hasActiveColor,\n\t\t\t\t\t\t\t\t[styles['MrlTextInput-persistIcon--disabled']]: state === 'disabled'\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tsvg={persistIcon}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonMouseEnter={() => setHasActiveColor(true)}\n\t\t\t\t\t\t\tonMouseLeave={() => setHasActiveColor(false)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{/* the clear icon should not be displayed when the input is disabled */}\n\t\t\t\t\t{stateAllowsClearing && hasValue() && isClearable && (\n\t\t\t\t\t\t<MrlTextInputRightIcon\n\t\t\t\t\t\t\taction={clearInput}\n\t\t\t\t\t\t\ticon={closeAlt}\n\t\t\t\t\t\t\tlabel=\"Clear input\"\n\t\t\t\t\t\t\tdataQa={attributes['data-qa'] && `${attributes['data-qa']}-clear`}\n\t\t\t\t\t\t\thasActiveColor={hasActiveColor}\n\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{hasDynamicIcon && (\n\t\t\t\t\t\t<MrlTextInputRightIcon\n\t\t\t\t\t\t\thasActiveColor={hasActiveColor}\n\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t{...dynamicIcon}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{displayCounter && (\n\t\t\t\t\t<span className={classnames(styles['MrlForm-counter'], 'MrlForm-counter')}>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={classnames('MrlCounter', {\n\t\t\t\t\t\t\t\t'MrlCounter-overMaxLength': valueExceedsDataMaxLength\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tid={`${inputId}-visible-counter`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{value?.length || 0}/{counterDisplayValue}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p style={{ display: 'none' }} id={`${inputId}-counter`}>\n\t\t\t\t\t\t\t{`${\n\t\t\t\t\t\t\t\tcounterDisplayValue - (value?.length || 0)\n\t\t\t\t\t\t\t} of ${counterDisplayValue} 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</>\n\t\t);\n\t}\n);\n"],"names":["MrlTextInput","React","forwardRef","_ref","ref","_ref$attrs","attrs","inputId","isClearable","dynamicIcon","hookClear","maxLength","persistIcon","placeholder","state","eventId","value","ariaDescribedByProp","rest","_objectWithoutProperties","_excluded","textInputRef","useRef","valueOnFocusRef","trackInteraction","useMrlTrackInteraction","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","useImperativeHandle","current","clearInput","useCallback","action","focus","hasValue","_textInputRef$current","initialAttributes","setAttributes","ariaDescribedByAttrs","attributes","_excluded2","ariaDescribedBy","handleOnBlur","e","target","onBlur","handleOnFocus","onFocus","handleOnMouseEnter","onMouseEnter","handleOnMouseLeave","onMouseLeave","useEffect","autofocus","stateAllowsClearing","inputClasses","classnames","styles","undefined","class","className","hasDynamicIcon","dataMaxLength","hasMaxLength","Number","hasDataMaxLength","isNaN","Error","displayCounter","counterDisplayValue","valueExceedsDataMaxLength","length","createElement","Fragment","_extends","type","disabled","id","readOnly","MrlSvg","svg","size","MrlTextInputRightIcon","icon","closeAlt","label","dataQa","concat","style","display"],"mappings":"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"}