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

package/dist/cjs/components/form/select/MrlCreatableSelect/MrlCreatableSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlCreatableSelect.js","sources":["../../../../../../src/components/form/select/MrlCreatableSelect/MrlCreatableSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport CreatableSelect, { CreatableProps } from 'react-select/creatable';\nimport { GroupBase } from 'react-select';\nimport { getSelectStyles } from '../styles';\nimport {\n\tMrlSelectDropdownIndicator,\n\tMrlSelectOption,\n\tMrlSelectContainer,\n\tMrlSelectValueContainer,\n\tMrlSelectClearIndicator\n} from '../components';\nimport { SelectKind } from '../types';\nimport { closeMenuOnScroll } from '../utils/closeMenuOnScroll';\n\nexport interface MrlCreatableSelectProps<\n\tOption,\n\tIsMulti extends boolean = false,\n\tGroup extends GroupBase<Option> = GroupBase<Option>\n> extends CreatableProps<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 MrlCreatableSelect 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\tshowClearIndicatorIcon?: boolean;\n}\n\nexport const CREATABLE_SELECT_CLASS_NAME_PREFIX = 'MrlCreatableSelect';\nexport const CREATABLE_SELECT_MENU_LIST_CLASS_NAME = `${CREATABLE_SELECT_CLASS_NAME_PREFIX}__menu-list`;\n\n/**\n * MrlCreatableSelect component that supports creating extra options with user input. Option creating could be async too.\n * @param props - the component props\n * @returns the select component\n */\nexport function MrlCreatableSelect<T>(props: MrlCreatableSelectProps<T>): JSX.Element {\n\tconst { hasError, isReadOnly, kind = 'default', ...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\tClearIndicator: MrlSelectClearIndicator<T>,\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<CreatableSelect\n\t\t\tclassNamePrefix={CREATABLE_SELECT_CLASS_NAME_PREFIX}\n\t\t\tcloseMenuOnScroll={closeMenuOnScroll(CREATABLE_SELECT_MENU_LIST_CLASS_NAME)}\n\t\t\tformatCreateLabel={() => `Press enter to add new option`}\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\tisMulti={false}\n\t\t/>\n\t);\n}\n"],"names":["CREATABLE_SELECT_CLASS_NAME_PREFIX","CREATABLE_SELECT_MENU_LIST_CLASS_NAME","concat","MrlCreatableSelect","props","hasError","isReadOnly","_props$kind","kind","rest","_objectWithoutProperties","_excluded","defaultStyles","React","useMemo","getSelectStyles","customComponents","defaults","ClearIndicator","MrlSelectClearIndicator","DropdownIndicator","MrlSelectDropdownIndicator","Option","MrlSelectOption","SelectContainer","MrlSelectContainer","ValueContainer","MrlSelectValueContainer","components","Object","assign","createElement","CreatableSelect","_extends","classNamePrefix","closeMenuOnScroll","formatCreateLabel","styles","_objectSpread","menuIsOpen","backspaceRemovesValue","isMulti"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,IAAMA,kCAAkC,GAAG;IACrCC,qCAAqC,GAAA,EAAA,CAAAC,MAAA,CAAMF,kCAAkC,EAAA,aAAA;;AAE1F;AACA;AACA;AACA;AACA;AACO,SAASG,kBAAkBA,CAAIC,KAAiC,EAAe;AACrF,EAAA,IAAQC,QAAQ,GAA4CD,KAAK,CAAzDC,QAAQ;IAAEC,UAAU,GAAgCF,KAAK,CAA/CE,UAAU;IAAAC,WAAA,GAAgCH,KAAK,CAAnCI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,WAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,WAAA;AAAKE,IAAAA,IAAI,GAAAC,iDAAA,CAAKN,KAAK,EAAAO,SAAA,CAAA;AAEjE,EAAA,IAAMC,aAAa,GAAGC,gBAAK,CAACC,OAAO,CAAC,MAAM;IACzC,OAAOC,qBAAe,CAAIP,IAAI,CAAC;AAChC,EAAA,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;AAEV,EAAA,IAAMQ,gBAAgB,GAAGH,gBAAK,CAACC,OAAO,CAAC,MAAM;AAC5C,IAAA,IAAMG,QAAQ,GAAG;AAChBC,MAAAA,cAAc,EAAEC,+CAA0B;AAC1CC,MAAAA,iBAAiB,EAAEC,qDAA6B;AAChDC,MAAAA,MAAM,EAAEC,+BAAkB;AAC1BC,MAAAA,eAAe,EAAEC,qCAAqB;AACtCC,MAAAA,cAAc,EAAEC;KAChB;IAED,IAAIvB,KAAK,CAACwB,UAAU,EAAE;MACrBC,MAAM,CAACC,MAAM,CAACb,QAAQ,EAAEb,KAAK,CAACwB,UAAU,CAAC;AAC1C,IAAA;AAEA,IAAA,OAAOX,QAAQ;AAChB,EAAA,CAAC,EAAE,CAACb,KAAK,CAACwB,UAAU,CAAC,CAAC;AAEtB,EAAA,oBACCf,gBAAA,CAAAkB,aAAA,CAACC,gCAAe,EAAAC,iCAAA,CAAA;AACfC,IAAAA,eAAe,EAAElC,kCAAmC;AACpDmC,IAAAA,iBAAiB,EAAEA,mCAAiB,CAAClC,qCAAqC,CAAE;AAC5EmC,IAAAA,iBAAiB,EAAEA,MAAA;GAAsC,EACrD3B,IAAI,EACJL,KAAK,EAAA;IACTiC,MAAM,EAAAC,uCAAA,CAAAA,uCAAA,CAAA,EAAA,EACF1B,aAAa,CAAA,EACbR,KAAK,CAACiC,MAAM,CACd;AACFT,IAAAA,UAAU,EAAEZ,gBAAiB;AAC7B,IAAA,cAAA,EAAcX,QAAS;AACvB,IAAA,eAAA,EAAeC,UAAW;AAC1BiC,IAAAA,UAAU,EAAEjC,UAAU,GAAG,KAAK,GAAGF,KAAK,CAACmC,UAAW;IAClDC,qBAAqB,EAAE,CAAClC,UAAW;AACnCmC,IAAAA,OAAO,EAAE;AAAM,GAAA,CACf,CAAC;AAEJ;;;;;;"}
+{"version":3,"file":"MrlCreatableSelect.js","sources":["../../../../../../src/components/form/select/MrlCreatableSelect/MrlCreatableSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport CreatableSelect, { CreatableProps } from 'react-select/creatable';\nimport { GroupBase } from 'react-select';\nimport { getSelectStyles } from '../styles';\nimport {\n\tMrlSelectDropdownIndicator,\n\tMrlSelectOption,\n\tMrlSelectContainer,\n\tMrlSelectValueContainer,\n\tMrlSelectClearIndicator\n} from '../components';\nimport { SelectKind } from '../types';\nimport { closeMenuOnScroll } from '../utils/closeMenuOnScroll';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nexport interface MrlCreatableSelectProps<\n\tOption,\n\tIsMulti extends boolean = false,\n\tGroup extends GroupBase<Option> = GroupBase<Option>\n> extends CreatableProps<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 MrlCreatableSelect 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\tshowClearIndicatorIcon?: boolean;\n\t/**\n\t * Enables interaction tracking for this select. Provide a stable, non-PII id\n\t * (e.g. 'template-tag-picker'). When omitted, the select emits no analytics.\n\t *\n\t * Note: option labels, values and created text are never emitted — only the kind of change.\n\t */\n\teventId?: string;\n}\n\nexport const CREATABLE_SELECT_CLASS_NAME_PREFIX = 'MrlCreatableSelect';\nexport const CREATABLE_SELECT_MENU_LIST_CLASS_NAME = `${CREATABLE_SELECT_CLASS_NAME_PREFIX}__menu-list`;\n\n/**\n * MrlCreatableSelect component that supports creating extra options with user input. Option creating could be async too.\n * @param props - the component props\n * @returns the select component\n */\nexport function MrlCreatableSelect<T>(props: MrlCreatableSelectProps<T>): JSX.Element {\n\tconst { hasError, isReadOnly, kind = 'default', ...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('MrlCreatableSelect', 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\tClearIndicator: MrlSelectClearIndicator<T>,\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<CreatableSelect\n\t\t\tclassNamePrefix={CREATABLE_SELECT_CLASS_NAME_PREFIX}\n\t\t\tcloseMenuOnScroll={closeMenuOnScroll(CREATABLE_SELECT_MENU_LIST_CLASS_NAME)}\n\t\t\tformatCreateLabel={() => `Press enter to add new option`}\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\tonCreateOption={(inputValue) => {\n\t\t\t\t// the created text is user input and is never emitted.\n\t\t\t\ttrackInteraction({ action: 'create' });\n\n\t\t\t\tprops.onCreateOption?.(inputValue);\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\tisMulti={false}\n\t\t/>\n\t);\n}\n"],"names":["CREATABLE_SELECT_CLASS_NAME_PREFIX","CREATABLE_SELECT_MENU_LIST_CLASS_NAME","concat","MrlCreatableSelect","props","hasError","isReadOnly","_props$kind","kind","rest","_objectWithoutProperties","_excluded","eventId","selectProps","_excluded2","trackInteraction","useMrlTrackInteraction","defaultStyles","React","useMemo","getSelectStyles","customComponents","defaults","ClearIndicator","MrlSelectClearIndicator","DropdownIndicator","MrlSelectDropdownIndicator","Option","MrlSelectOption","SelectContainer","MrlSelectContainer","ValueContainer","MrlSelectValueContainer","components","Object","assign","createElement","CreatableSelect","_extends","classNamePrefix","closeMenuOnScroll","formatCreateLabel","styles","_objectSpread","onChange","value","actionMeta","_props$onChange","action","metadata","changeType","call","onCreateOption","inputValue","_props$onCreateOption","onMenuOpen","_props$onMenuOpen","onMenuClose","_props$onMenuClose","menuIsOpen","backspaceRemovesValue","isMulti"],"mappings":"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"}

package/dist/cjs/components/form/select/MrlMultiCreatableSelect/MrlMultiCreatableSelect.js

@@ -5,6 +5,7 @@ var React = require('react');
 var CreatableSelect = require('react-select/creatable');
 var index = require('../styles/index.js');
 var closeMenuOnScroll = require('../utils/closeMenuOnScroll.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlSelectValueContainer = require('../components/MrlSelectValueContainer.js');
 var MrlSelectContainer = require('../components/MrlSelectContainer.js');
 var MrlSelectOption = require('../components/MrlSelectOption.js');
@@ -34,7 +35,8 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var CreatableSelect__default = /*#__PURE__*/_interopDefault(CreatableSelect);
 
-var _excluded = ["hasError", "isReadOnly", "kind"];
+var _excluded = ["hasError", "isReadOnly", "kind"],
+  _excluded2 = ["eventId"];
 var MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX = 'MrlMultiCreatableSelect';
 var MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME = "".concat(MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX, "__menu-list");
 
@@ -49,6 +51,11 @@ function MrlMultiCreatableSelect(props) {
     _props$kind = props.kind,
     kind = _props$kind === void 0 ? 'default' : _props$kind,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  // `eventId` is toolkit-only and must never reach react-select
+  var eventId = props.eventId,
+    selectProps = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded2);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlMultiCreatableSelect', eventId);
   var defaultStyles = React__namespace.useMemo(() => {
     return index.getSelectStyles(kind);
   }, [kind]);
@@ -69,9 +76,42 @@ function MrlMultiCreatableSelect(props) {
     classNamePrefix: MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX,
     closeMenuOnScroll: closeMenuOnScroll.closeMenuOnScroll(MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME),
     formatCreateLabel: () => "Press enter to add new option"
-  }, rest, props, {
+  }, rest, selectProps, {
     styles: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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);
+    },
+    onCreateOption: inputValue => {
+      var _props$onCreateOption;
+      // the created text is user input and is never emitted.
+      trackInteraction({
+        action: 'create'
+      });
+      (_props$onCreateOption = props.onCreateOption) === null || _props$onCreateOption === void 0 ? void 0 : _props$onCreateOption.call(props, inputValue);
+    },
+    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/cjs/components/form/select/MrlMultiCreatableSelect/MrlMultiCreatableSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlMultiCreatableSelect.js","sources":["../../../../../../src/components/form/select/MrlMultiCreatableSelect/MrlMultiCreatableSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport CreatableSelect, { CreatableProps } from 'react-select/creatable';\nimport { GroupBase } from 'react-select';\nimport { getSelectStyles } from '../styles';\nimport {\n\tMrlSelectDropdownIndicator,\n\tMrlSelectOption,\n\tMrlSelectContainer,\n\tMrlSelectValueContainer,\n\tMrlSelectClearIndicator\n} from '../components';\nimport { DefaultOption, SelectKind } from '../types';\nimport { closeMenuOnScroll } from '../utils/closeMenuOnScroll';\n\nexport interface MrlMultiCreatableSelectProps<\n\tOption,\n\tIsMulti extends boolean = true,\n\tGroup extends GroupBase<Option> = GroupBase<Option>\n> extends CreatableProps<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 MrlMultiCreatableSelect 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\tshowClearIndicatorIcon?: boolean;\n}\n\nexport const MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX = 'MrlMultiCreatableSelect';\nexport const MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME = `${MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX}__menu-list`;\n\n/**\n * MrlMultiCreatableSelect component that supports creating extra options with user input. Option creating could be async too.\n * @param props - the component props\n * @returns the select component\n */\nexport function MrlMultiCreatableSelect<\n\tT extends DefaultOption,\n\tIsMulti extends boolean = true,\n\tGroup extends GroupBase<T> = GroupBase<T>\n>(props: MrlMultiCreatableSelectProps<T, IsMulti, Group>): JSX.Element {\n\tconst { hasError, isReadOnly, kind = 'default', ...rest } = props;\n\n\tconst defaultStyles = React.useMemo(() => {\n\t\treturn getSelectStyles<T, IsMulti, Group>(kind);\n\t}, [kind]);\n\n\tconst customComponents = React.useMemo(() => {\n\t\tconst defaults = {\n\t\t\tClearIndicator: MrlSelectClearIndicator<T, IsMulti, Group>,\n\t\t\tDropdownIndicator: MrlSelectDropdownIndicator<T, IsMulti, Group>,\n\t\t\tOption: MrlSelectOption<T, IsMulti, Group>,\n\t\t\tSelectContainer: MrlSelectContainer<T, IsMulti, Group>,\n\t\t\tValueContainer: MrlSelectValueContainer<T, IsMulti, Group>\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<CreatableSelect\n\t\t\tclassNamePrefix={MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX}\n\t\t\tcloseMenuOnScroll={closeMenuOnScroll(MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME)}\n\t\t\tformatCreateLabel={() => `Press enter to add new option`}\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\tisMulti={true as IsMulti}\n\t\t/>\n\t);\n}\n"],"names":["MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX","MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME","concat","MrlMultiCreatableSelect","props","hasError","isReadOnly","_props$kind","kind","rest","_objectWithoutProperties","_excluded","defaultStyles","React","useMemo","getSelectStyles","customComponents","defaults","ClearIndicator","MrlSelectClearIndicator","DropdownIndicator","MrlSelectDropdownIndicator","Option","MrlSelectOption","SelectContainer","MrlSelectContainer","ValueContainer","MrlSelectValueContainer","components","Object","assign","createElement","CreatableSelect","_extends","classNamePrefix","closeMenuOnScroll","formatCreateLabel","styles","_objectSpread","menuIsOpen","backspaceRemovesValue","isMulti"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,IAAMA,wCAAwC,GAAG;IAC3CC,2CAA2C,GAAA,EAAA,CAAAC,MAAA,CAAMF,wCAAwC,EAAA,aAAA;;AAEtG;AACA;AACA;AACA;AACA;AACO,SAASG,uBAAuBA,CAIrCC,KAAsD,EAAe;AACtE,EAAA,IAAQC,QAAQ,GAA4CD,KAAK,CAAzDC,QAAQ;IAAEC,UAAU,GAAgCF,KAAK,CAA/CE,UAAU;IAAAC,WAAA,GAAgCH,KAAK,CAAnCI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,WAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,WAAA;AAAKE,IAAAA,IAAI,GAAAC,iDAAA,CAAKN,KAAK,EAAAO,SAAA,CAAA;AAEjE,EAAA,IAAMC,aAAa,GAAGC,gBAAK,CAACC,OAAO,CAAC,MAAM;IACzC,OAAOC,qBAAe,CAAoBP,IAAI,CAAC;AAChD,EAAA,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;AAEV,EAAA,IAAMQ,gBAAgB,GAAGH,gBAAK,CAACC,OAAO,CAAC,MAAM;AAC5C,IAAA,IAAMG,QAAQ,GAAG;AAChBC,MAAAA,cAAc,EAAEC,+CAA0C;AAC1DC,MAAAA,iBAAiB,EAAEC,qDAA6C;AAChEC,MAAAA,MAAM,EAAEC,+BAAkC;AAC1CC,MAAAA,eAAe,EAAEC,qCAAqC;AACtDC,MAAAA,cAAc,EAAEC;KAChB;IAED,IAAIvB,KAAK,CAACwB,UAAU,EAAE;MACrBC,MAAM,CAACC,MAAM,CAACb,QAAQ,EAAEb,KAAK,CAACwB,UAAU,CAAC;AAC1C,IAAA;AAEA,IAAA,OAAOX,QAAQ;AAChB,EAAA,CAAC,EAAE,CAACb,KAAK,CAACwB,UAAU,CAAC,CAAC;AAEtB,EAAA,oBACCf,gBAAA,CAAAkB,aAAA,CAACC,gCAAe,EAAAC,iCAAA,CAAA;AACfC,IAAAA,eAAe,EAAElC,wCAAyC;AAC1DmC,IAAAA,iBAAiB,EAAEA,mCAAiB,CAAClC,2CAA2C,CAAE;AAClFmC,IAAAA,iBAAiB,EAAEA,MAAA;GAAsC,EACrD3B,IAAI,EACJL,KAAK,EAAA;IACTiC,MAAM,EAAAC,uCAAA,CAAAA,uCAAA,CAAA,EAAA,EACF1B,aAAa,CAAA,EACbR,KAAK,CAACiC,MAAM,CACd;AACFT,IAAAA,UAAU,EAAEZ,gBAAiB;AAC7B,IAAA,cAAA,EAAcX,QAAS;AACvB,IAAA,eAAA,EAAeC,UAAW;AAC1BiC,IAAAA,UAAU,EAAEjC,UAAU,GAAG,KAAK,GAAGF,KAAK,CAACmC,UAAW;IAClDC,qBAAqB,EAAE,CAAClC,UAAW;AACnCmC,IAAAA,OAAO,EAAE;AAAgB,GAAA,CACzB,CAAC;AAEJ;;;;;;"}
+{"version":3,"file":"MrlMultiCreatableSelect.js","sources":["../../../../../../src/components/form/select/MrlMultiCreatableSelect/MrlMultiCreatableSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport CreatableSelect, { CreatableProps } from 'react-select/creatable';\nimport { GroupBase } from 'react-select';\nimport { getSelectStyles } from '../styles';\nimport {\n\tMrlSelectDropdownIndicator,\n\tMrlSelectOption,\n\tMrlSelectContainer,\n\tMrlSelectValueContainer,\n\tMrlSelectClearIndicator\n} from '../components';\nimport { DefaultOption, SelectKind } from '../types';\nimport { closeMenuOnScroll } from '../utils/closeMenuOnScroll';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nexport interface MrlMultiCreatableSelectProps<\n\tOption,\n\tIsMulti extends boolean = true,\n\tGroup extends GroupBase<Option> = GroupBase<Option>\n> extends CreatableProps<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 MrlMultiCreatableSelect 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\tshowClearIndicatorIcon?: boolean;\n\t/**\n\t * Enables interaction tracking for this select. Provide a stable, non-PII id\n\t * (e.g. 'mural-tag-picker'). When omitted, the select emits no analytics.\n\t *\n\t * Note: option labels, values and created text are never emitted — only the kind of change.\n\t */\n\teventId?: string;\n}\n\nexport const MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX = 'MrlMultiCreatableSelect';\nexport const MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME = `${MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX}__menu-list`;\n\n/**\n * MrlMultiCreatableSelect component that supports creating extra options with user input. Option creating could be async too.\n * @param props - the component props\n * @returns the select component\n */\nexport function MrlMultiCreatableSelect<\n\tT extends DefaultOption,\n\tIsMulti extends boolean = true,\n\tGroup extends GroupBase<T> = GroupBase<T>\n>(props: MrlMultiCreatableSelectProps<T, IsMulti, Group>): JSX.Element {\n\tconst { hasError, isReadOnly, kind = 'default', ...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('MrlMultiCreatableSelect', eventId);\n\n\tconst defaultStyles = React.useMemo(() => {\n\t\treturn getSelectStyles<T, IsMulti, Group>(kind);\n\t}, [kind]);\n\n\tconst customComponents = React.useMemo(() => {\n\t\tconst defaults = {\n\t\t\tClearIndicator: MrlSelectClearIndicator<T, IsMulti, Group>,\n\t\t\tDropdownIndicator: MrlSelectDropdownIndicator<T, IsMulti, Group>,\n\t\t\tOption: MrlSelectOption<T, IsMulti, Group>,\n\t\t\tSelectContainer: MrlSelectContainer<T, IsMulti, Group>,\n\t\t\tValueContainer: MrlSelectValueContainer<T, IsMulti, Group>\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<CreatableSelect\n\t\t\tclassNamePrefix={MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX}\n\t\t\tcloseMenuOnScroll={closeMenuOnScroll(MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME)}\n\t\t\tformatCreateLabel={() => `Press enter to add new option`}\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\tonCreateOption={(inputValue) => {\n\t\t\t\t// the created text is user input and is never emitted.\n\t\t\t\ttrackInteraction({ action: 'create' });\n\n\t\t\t\tprops.onCreateOption?.(inputValue);\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\tisMulti={true as IsMulti}\n\t\t/>\n\t);\n}\n"],"names":["MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX","MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME","concat","MrlMultiCreatableSelect","props","hasError","isReadOnly","_props$kind","kind","rest","_objectWithoutProperties","_excluded","eventId","selectProps","_excluded2","trackInteraction","useMrlTrackInteraction","defaultStyles","React","useMemo","getSelectStyles","customComponents","defaults","ClearIndicator","MrlSelectClearIndicator","DropdownIndicator","MrlSelectDropdownIndicator","Option","MrlSelectOption","SelectContainer","MrlSelectContainer","ValueContainer","MrlSelectValueContainer","components","Object","assign","createElement","CreatableSelect","_extends","classNamePrefix","closeMenuOnScroll","formatCreateLabel","styles","_objectSpread","onChange","value","actionMeta","_props$onChange","action","metadata","changeType","call","onCreateOption","inputValue","_props$onCreateOption","onMenuOpen","_props$onMenuOpen","onMenuClose","_props$onMenuClose","menuIsOpen","backspaceRemovesValue","isMulti"],"mappings":"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"}

package/dist/cjs/components/form/select/MrlMultiSelect/MrlMultiSelect.js

@@ -5,6 +5,7 @@ var React = require('react');
 var Select = require('react-select');
 var index = require('../styles/index.js');
 var closeMenuOnScroll = require('../utils/closeMenuOnScroll.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlSelectValueContainer = require('../components/MrlSelectValueContainer.js');
 var MrlSelectContainer = require('../components/MrlSelectContainer.js');
 var MrlSelectOption = require('../components/MrlSelectOption.js');
@@ -35,7 +36,8 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
 
-var _excluded = ["hasError", "isReadOnly", "isSearchable", "closeMenuOnSelect", "kind"];
+var _excluded = ["hasError", "isReadOnly", "isSearchable", "closeMenuOnSelect", "kind"],
+  _excluded2 = ["eventId"];
 var MULTI_SELECT_CLASS_NAME_PREFIX = 'MrlMultiSelect';
 var MULTI_SELECT_MENU_LIST_CLASS_NAME = "".concat(MULTI_SELECT_CLASS_NAME_PREFIX, "__menu-list");
 
@@ -54,6 +56,11 @@ function MrlMultiSelect(props) {
     _props$kind = props.kind,
     kind = _props$kind === void 0 ? 'default' : _props$kind,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  // `eventId` is toolkit-only and must never reach react-select
+  var eventId = props.eventId,
+    selectProps = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded2);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlMultiSelect', eventId);
   var defaultStyles = React__namespace.useMemo(() => {
     var styles = index.getSelectStyles(kind);
     return styles;
@@ -75,9 +82,34 @@ function MrlMultiSelect(props) {
   return /*#__PURE__*/React__namespace.createElement(Select__default.default, _rollupPluginBabelHelpers.extends({
     classNamePrefix: MULTI_SELECT_CLASS_NAME_PREFIX,
     closeMenuOnScroll: closeMenuOnScroll.closeMenuOnScroll(MULTI_SELECT_MENU_LIST_CLASS_NAME)
-  }, rest, props, {
+  }, rest, selectProps, {
     styles: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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/cjs/components/form/select/MrlMultiSelect/MrlMultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlMultiSelect.js","sources":["../../../../../../src/components/form/select/MrlMultiSelect/MrlMultiSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport Select, { GroupBase, Props } from 'react-select';\nimport { getSelectStyles } from '../styles';\nimport {\n\tMrlSelectDropdownIndicator,\n\tMrlSelectOption,\n\tMrlSelectMultiValueRemove,\n\tMrlSelectMultiValue,\n\tMrlSelectContainer,\n\tMrlSelectValueContainer\n} from '../components';\nimport { DefaultOption, SelectKind } from '../types';\nimport { closeMenuOnScroll } from '../utils/closeMenuOnScroll';\n\nexport interface MrlMultiSelectProps<\n\tT,\n\tIsMulti extends boolean = false,\n\tGroup extends GroupBase<T> = GroupBase<T>\n> extends Omit<Props<T, IsMulti, Group>, 'isMulti' | 'hideSelectedOptions'> {\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 MrlMultiSelect 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 MULTI_SELECT_CLASS_NAME_PREFIX = 'MrlMultiSelect';\nexport const MULTI_SELECT_MENU_LIST_CLASS_NAME = `${MULTI_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 MrlMultiSelect<\n\tT extends DefaultOption,\n\tIsMulti extends boolean,\n\tGroup extends GroupBase<T> = GroupBase<T>\n>(props: MrlMultiSelectProps<T, IsMulti, Group>): JSX.Element {\n\tconst {\n\t\thasError,\n\t\tisReadOnly,\n\t\tisSearchable = false,\n\t\tcloseMenuOnSelect = false,\n\t\tkind = 'default',\n\t\t...rest\n\t} = props;\n\n\tconst defaultStyles = React.useMemo(() => {\n\t\tconst styles = getSelectStyles<T, IsMulti, Group>(kind);\n\n\t\treturn styles;\n\t}, [kind]);\n\n\tconst customComponents = React.useMemo(() => {\n\t\tconst defaults = {\n\t\t\tDropdownIndicator: MrlSelectDropdownIndicator<T, IsMulti, Group>,\n\t\t\tMultiValue: MrlSelectMultiValue<T, IsMulti, Group>,\n\t\t\tMultiValueRemove: MrlSelectMultiValueRemove<T, IsMulti, Group>,\n\t\t\tOption: MrlSelectOption<T, IsMulti, Group>,\n\t\t\tSelectContainer: MrlSelectContainer<T, IsMulti, Group>,\n\t\t\tValueContainer: MrlSelectValueContainer<T, IsMulti, Group>\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={MULTI_SELECT_CLASS_NAME_PREFIX}\n\t\t\tcloseMenuOnScroll={closeMenuOnScroll(MULTI_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={true as IsMulti}\n\t\t\thideSelectedOptions={true}\n\t\t\tcloseMenuOnSelect={closeMenuOnSelect}\n\t\t/>\n\t);\n}\n"],"names":["MULTI_SELECT_CLASS_NAME_PREFIX","MULTI_SELECT_MENU_LIST_CLASS_NAME","concat","MrlMultiSelect","props","hasError","isReadOnly","_props$isSearchable","isSearchable","_props$closeMenuOnSel","closeMenuOnSelect","_props$kind","kind","rest","_objectWithoutProperties","_excluded","defaultStyles","React","useMemo","styles","getSelectStyles","customComponents","defaults","DropdownIndicator","MrlSelectDropdownIndicator","MultiValue","MrlSelectMultiValue","MultiValueRemove","MrlSelectMultiValueRemove","Option","MrlSelectOption","SelectContainer","MrlSelectContainer","ValueContainer","MrlSelectValueContainer","components","Object","assign","createElement","Select","_extends","classNamePrefix","closeMenuOnScroll","_objectSpread","menuIsOpen","backspaceRemovesValue","isMulti","hideSelectedOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCO,IAAMA,8BAA8B,GAAG;IACjCC,iCAAiC,GAAA,EAAA,CAAAC,MAAA,CAAMF,8BAA8B,EAAA,aAAA;;AAElF;AACA;AACA;AACA;AACA;AACO,SAASG,cAAcA,CAI5BC,KAA6C,EAAe;AAC7D,EAAA,IACCC,QAAQ,GAMLD,KAAK,CANRC,QAAQ;IACRC,UAAU,GAKPF,KAAK,CALRE,UAAU;IAAAC,mBAAA,GAKPH,KAAK,CAJRI,YAAY;AAAZA,IAAAA,YAAY,GAAAD,mBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,mBAAA;IAAAE,qBAAA,GAIjBL,KAAK,CAHRM,iBAAiB;AAAjBA,IAAAA,iBAAiB,GAAAD,qBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,qBAAA;IAAAE,WAAA,GAGtBP,KAAK,CAFRQ,IAAI;AAAJA,IAAAA,IAAI,GAAAD,WAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,WAAA;AACbE,IAAAA,IAAI,GAAAC,iDAAA,CACJV,KAAK,EAAAW,SAAA,CAAA;AAET,EAAA,IAAMC,aAAa,GAAGC,gBAAK,CAACC,OAAO,CAAC,MAAM;AACzC,IAAA,IAAMC,MAAM,GAAGC,qBAAe,CAAoBR,IAAI,CAAC;AAEvD,IAAA,OAAOO,MAAM;AACd,EAAA,CAAC,EAAE,CAACP,IAAI,CAAC,CAAC;AAEV,EAAA,IAAMS,gBAAgB,GAAGJ,gBAAK,CAACC,OAAO,CAAC,MAAM;AAC5C,IAAA,IAAMI,QAAQ,GAAG;AAChBC,MAAAA,iBAAiB,EAAEC,qDAA6C;AAChEC,MAAAA,UAAU,EAAEC,uCAAsC;AAClDC,MAAAA,gBAAgB,EAAEC,mDAA4C;AAC9DC,MAAAA,MAAM,EAAEC,+BAAkC;AAC1CC,MAAAA,eAAe,EAAEC,qCAAqC;AACtDC,MAAAA,cAAc,EAAEC;KAChB;IAED,IAAI9B,KAAK,CAAC+B,UAAU,EAAE;MACrBC,MAAM,CAACC,MAAM,CAACf,QAAQ,EAAElB,KAAK,CAAC+B,UAAU,CAAC;AAC1C,IAAA;AAEA,IAAA,OAAOb,QAAQ;AAChB,EAAA,CAAC,EAAE,CAAClB,KAAK,CAAC+B,UAAU,CAAC,CAAC;AAEtB,EAAA,oBACClB,gBAAA,CAAAqB,aAAA,CAACC,uBAAM,EAAAC,iCAAA,CAAA;AACNC,IAAAA,eAAe,EAAEzC,8BAA+B;IAChD0C,iBAAiB,EAAEA,mCAAiB,CAACzC,iCAAiC;GAAE,EACpEY,IAAI,EACJT,KAAK,EAAA;IACTe,MAAM,EAAAwB,uCAAA,CAAAA,uCAAA,CAAA,EAAA,EACF3B,aAAa,CAAA,EACbZ,KAAK,CAACe,MAAM,CACd;AACFgB,IAAAA,UAAU,EAAEd,gBAAiB;AAC7B,IAAA,cAAA,EAAchB,QAAS;AACvB,IAAA,eAAA,EAAeC,UAAW;AAC1BsC,IAAAA,UAAU,EAAEtC,UAAU,GAAG,KAAK,GAAGF,KAAK,CAACwC,UAAW;IAClDC,qBAAqB,EAAE,CAACvC,UAAW;AACnCE,IAAAA,YAAY,EAAEA,YAAY,IAAI,CAACF,UAAW;AAC1CwC,IAAAA,OAAO,EAAE,IAAgB;AACzBC,IAAAA,mBAAmB,EAAE,IAAK;AAC1BrC,IAAAA,iBAAiB,EAAEA;AAAkB,GAAA,CACrC,CAAC;AAEJ;;;;;;"}
+{"version":3,"file":"MrlMultiSelect.js","sources":["../../../../../../src/components/form/select/MrlMultiSelect/MrlMultiSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport Select, { GroupBase, Props } from 'react-select';\nimport { getSelectStyles } from '../styles';\nimport {\n\tMrlSelectDropdownIndicator,\n\tMrlSelectOption,\n\tMrlSelectMultiValueRemove,\n\tMrlSelectMultiValue,\n\tMrlSelectContainer,\n\tMrlSelectValueContainer\n} from '../components';\nimport { DefaultOption, SelectKind } from '../types';\nimport { closeMenuOnScroll } from '../utils/closeMenuOnScroll';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nexport interface MrlMultiSelectProps<\n\tT,\n\tIsMulti extends boolean = false,\n\tGroup extends GroupBase<T> = GroupBase<T>\n> extends Omit<Props<T, IsMulti, Group>, 'isMulti' | 'hideSelectedOptions'> {\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 MrlMultiSelect 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. 'invite-members-picker'). 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 MULTI_SELECT_CLASS_NAME_PREFIX = 'MrlMultiSelect';\nexport const MULTI_SELECT_MENU_LIST_CLASS_NAME = `${MULTI_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 MrlMultiSelect<\n\tT extends DefaultOption,\n\tIsMulti extends boolean,\n\tGroup extends GroupBase<T> = GroupBase<T>\n>(props: MrlMultiSelectProps<T, IsMulti, Group>): JSX.Element {\n\tconst {\n\t\thasError,\n\t\tisReadOnly,\n\t\tisSearchable = false,\n\t\tcloseMenuOnSelect = false,\n\t\tkind = 'default',\n\t\t...rest\n\t} = props;\n\n\t// `eventId` is toolkit-only and must never reach react-select\n\tconst { eventId, ...selectProps } = props;\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlMultiSelect', eventId);\n\n\tconst defaultStyles = React.useMemo(() => {\n\t\tconst styles = getSelectStyles<T, IsMulti, Group>(kind);\n\n\t\treturn styles;\n\t}, [kind]);\n\n\tconst customComponents = React.useMemo(() => {\n\t\tconst defaults = {\n\t\t\tDropdownIndicator: MrlSelectDropdownIndicator<T, IsMulti, Group>,\n\t\t\tMultiValue: MrlSelectMultiValue<T, IsMulti, Group>,\n\t\t\tMultiValueRemove: MrlSelectMultiValueRemove<T, IsMulti, Group>,\n\t\t\tOption: MrlSelectOption<T, IsMulti, Group>,\n\t\t\tSelectContainer: MrlSelectContainer<T, IsMulti, Group>,\n\t\t\tValueContainer: MrlSelectValueContainer<T, IsMulti, Group>\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={MULTI_SELECT_CLASS_NAME_PREFIX}\n\t\t\tcloseMenuOnScroll={closeMenuOnScroll(MULTI_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={true as IsMulti}\n\t\t\thideSelectedOptions={true}\n\t\t\tcloseMenuOnSelect={closeMenuOnSelect}\n\t\t/>\n\t);\n}\n"],"names":["MULTI_SELECT_CLASS_NAME_PREFIX","MULTI_SELECT_MENU_LIST_CLASS_NAME","concat","MrlMultiSelect","props","hasError","isReadOnly","_props$isSearchable","isSearchable","_props$closeMenuOnSel","closeMenuOnSelect","_props$kind","kind","rest","_objectWithoutProperties","_excluded","eventId","selectProps","_excluded2","trackInteraction","useMrlTrackInteraction","defaultStyles","React","useMemo","styles","getSelectStyles","customComponents","defaults","DropdownIndicator","MrlSelectDropdownIndicator","MultiValue","MrlSelectMultiValue","MultiValueRemove","MrlSelectMultiValueRemove","Option","MrlSelectOption","SelectContainer","MrlSelectContainer","ValueContainer","MrlSelectValueContainer","components","Object","assign","createElement","Select","_extends","classNamePrefix","closeMenuOnScroll","_objectSpread","onChange","value","actionMeta","_props$onChange","action","metadata","changeType","call","onMenuOpen","_props$onMenuOpen","onMenuClose","_props$onMenuClose","menuIsOpen","backspaceRemovesValue","isMulti","hideSelectedOptions"],"mappings":"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"}

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

@@ -5,6 +5,7 @@ var React = require('react');
 var Select = require('react-select');
 var index = require('../styles/index.js');
 var closeMenuOnScroll = require('../utils/closeMenuOnScroll.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlSelectValueContainer = require('../components/MrlSelectValueContainer.js');
 var MrlSelectContainer = require('../components/MrlSelectContainer.js');
 var MrlSelectOption = require('../components/MrlSelectOption.js');
@@ -33,7 +34,8 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
 
-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");
 
@@ -50,6 +52,11 @@ function MrlSelect(props) {
     _props$isSearchable = props.isSearchable,
     isSearchable = _props$isSearchable === void 0 ? false : _props$isSearchable,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  // `eventId` is toolkit-only and must never reach react-select
+  var eventId = props.eventId,
+    selectProps = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded2);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlSelect', eventId);
   var defaultStyles = React__namespace.useMemo(() => {
     return index.getSelectStyles(kind);
   }, [kind]);
@@ -68,9 +75,34 @@ function MrlSelect(props) {
   return /*#__PURE__*/React__namespace.createElement(Select__default.default, _rollupPluginBabelHelpers.extends({
     classNamePrefix: SELECT_CLASS_NAME_PREFIX,
     closeMenuOnScroll: closeMenuOnScroll.closeMenuOnScroll(SELECT_MENU_LIST_CLASS_NAME)
-  }, rest, props, {
+  }, rest, selectProps, {
     styles: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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/cjs/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,iDAAA,CAAKR,KAAK,EAAAS,SAAA,CAAA;AAEvF,EAAA,IAAMC,aAAa,GAAGC,gBAAK,CAACC,OAAO,CAAC,MAAM;IACzC,OAAOC,qBAAe,CAAIT,IAAI,CAAC;AAChC,EAAA,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;AAEV,EAAA,IAAMU,gBAAgB,GAAGH,gBAAK,CAACC,OAAO,CAAC,MAAM;AAC5C,IAAA,IAAMG,QAAQ,GAAG;AAChBC,MAAAA,iBAAiB,EAAEC,qDAA6B;AAChDC,MAAAA,MAAM,EAAEC,+BAAkB;AAC1BC,MAAAA,eAAe,EAAEC,qCAAqB;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,gBAAA,CAAAgB,aAAA,CAACC,uBAAM,EAAAC,iCAAA,CAAA;AACNC,IAAAA,eAAe,EAAElC,wBAAyB;IAC1CmC,iBAAiB,EAAEA,mCAAiB,CAAClC,2BAA2B;GAAE,EAC9DU,IAAI,EACJP,KAAK,EAAA;IACTgC,MAAM,EAAAC,uCAAA,CAAAA,uCAAA,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/cjs/components/form/switch/MrlSwitch/MrlSwitch.js

@@ -5,6 +5,7 @@ var React = require('react');
 var classnames = require('classnames');
 var MrlSwitch_module = require('./MrlSwitch.module.scss.js');
 var setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlSwitchStandalone = require('../MrlSwitchStandalone/MrlSwitchStandalone.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -30,7 +31,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["className", "disabled", "id", "label", "onChange", "selected"];
+var _excluded = ["className", "disabled", "id", "label", "onChange", "selected", "eventId"];
 var MrlSwitch = /*#__PURE__*/React.memo(_ref => {
   var className = _ref.className,
     disabled = _ref.disabled,
@@ -40,8 +41,19 @@ var MrlSwitch = /*#__PURE__*/React.memo(_ref => {
     onChange = _ref.onChange,
     _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? false : _ref$selected,
+    eventId = _ref.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var inputId = React.useMemo(() => id || setAttributes.getUniqueId('mrl-toggle-'), [id]);
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlSwitch', eventId);
+  var handleChange = e => {
+    trackInteraction({
+      action: 'toggle',
+      metadata: {
+        selected: e.target.checked
+      }
+    });
+    onChange(e);
+  };
   var textOnlyLabel = typeof label === 'string';
   var containerClasses = classnames__default.default('MrlSwitch', MrlSwitch_module.default['MrlSwitch'], className, {
     ['mrl-label']: textOnlyLabel,
@@ -54,7 +66,7 @@ var MrlSwitch = /*#__PURE__*/React.memo(_ref => {
   }, label, /*#__PURE__*/React__namespace.createElement(MrlSwitchStandalone.MrlSwitchStandalone, _rollupPluginBabelHelpers.extends({}, rest, {
     disabled: disabled,
     id: inputId,
-    onChange: onChange,
+    onChange: handleChange,
     selected: selected
   })));
 });

package/dist/cjs/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,UAAI,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,iDAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA;AAEP,EAAA,IAAMC,OAAO,GAAGC,aAAO,CAAC,MAAMV,EAAE,IAAIW,yBAAW,CAAC,aAAa,CAAC,EAAE,CAACX,EAAE,CAAC,CAAC;AACrE,EAAA,IAAMY,aAAa,GAAG,OAAOV,KAAK,KAAK,QAAQ;AAC/C,EAAA,IAAMW,gBAAgB,GAAGC,2BAAU,CAAC,WAAW,EAAEC,wBAAM,CAAC,WAAW,CAAC,EAAElB,SAAS,EAAE;IAChF,CAAC,WAAW,GAAGe,aAAa;AAC5B,IAAA,CAACG,wBAAM,CAAC,UAAU,CAAC,GAAGH,aAAa;IACnC,CAAC,oBAAoB,GAAGd,QAAQ;AAChC,IAAA,CAACiB,wBAAM,CAAC,oBAAoB,CAAC,GAAGjB;AACjC,GAAC,CAAC;EAEF,oBACCkB,gBAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AAAOpB,IAAAA,SAAS,EAAEgB;GAAiB,EACjCX,KAAK,eACNc,gBAAA,CAAAC,aAAA,CAACC,uCAAmB,EAAAC,iCAAA,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,UAAI,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,iDAAA,CAAAZ,IAAA,EAAAa,SAAA,CAAA;AAEP,EAAA,IAAMC,OAAO,GAAGC,aAAO,CAAC,MAAMX,EAAE,IAAIY,yBAAW,CAAC,aAAa,CAAC,EAAE,CAACZ,EAAE,CAAC,CAAC;AACrE,EAAA,IAAMa,gBAAgB,GAAGC,sCAAsB,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,2BAAU,CAAC,WAAW,EAAEC,wBAAM,CAAC,WAAW,CAAC,EAAE3B,SAAS,EAAE;IAChF,CAAC,WAAW,GAAGwB,aAAa;AAC5B,IAAA,CAACG,wBAAM,CAAC,UAAU,CAAC,GAAGH,aAAa;IACnC,CAAC,oBAAoB,GAAGvB,QAAQ;AAChC,IAAA,CAAC0B,wBAAM,CAAC,oBAAoB,CAAC,GAAG1B;AACjC,GAAC,CAAC;EAEF,oBACC2B,gBAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AAAO7B,IAAAA,SAAS,EAAEyB;GAAiB,EACjCpB,KAAK,eACNuB,gBAAA,CAAAC,aAAA,CAACC,uCAAmB,EAAAC,iCAAA,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/cjs/components/form/switch/MrlSwitchStandalone/MrlSwitchStandalone.js

@@ -5,6 +5,7 @@ var dsIcons = require('@muraldevkit/ds-icons');
 var React = require('react');
 var classnames = require('classnames');
 var MrlSwitchStandalone_module = require('./MrlSwitchStandalone.module.scss.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlSvg = require('../../../svg/MrlSvg/MrlSvg.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -30,7 +31,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["className", "id", "labelledBy", "onChange", "selected"];
+var _excluded = ["className", "id", "labelledBy", "onChange", "selected", "eventId"];
 var MrlSwitchStandalone = /*#__PURE__*/React.memo(_ref => {
   var className = _ref.className,
     id = _ref.id,
@@ -38,15 +39,23 @@ var MrlSwitchStandalone = /*#__PURE__*/React.memo(_ref => {
     onChange = _ref.onChange,
     _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? false : _ref$selected,
+    eventId = _ref.eventId,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(selected),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isChecked = _useState2[0],
     setIsChecked = _useState2[1];
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlSwitchStandalone', eventId);
   React.useEffect(() => {
     setIsChecked(selected);
   }, [selected]);
   var handleChange = e => {
+    trackInteraction({
+      action: 'toggle',
+      metadata: {
+        selected: e.target.checked
+      }
+    });
     setIsChecked(e.target.checked);
     onChange(e);
   };

package/dist/cjs/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,UAAI,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,iDAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA;AAEP,EAAA,IAAAC,SAAA,GAAkCC,cAAQ,CAACL,QAAQ,CAAC;IAAAM,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA7CI,IAAAA,SAAS,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,YAAY,GAAAH,UAAA,CAAA,CAAA,CAAA;AAE9BI,EAAAA,eAAS,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,2BAAU,CAClCrB,SAAS,EACT,qBAAqB,EACrBsB,kCAAM,CAAC,qBAAqB,CAC7B,CAAC;EAED,oBACCC,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKxB,IAAAA,SAAS,EAAEoB;AAAiB,GAAA,eAChCG,gBAAA,CAAAC,aAAA,CAAA,OAAA,EAAAC,iCAAA,KACKnB,IAAI,EAAA;AACR,IAAA,iBAAA,EAAiBJ,UAAW;AAC5B,IAAA,cAAA,EAAcW,SAAU;IACxBb,SAAS,EAAEqB,2BAAU,CACpB,8BAA8B,EAC9BC,kCAAM,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,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IACCxB,SAAS,EAAEqB,2BAAU,CAAC,4BAA4B,EAAEC,kCAAM,CAAC,4BAA4B,CAAC;AAAE,GAC1F,CAAC,eACFC,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IACCxB,SAAS,EAAEqB,2BAAU,CACpB,sCAAsC,EACtCC,kCAAM,CAAC,sCAAsC,CAC9C;AAAE,GAAA,eAEFC,gBAAA,CAAAC,aAAA,CAACI,aAAM,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAM;AAACC,IAAAA,GAAG,EAAEjB,SAAS,GAAGkB,aAAK,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,UAAI,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,iDAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA;AAEP,EAAA,IAAAC,SAAA,GAAkCC,cAAQ,CAACN,QAAQ,CAAC;IAAAO,UAAA,GAAAC,uCAAA,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,sCAAsB,CAAC,qBAAqB,EAAEX,OAAO,CAAC;AAE/EY,EAAAA,eAAS,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,2BAAU,CAClC1B,SAAS,EACT,qBAAqB,EACrB2B,kCAAM,CAAC,qBAAqB,CAC7B,CAAC;EAED,oBACCC,gBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAK7B,IAAAA,SAAS,EAAEyB;AAAiB,GAAA,eAChCG,gBAAA,CAAAC,aAAA,CAAA,OAAA,EAAAC,iCAAA,KACKvB,IAAI,EAAA;AACR,IAAA,iBAAA,EAAiBL,UAAW;AAC5B,IAAA,cAAA,EAAcY,SAAU;IACxBd,SAAS,EAAE0B,2BAAU,CACpB,8BAA8B,EAC9BC,kCAAM,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,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IACC7B,SAAS,EAAE0B,2BAAU,CAAC,4BAA4B,EAAEC,kCAAM,CAAC,4BAA4B,CAAC;AAAE,GAC1F,CAAC,eACFC,gBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IACC7B,SAAS,EAAE0B,2BAAU,CACpB,sCAAsC,EACtCC,kCAAM,CAAC,sCAAsC,CAC9C;AAAE,GAAA,eAEFC,gBAAA,CAAAC,aAAA,CAACI,aAAM,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAM;AAACC,IAAAA,GAAG,EAAErB,SAAS,GAAGsB,aAAK,GAAGC;GAAQ,CAChD,CACF,CAAC;AAER,CACD;AAEAxC,mBAAmB,CAACyC,WAAW,GAAG,qBAAqB;;;;"}

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

@@ -8,6 +8,7 @@ var MrlEditableTextInput_module = require('./MrlEditableTextInput.module.scss.js
 var useActiveColor = require('../../hooks/useActiveColor.js');
 var useIsEditable = require('../../hooks/useIsEditable.js');
 var MrlEditableTextInputRightIcon = require('./MrlEditableTextInputRightIcon.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlSvg = require('../../../svg/MrlSvg/MrlSvg.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -33,7 +34,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-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__namespace.forwardRef(function MrlEditiableTextInput(props, ref) {
   var inputId = props.inputId,
     maxLength = props.maxLength,
@@ -46,11 +47,16 @@ var MrlEditableTextInput = /*#__PURE__*/React__namespace.forwardRef(function Mrl
     _props$showIconOnHove = props.showIconOnHover,
     showIconOnHover = _props$showIconOnHove === void 0 ? false : _props$showIconOnHove,
     inputLabelText = props.inputLabelText,
+    eventId = props.eventId,
     attrs = _rollupPluginBabelHelpers.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__namespace.useRef(null);
   var iconRef = React__namespace.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__namespace.useRef('');
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlEditableTextInput', eventId);
   var _useActiveColor = useActiveColor.useActiveColor(state),
     hasActiveColor = _useActiveColor.hasActiveColor,
     setHasActiveColor = _useActiveColor.setHasActiveColor;
@@ -66,9 +72,12 @@ var MrlEditableTextInput = /*#__PURE__*/React__namespace.forwardRef(function Mrl
     setIsEditing = _useIsEditable.setIsEditing;
   React__namespace.useImperativeHandle(ref, () => iconRef.current);
   var unlockInput = React__namespace.useCallback(() => {
+    trackInteraction({
+      action: 'edit'
+    });
     setIsEditable(true);
     setIsEditing(true);
-  }, [setIsEditable, setIsEditing]);
+  }, [setIsEditable, setIsEditing, trackInteraction]);
   var lockInput = React__namespace.useCallback(() => {
     setIsEditable(false);
     setIsEditing(false);
@@ -103,12 +112,20 @@ var MrlEditableTextInput = /*#__PURE__*/React__namespace.forwardRef(function Mrl
   var handleOnBlur = React__namespace.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__namespace.useCallback(e => {
     setHasActiveColor(true);
+    valueOnFocusRef.current = e.target.value;
     if (typeof attrs.onFocus === 'function') {
       attrs.onFocus(e);
     }