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

package/dist/esm/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.js

@@ -4,10 +4,11 @@ import classnames from 'classnames';
 import { useSelect } from '../context/SelectContext.js';
 import { check } from '@muraldevkit/ds-icons';
 import styles from './MrlLegacySelectItem.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", "children", "index", "value", "isDisabled"];
+var _excluded = ["attrs", "children", "index", "value", "isDisabled", "eventId"];
 var getChildText = children => {
   var textContent = '';
 
@@ -43,6 +44,7 @@ var MrlLegacySelectItem = _ref => {
     index = _ref.index,
     value = _ref.value,
     isDisabled = _ref.isDisabled,
+    eventId = _ref.eventId,
     theRest = _objectWithoutProperties(_ref, _excluded);
   var focusRef = React.useRef(null);
   var _useSelect = useSelect(),
@@ -50,7 +52,12 @@ var MrlLegacySelectItem = _ref => {
     dispatchState = _useSelect.state;
   var disabled = dispatchState.disabled || isDisabled;
   var childText = getChildText(children);
+  var trackInteraction = useMrlTrackInteraction('MrlLegacySelectItem', eventId);
   var setSelectedItem = () => {
+    // the option's value/text is consumer data and is never emitted.
+    trackInteraction({
+      action: 'select'
+    });
     dispatch({
       payload: value,
       type: 'select'

package/dist/esm/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlLegacySelectItem.js","sources":["../../../../../../src/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { useSelect } from '../context/SelectContext';\nimport { AttrsObject, setAttributes } from '../../../../utils';\nimport { MrlSvg } from '../../../';\nimport { check } from '@muraldevkit/ds-icons';\n\nimport styles from './MrlLegacySelectItem.module.scss';\n\nexport interface MrlLegacySelectItemProptypes extends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * value of the select item that is stored as the selected value of the select input\n\t */\n\tvalue: string;\n\n\t/**\n\t * index of the select item starting at 0\n\t */\n\tindex?: number;\n\n\t/**\n\t * Applies additional HTML attributes to the `mrl-select-item` element after the\n\t * hydration process. It is recommended only to use when overwriting an attribute\n\t * assigned internally by the design system.\n\t * When using in a framework wrapper (e.g., React), treat it as an object and don't stringify.\n\t * Otherwise, the value object needs to be stringified to not receive `\"[Object object]\"`.\n\t * Example: `attrs='{ \"aria-disabled\": \"true\" }'`\n\t */\n\tattrs?: AttrsObject;\n\n\t/**\n\t * Set the item to disabled, this will prevent click and enter events.\n\t */\n\tisDisabled?: boolean;\n\n\t/**\n\t * content for the item\n\t */\n\tchildren: React.ReactNode;\n}\n\nconst getChildText = (children: React.ReactNode) => {\n\tlet textContent = '';\n\n\t// Iterate through the children, in the event someone passes\n\t// multiple HTML and or components into the select item\n\tReact.Children.forEach(children, (child) => {\n\t\t// concatenate any text content we get if they are strings\n\t\tif (typeof child === 'string') {\n\t\t\ttextContent += child;\n\t\t\treturn;\n\t\t}\n\n\t\t// but if the child is an HTML element, we need to handle it a bit differently\n\t\tif (React.isValidElement(child) && typeof child.props.children === 'string') {\n\t\t\ttextContent += child.props.children;\n\t\t}\n\t});\n\n\t// we also want to remove any whitespace from the beginning or end.\n\treturn textContent.trim();\n};\n\n/**\n * Renders a select component\n *\n * @param {MrlLegacySelectItemProptypes} props the props for your MrlLink\n * @returns {React.ReactElement} an a element containing the text you pass\n */\nexport const MrlLegacySelectItem = ({\n\tattrs = {},\n\tchildren,\n\tindex,\n\tvalue,\n\tisDisabled,\n\t...theRest\n}: MrlLegacySelectItemProptypes): React.ReactElement => {\n\tconst focusRef = React.useRef<HTMLDivElement>(null);\n\tconst { dispatch, state: dispatchState } = useSelect();\n\tconst disabled = dispatchState.disabled || isDisabled;\n\tconst childText = getChildText(children);\n\tconst setSelectedItem = () => {\n\t\tdispatch({ payload: value, type: 'select' });\n\t\tdispatch({ payload: children, type: 'selectedText' });\n\t\tdispatch({ payload: index as number, type: 'focus' });\n\t};\n\n\tconst handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n\t\tsetSelectedItem();\n\t\tdispatch({ payload: 'mouse', type: 'close' });\n\t\ttheRest.onClick?.(e);\n\t};\n\n\tconst handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tconst { key } = event;\n\n\t\t// Selects the item on enter or spacebar and closes the select\n\t\tif (key === 'Enter' || key === ' ') {\n\t\t\tevent.stopPropagation();\n\t\t\tevent.preventDefault();\n\n\t\t\tsetSelectedItem();\n\t\t\tdispatch({ payload: 'keyboard', type: 'close' });\n\n\t\t\ttheRest.onKeyDown?.(event);\n\t\t}\n\t};\n\n\t/**\n\t * Sets focus to select item if it's active when the select is opened\n\t */\n\tReact.useEffect(() => {\n\t\tif (index === dispatchState.focusIndex) {\n\t\t\tfocusRef?.current?.focus();\n\t\t}\n\t}, [index, dispatchState, focusRef]);\n\n\t/**\n\t * Sets up default state of selectbox based on the value of the select item\n\t */\n\tReact.useEffect(() => {\n\t\tconst isSelectedValue = dispatchState.selectedItem === value;\n\t\tconst isDefaultValue = dispatchState.defaultValue === value && !dispatchState.selectedItem;\n\t\tconst isFirstItem = !dispatchState.defaultValue && !dispatchState.selectedItem && index === 0;\n\n\t\tif (isSelectedValue || isDefaultValue || isFirstItem) {\n\t\t\tdispatch({ payload: value, type: 'select' });\n\t\t\tdispatch({ payload: children, type: 'selectedText' });\n\n\t\t\t// sets focus to defaultValue when select is opened\n\t\t\tif (index) dispatch({ payload: index, type: 'focus' });\n\t\t}\n\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [dispatchState.defaultValue, dispatchState.selectedText, index]);\n\n\tconst attributes = setAttributes(attrs, {\n\t\t// Note, the ID of this component if not set by the developer, is\n\t\t// programmatically applied by the mrl-select component\n\t\t'aria-disabled': disabled,\n\t\t'aria-label': childText,\n\t\t'aria-selected': dispatchState.selectedItem === value,\n\t\t'auto-focus': 'true',\n\t\t'data-value': value,\n\t\trole: 'option',\n\t\ttabIndex: '-1'\n\t});\n\n\tconst allClasses = classnames(attrs.className, theRest.className, 'mrl-selectItem', {\n\t\t[styles['mrl-is--selected']]: dispatchState.selectedItem === value,\n\t\t[styles['mrl-is--focused']]: dispatchState.focusIndex === index,\n\t\t[styles['mrl-is--hidden']]: !dispatchState.open,\n\t\t[styles['mrl-selectItem']]: true\n\t});\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\t{...attributes}\n\t\t\t{...theRest}\n\t\t\tref={focusRef}\n\t\t\tclassName={allClasses}\n\t\t\t{...(!disabled && { onClick: handleClick })}\n\t\t\t{...(!disabled && { onKeyDown: handleEnter })}\n\t\t>\n\t\t\t{children}\n\t\t\t{dispatchState.selectedItem === value ? (\n\t\t\t\t<MrlSvg\n\t\t\t\t\tsvg={check}\n\t\t\t\t\tclassName={styles['mrl-selectItem-selectedIcon']}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tattrs={{\n\t\t\t\t\t\t'aria-hidden': 'true',\n\t\t\t\t\t\tclass: styles['mrl-selectItem-selectedIcon']\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t''\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["getChildText","children","textContent","React","Children","forEach","child","isValidElement","props","trim","MrlLegacySelectItem","_ref","_ref$attrs","attrs","index","value","isDisabled","theRest","_objectWithoutProperties","_excluded","focusRef","useRef","_useSelect","useSelect","dispatch","dispatchState","state","disabled","childText","setSelectedItem","payload","type","handleClick","e","_theRest$onClick","onClick","call","handleEnter","event","key","_theRest$onKeyDown","stopPropagation","preventDefault","onKeyDown","useEffect","focusIndex","_focusRef$current","current","focus","isSelectedValue","selectedItem","isDefaultValue","defaultValue","isFirstItem","selectedText","attributes","setAttributes","role","tabIndex","allClasses","classnames","className","styles","open","createElement","_extends","ref","MrlSvg","svg","check","size","class"],"mappings":"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"}
+{"version":3,"file":"MrlLegacySelectItem.js","sources":["../../../../../../src/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { useSelect } from '../context/SelectContext';\nimport { AttrsObject, setAttributes } from '../../../../utils';\nimport { MrlSvg } from '../../../';\nimport { check } from '@muraldevkit/ds-icons';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlLegacySelectItem.module.scss';\n\nexport interface MrlLegacySelectItemProptypes extends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * value of the select item that is stored as the selected value of the select input\n\t */\n\tvalue: string;\n\n\t/**\n\t * index of the select item starting at 0\n\t */\n\tindex?: number;\n\n\t/**\n\t * Applies additional HTML attributes to the `mrl-select-item` element after the\n\t * hydration process. It is recommended only to use when overwriting an attribute\n\t * assigned internally by the design system.\n\t * When using in a framework wrapper (e.g., React), treat it as an object and don't stringify.\n\t * Otherwise, the value object needs to be stringified to not receive `\"[Object object]\"`.\n\t * Example: `attrs='{ \"aria-disabled\": \"true\" }'`\n\t */\n\tattrs?: AttrsObject;\n\n\t/**\n\t * Set the item to disabled, this will prevent click and enter events.\n\t */\n\tisDisabled?: boolean;\n\n\t/**\n\t * content for the item\n\t */\n\tchildren: React.ReactNode;\n\n\t/**\n\t * Enables interaction tracking for this option. Provide a stable, non-PII id\n\t * (e.g. 'workspace-role-option'). When omitted, the option emits no analytics.\n\t *\n\t * Note: the option's value and text are never emitted.\n\t */\n\teventId?: string;\n}\n\nconst getChildText = (children: React.ReactNode) => {\n\tlet textContent = '';\n\n\t// Iterate through the children, in the event someone passes\n\t// multiple HTML and or components into the select item\n\tReact.Children.forEach(children, (child) => {\n\t\t// concatenate any text content we get if they are strings\n\t\tif (typeof child === 'string') {\n\t\t\ttextContent += child;\n\t\t\treturn;\n\t\t}\n\n\t\t// but if the child is an HTML element, we need to handle it a bit differently\n\t\tif (React.isValidElement(child) && typeof child.props.children === 'string') {\n\t\t\ttextContent += child.props.children;\n\t\t}\n\t});\n\n\t// we also want to remove any whitespace from the beginning or end.\n\treturn textContent.trim();\n};\n\n/**\n * Renders a select component\n *\n * @param {MrlLegacySelectItemProptypes} props the props for your MrlLink\n * @returns {React.ReactElement} an a element containing the text you pass\n */\nexport const MrlLegacySelectItem = ({\n\tattrs = {},\n\tchildren,\n\tindex,\n\tvalue,\n\tisDisabled,\n\teventId,\n\t...theRest\n}: MrlLegacySelectItemProptypes): React.ReactElement => {\n\tconst focusRef = React.useRef<HTMLDivElement>(null);\n\tconst { dispatch, state: dispatchState } = useSelect();\n\tconst disabled = dispatchState.disabled || isDisabled;\n\tconst childText = getChildText(children);\n\tconst trackInteraction = useMrlTrackInteraction('MrlLegacySelectItem', eventId);\n\tconst setSelectedItem = () => {\n\t\t// the option's value/text is consumer data and is never emitted.\n\t\ttrackInteraction({ action: 'select' });\n\n\t\tdispatch({ payload: value, type: 'select' });\n\t\tdispatch({ payload: children, type: 'selectedText' });\n\t\tdispatch({ payload: index as number, type: 'focus' });\n\t};\n\n\tconst handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n\t\tsetSelectedItem();\n\t\tdispatch({ payload: 'mouse', type: 'close' });\n\t\ttheRest.onClick?.(e);\n\t};\n\n\tconst handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tconst { key } = event;\n\n\t\t// Selects the item on enter or spacebar and closes the select\n\t\tif (key === 'Enter' || key === ' ') {\n\t\t\tevent.stopPropagation();\n\t\t\tevent.preventDefault();\n\n\t\t\tsetSelectedItem();\n\t\t\tdispatch({ payload: 'keyboard', type: 'close' });\n\n\t\t\ttheRest.onKeyDown?.(event);\n\t\t}\n\t};\n\n\t/**\n\t * Sets focus to select item if it's active when the select is opened\n\t */\n\tReact.useEffect(() => {\n\t\tif (index === dispatchState.focusIndex) {\n\t\t\tfocusRef?.current?.focus();\n\t\t}\n\t}, [index, dispatchState, focusRef]);\n\n\t/**\n\t * Sets up default state of selectbox based on the value of the select item\n\t */\n\tReact.useEffect(() => {\n\t\tconst isSelectedValue = dispatchState.selectedItem === value;\n\t\tconst isDefaultValue = dispatchState.defaultValue === value && !dispatchState.selectedItem;\n\t\tconst isFirstItem = !dispatchState.defaultValue && !dispatchState.selectedItem && index === 0;\n\n\t\tif (isSelectedValue || isDefaultValue || isFirstItem) {\n\t\t\tdispatch({ payload: value, type: 'select' });\n\t\t\tdispatch({ payload: children, type: 'selectedText' });\n\n\t\t\t// sets focus to defaultValue when select is opened\n\t\t\tif (index) dispatch({ payload: index, type: 'focus' });\n\t\t}\n\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [dispatchState.defaultValue, dispatchState.selectedText, index]);\n\n\tconst attributes = setAttributes(attrs, {\n\t\t// Note, the ID of this component if not set by the developer, is\n\t\t// programmatically applied by the mrl-select component\n\t\t'aria-disabled': disabled,\n\t\t'aria-label': childText,\n\t\t'aria-selected': dispatchState.selectedItem === value,\n\t\t'auto-focus': 'true',\n\t\t'data-value': value,\n\t\trole: 'option',\n\t\ttabIndex: '-1'\n\t});\n\n\tconst allClasses = classnames(attrs.className, theRest.className, 'mrl-selectItem', {\n\t\t[styles['mrl-is--selected']]: dispatchState.selectedItem === value,\n\t\t[styles['mrl-is--focused']]: dispatchState.focusIndex === index,\n\t\t[styles['mrl-is--hidden']]: !dispatchState.open,\n\t\t[styles['mrl-selectItem']]: true\n\t});\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\t{...attributes}\n\t\t\t{...theRest}\n\t\t\tref={focusRef}\n\t\t\tclassName={allClasses}\n\t\t\t{...(!disabled && { onClick: handleClick })}\n\t\t\t{...(!disabled && { onKeyDown: handleEnter })}\n\t\t>\n\t\t\t{children}\n\t\t\t{dispatchState.selectedItem === value ? (\n\t\t\t\t<MrlSvg\n\t\t\t\t\tsvg={check}\n\t\t\t\t\tclassName={styles['mrl-selectItem-selectedIcon']}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tattrs={{\n\t\t\t\t\t\t'aria-hidden': 'true',\n\t\t\t\t\t\tclass: styles['mrl-selectItem-selectedIcon']\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t''\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["getChildText","children","textContent","React","Children","forEach","child","isValidElement","props","trim","MrlLegacySelectItem","_ref","_ref$attrs","attrs","index","value","isDisabled","eventId","theRest","_objectWithoutProperties","_excluded","focusRef","useRef","_useSelect","useSelect","dispatch","dispatchState","state","disabled","childText","trackInteraction","useMrlTrackInteraction","setSelectedItem","action","payload","type","handleClick","e","_theRest$onClick","onClick","call","handleEnter","event","key","_theRest$onKeyDown","stopPropagation","preventDefault","onKeyDown","useEffect","focusIndex","_focusRef$current","current","focus","isSelectedValue","selectedItem","isDefaultValue","defaultValue","isFirstItem","selectedText","attributes","setAttributes","role","tabIndex","allClasses","classnames","className","styles","open","createElement","_extends","ref","MrlSvg","svg","check","size","class"],"mappings":"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"}

package/dist/esm/components/form/radio/MrlRadioButton/MrlRadioButton.js

@@ -4,10 +4,11 @@ import classnames from 'classnames';
 import { getDescribedby } from '../../utils.js';
 import styles from './MrlRadioButton.module.scss.js';
 import { getUniqueId } from '../../../../utils/setAttributes/setAttributes.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlRadioButtonStandalone } from '../MrlRadioButtonStandalone/MrlRadioButtonStandalone.js';
 import { MrlLabelWithDescription } from '../../label/MrlLabelWithDescription/MrlLabelWithDescription.js';
 
-var _excluded = ["className", "description", "hasMultilineLabel", "name", "value", "icon", "disabled", "hasError", "label", "style"];
+var _excluded = ["className", "description", "hasMultilineLabel", "name", "value", "icon", "disabled", "hasError", "label", "onChange", "style", "eventId"];
 /**
  * Form element with an associated text label and description that allows the user to select one
  * option from a provided list
@@ -28,10 +29,26 @@ function MrlRadioButton(_ref) {
     _ref$hasError = _ref.hasError,
     hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     label = _ref.label,
+    onChange = _ref.onChange,
     style = _ref.style,
+    eventId = _ref.eventId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var radioButtonIdRef = React.useRef(getUniqueId('mrl-radio-button'));
   var descriptionId = "".concat(radioButtonIdRef.current, "-description");
+  var trackInteraction = useMrlTrackInteraction('MrlRadioButton', eventId);
+
+  /**
+   * Handle change events
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - change event
+   */
+  var handleChange = e => {
+    // the radio's `value` is consumer data and may be free text, so it is never emitted.
+    trackInteraction({
+      action: 'select'
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
   var allClasses = classnames(className, 'MrlRadioButton', styles['MrlRadioButton']);
   return /*#__PURE__*/React.createElement("div", {
     className: allClasses,
@@ -40,6 +57,7 @@ function MrlRadioButton(_ref) {
     id: radioButtonIdRef.current,
     className: allClasses,
     name: name,
+    onChange: handleChange,
     value: value,
     disabled: disabled,
     hasError: !disabled && hasError

package/dist/esm/components/form/radio/MrlRadioButton/MrlRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlRadioButton.js","sources":["../../../../../../src/components/form/radio/MrlRadioButton/MrlRadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getUniqueId } from '../../../../utils';\nimport { StaticIconConfig } from '../../constants';\nimport { MrlRadioButtonStandalone } from '../../../';\nimport { MrlLabelWithDescription } from '../../label/MrlLabelWithDescription';\nimport { getDescribedby } from '../../utils';\n\nimport styles from './MrlRadioButton.module.scss';\n\ninterface MrlRadioButtonProps extends React.ComponentPropsWithoutRef<'input'> {\n\t/** Additional class to add to the container element */\n\tclassName?: string;\n\t/** Adjusts the styles of the label, icon and description when the label is multiline */\n\thasMultilineLabel?: boolean;\n\t/** The text to display as the radio button's label */\n\tlabel: string;\n\t/** The radio button's name that will group it with others in a radio group */\n\tname: string;\n\t/** The radio button's value */\n\tvalue: string;\n\t/** Indicates if the radio button is disabled */\n\tdisabled?: boolean;\n\t/** Indicates if the radio button has an error */\n\thasError?: boolean;\n\t/** Leading label icon */\n\ticon?: StaticIconConfig;\n\t/** Styles applied to the container element */\n\tstyle?: React.CSSProperties;\n\t/**\n\t * Description, additional context text for the user.\n\t * It can be a string or a React component for custom render.\n\t * When using a React component it's necessary to add an id to the custom element and\n\t * pass it to the MrlRadioButton through \"aria-describedby\" to make it accessible\n\t * to screen readers.\n\t * Custom description should also implement the disabled state styles\n\t * for text when the input is disabled or set color: inherit.\n\t *\n\t * @example\n\t * <MrlRadioButton aria-describedby={customId} description={\n\t *   <p id={customId}>description</p>\n\t * }>\n\t */\n\tdescription?: string | React.ReactNode;\n\t/** Data attribute for QA testing */\n\t['data-qa']?: string;\n}\n\n/**\n * Form element with an associated text label and description that allows the user to select one\n * option from a provided list\n *\n * @param {MrlRadioButtonProps} props - the component props\n * @returns an input with type \"radio\" with an associated label\n */\nexport function MrlRadioButton({\n\tclassName,\n\tdescription,\n\thasMultilineLabel = false,\n\tname,\n\tvalue,\n\ticon,\n\tdisabled = false,\n\thasError = false,\n\tlabel,\n\tstyle,\n\t...rest\n}: MrlRadioButtonProps): JSX.Element {\n\tconst radioButtonIdRef = React.useRef<string>(getUniqueId('mrl-radio-button'));\n\tconst descriptionId = `${radioButtonIdRef.current}-description`;\n\n\tconst allClasses = classnames(className, 'MrlRadioButton', styles['MrlRadioButton']);\n\n\treturn (\n\t\t<div className={allClasses} style={style}>\n\t\t\t<MrlRadioButtonStandalone\n\t\t\t\t{...rest}\n\t\t\t\tid={radioButtonIdRef.current}\n\t\t\t\tclassName={allClasses}\n\t\t\t\tname={name}\n\t\t\t\tvalue={value}\n\t\t\t\tdisabled={disabled}\n\t\t\t\thasError={!disabled && hasError}\n\t\t\t\t{...getDescribedby(\n\t\t\t\t\trest['aria-describedby'],\n\t\t\t\t\ttypeof description === 'string' ? descriptionId : undefined\n\t\t\t\t)}\n\t\t\t/>\n\t\t\t<MrlLabelWithDescription\n\t\t\t\tdata-qa={`${rest['data-qa']}-label`}\n\t\t\t\tisDisabled={disabled}\n\t\t\t\tisSelected={rest.defaultChecked || rest.checked}\n\t\t\t\thasMultilineLabel={hasMultilineLabel}\n\t\t\t\thtmlFor={radioButtonIdRef.current}\n\t\t\t\ticon={icon}\n\t\t\t\tlabel={label}\n\t\t\t\tdescription={description}\n\t\t\t\tdescriptionId={descriptionId}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"names":["MrlRadioButton","_ref","className","description","_ref$hasMultilineLabe","hasMultilineLabel","name","value","icon","_ref$disabled","disabled","_ref$hasError","hasError","label","style","rest","_objectWithoutProperties","_excluded","radioButtonIdRef","React","useRef","getUniqueId","descriptionId","concat","current","allClasses","classnames","styles","createElement","MrlRadioButtonStandalone","_extends","id","getDescribedby","undefined","MrlLabelWithDescription","isDisabled","isSelected","defaultChecked","checked","htmlFor"],"mappings":";;;;;;;;;;AAgDA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,cAAcA,CAAAC,IAAA,EAYO;AAAA,EAAA,IAXpCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IAAAC,qBAAA,GAAAH,IAAA,CACXI,iBAAiB;AAAjBA,IAAAA,iBAAiB,GAAAD,qBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,qBAAA;IACzBE,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,IAAI,GAAAP,IAAA,CAAJO,IAAI;IAAAC,aAAA,GAAAR,IAAA,CACJS,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,aAAA;IAAAE,aAAA,GAAAV,IAAA,CAChBW,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,aAAA;IAChBE,KAAK,GAAAZ,IAAA,CAALY,KAAK;IACLC,KAAK,GAAAb,IAAA,CAALa,KAAK;AACFC,IAAAA,IAAI,GAAAC,wBAAA,CAAAf,IAAA,EAAAgB,SAAA,CAAA;EAEP,IAAMC,gBAAgB,GAAGC,KAAK,CAACC,MAAM,CAASC,WAAW,CAAC,kBAAkB,CAAC,CAAC;AAC9E,EAAA,IAAMC,aAAa,GAAA,EAAA,CAAAC,MAAA,CAAML,gBAAgB,CAACM,OAAO,EAAA,cAAA,CAAc;AAE/D,EAAA,IAAMC,UAAU,GAAGC,UAAU,CAACxB,SAAS,EAAE,gBAAgB,EAAEyB,MAAM,CAAC,gBAAgB,CAAC,CAAC;EAEpF,oBACCR,KAAA,CAAAS,aAAA,CAAA,KAAA,EAAA;AAAK1B,IAAAA,SAAS,EAAEuB,UAAW;AAACX,IAAAA,KAAK,EAAEA;GAAM,eACxCK,KAAA,CAAAS,aAAA,CAACC,wBAAwB,EAAAC,QAAA,KACpBf,IAAI,EAAA;IACRgB,EAAE,EAAEb,gBAAgB,CAACM,OAAQ;AAC7BtB,IAAAA,SAAS,EAAEuB,UAAW;AACtBnB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAM;AACbG,IAAAA,QAAQ,EAAEA,QAAS;IACnBE,QAAQ,EAAE,CAACF,QAAQ,IAAIE;GAAS,EAC5BoB,cAAc,CACjBjB,IAAI,CAAC,kBAAkB,CAAC,EACxB,OAAOZ,WAAW,KAAK,QAAQ,GAAGmB,aAAa,GAAGW,SACnD,CAAC,CACD,CAAC,eACFd,KAAA,CAAAS,aAAA,CAACM,uBAAuB,EAAA;AACvB,IAAA,SAAA,EAAA,EAAA,CAAAX,MAAA,CAAYR,IAAI,CAAC,SAAS,CAAC,EAAA,QAAA,CAAS;AACpCoB,IAAAA,UAAU,EAAEzB,QAAS;AACrB0B,IAAAA,UAAU,EAAErB,IAAI,CAACsB,cAAc,IAAItB,IAAI,CAACuB,OAAQ;AAChDjC,IAAAA,iBAAiB,EAAEA,iBAAkB;IACrCkC,OAAO,EAAErB,gBAAgB,CAACM,OAAQ;AAClChB,IAAAA,IAAI,EAAEA,IAAK;AACXK,IAAAA,KAAK,EAAEA,KAAM;AACbV,IAAAA,WAAW,EAAEA,WAAY;AACzBmB,IAAAA,aAAa,EAAEA;AAAc,GAC7B,CACG,CAAC;AAER;;;;"}
+{"version":3,"file":"MrlRadioButton.js","sources":["../../../../../../src/components/form/radio/MrlRadioButton/MrlRadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getUniqueId } from '../../../../utils';\nimport { StaticIconConfig } from '../../constants';\nimport { MrlRadioButtonStandalone } from '../../../';\nimport { MrlLabelWithDescription } from '../../label/MrlLabelWithDescription';\nimport { getDescribedby } from '../../utils';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlRadioButton.module.scss';\n\ninterface MrlRadioButtonProps extends React.ComponentPropsWithoutRef<'input'> {\n\t/** Additional class to add to the container element */\n\tclassName?: string;\n\t/** Adjusts the styles of the label, icon and description when the label is multiline */\n\thasMultilineLabel?: boolean;\n\t/** The text to display as the radio button's label */\n\tlabel: string;\n\t/** The radio button's name that will group it with others in a radio group */\n\tname: string;\n\t/** The radio button's value */\n\tvalue: string;\n\t/** Indicates if the radio button is disabled */\n\tdisabled?: boolean;\n\t/** Indicates if the radio button has an error */\n\thasError?: boolean;\n\t/** Leading label icon */\n\ticon?: StaticIconConfig;\n\t/** Styles applied to the container element */\n\tstyle?: React.CSSProperties;\n\t/**\n\t * Description, additional context text for the user.\n\t * It can be a string or a React component for custom render.\n\t * When using a React component it's necessary to add an id to the custom element and\n\t * pass it to the MrlRadioButton through \"aria-describedby\" to make it accessible\n\t * to screen readers.\n\t * Custom description should also implement the disabled state styles\n\t * for text when the input is disabled or set color: inherit.\n\t *\n\t * @example\n\t * <MrlRadioButton aria-describedby={customId} description={\n\t *   <p id={customId}>description</p>\n\t * }>\n\t */\n\tdescription?: string | React.ReactNode;\n\t/** Data attribute for QA testing */\n\t['data-qa']?: string;\n\t/**\n\t * Enables interaction tracking for this radio button. Provide a stable, non-PII id\n\t * (e.g. 'plan-selection'). When omitted, the radio button emits no analytics.\n\t */\n\teventId?: string;\n}\n\n/**\n * Form element with an associated text label and description that allows the user to select one\n * option from a provided list\n *\n * @param {MrlRadioButtonProps} props - the component props\n * @returns an input with type \"radio\" with an associated label\n */\nexport function MrlRadioButton({\n\tclassName,\n\tdescription,\n\thasMultilineLabel = false,\n\tname,\n\tvalue,\n\ticon,\n\tdisabled = false,\n\thasError = false,\n\tlabel,\n\tonChange,\n\tstyle,\n\t// destructured so the standalone input doesn't emit a duplicate event.\n\teventId,\n\t...rest\n}: MrlRadioButtonProps): JSX.Element {\n\tconst radioButtonIdRef = React.useRef<string>(getUniqueId('mrl-radio-button'));\n\tconst descriptionId = `${radioButtonIdRef.current}-description`;\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlRadioButton', eventId);\n\n\t/**\n\t * Handle change events\n\t *\n\t * @param {React.ChangeEvent<HTMLInputElement>} e - change event\n\t */\n\tconst handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t// the radio's `value` is consumer data and may be free text, so it is never emitted.\n\t\ttrackInteraction({ action: 'select' });\n\n\t\tonChange?.(e);\n\t};\n\n\tconst allClasses = classnames(className, 'MrlRadioButton', styles['MrlRadioButton']);\n\n\treturn (\n\t\t<div className={allClasses} style={style}>\n\t\t\t<MrlRadioButtonStandalone\n\t\t\t\t{...rest}\n\t\t\t\tid={radioButtonIdRef.current}\n\t\t\t\tclassName={allClasses}\n\t\t\t\tname={name}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tvalue={value}\n\t\t\t\tdisabled={disabled}\n\t\t\t\thasError={!disabled && hasError}\n\t\t\t\t{...getDescribedby(\n\t\t\t\t\trest['aria-describedby'],\n\t\t\t\t\ttypeof description === 'string' ? descriptionId : undefined\n\t\t\t\t)}\n\t\t\t/>\n\t\t\t<MrlLabelWithDescription\n\t\t\t\tdata-qa={`${rest['data-qa']}-label`}\n\t\t\t\tisDisabled={disabled}\n\t\t\t\tisSelected={rest.defaultChecked || rest.checked}\n\t\t\t\thasMultilineLabel={hasMultilineLabel}\n\t\t\t\thtmlFor={radioButtonIdRef.current}\n\t\t\t\ticon={icon}\n\t\t\t\tlabel={label}\n\t\t\t\tdescription={description}\n\t\t\t\tdescriptionId={descriptionId}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"names":["MrlRadioButton","_ref","className","description","_ref$hasMultilineLabe","hasMultilineLabel","name","value","icon","_ref$disabled","disabled","_ref$hasError","hasError","label","onChange","style","eventId","rest","_objectWithoutProperties","_excluded","radioButtonIdRef","React","useRef","getUniqueId","descriptionId","concat","current","trackInteraction","useMrlTrackInteraction","handleChange","e","action","allClasses","classnames","styles","createElement","MrlRadioButtonStandalone","_extends","id","getDescribedby","undefined","MrlLabelWithDescription","isDisabled","isSelected","defaultChecked","checked","htmlFor"],"mappings":"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"}

package/dist/esm/components/form/radio/MrlRadioButtonStandalone/MrlRadioButtonStandalone.js

@@ -3,8 +3,9 @@ import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlRadioButtonStandalone.module.scss.js';
 import { getUniqueId } from '../../../../utils/setAttributes/setAttributes.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 
-var _excluded = ["className", "disabled", "hasError", "id", "name", "ref", "value"];
+var _excluded = ["className", "disabled", "hasError", "id", "name", "onChange", "ref", "eventId", "value"];
 /**
  * Input that allows the user to select one options from a provided radio group.
  * Note, this component does not provide out of the box accessibility for ensuring
@@ -19,12 +20,28 @@ function MrlRadioButtonStandalone(_ref) {
     hasError = _ref.hasError,
     id = _ref.id,
     name = _ref.name,
+    onChange = _ref.onChange,
     ref = _ref.ref,
+    eventId = _ref.eventId,
     value = _ref.value,
     rest = _objectWithoutProperties(_ref, _excluded);
   // Use id if the developer passes in a custom id
   // but we need to ensure one exists for accessibility
   var radioIdRef = React.useRef(id || getUniqueId('mrl-radio'));
+  var trackInteraction = useMrlTrackInteraction('MrlRadioButtonStandalone', eventId);
+
+  /**
+   * Handle change events
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - change event
+   */
+  var handleChange = e => {
+    // the radio's `value` is consumer data and may be free text, so it is never emitted.
+    trackInteraction({
+      action: 'select'
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
   if (!(id || rest['aria-labelledby'])) {
     console.warn('Warning: MrlRadioButtonStandalone must have either an id or' + ' aria-labelledby attribute for proper accessibility.');
   }
@@ -35,6 +52,7 @@ function MrlRadioButtonStandalone(_ref) {
       [styles.hasError]: hasError
     }, className),
     id: radioIdRef.current,
+    onChange: handleChange,
     ref: ref,
     name: name,
     value: value,

package/dist/esm/components/form/radio/MrlRadioButtonStandalone/MrlRadioButtonStandalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlRadioButtonStandalone.js","sources":["../../../../../../src/components/form/radio/MrlRadioButtonStandalone/MrlRadioButtonStandalone.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getUniqueId } from '../../../../utils';\n\nimport styles from './MrlRadioButtonStandalone.module.scss';\nimport './MrlRadioButtonStandalone.global.scss';\n\ninterface MrlRadioButtonStandaloneProps extends React.ComponentPropsWithoutRef<'input'> {\n\t/** The radio button's name that will group it with others in a radio group */\n\tname: string;\n\t/** The radio button's value */\n\tvalue: string;\n\t/** A ref to the input element */\n\tref?: React.Ref<HTMLInputElement>;\n\t/** Indicates if the radio button is disabled */\n\tdisabled?: boolean;\n\t/** Indicates if the radio button has an error */\n\thasError?: boolean;\n\t/** Additional class to add to the label */\n\tclassName?: string;\n}\n\n/**\n * Input that allows the user to select one options from a provided radio group.\n * Note, this component does not provide out of the box accessibility for ensuring\n * an associated label and must be manually setup during adoption.\n *\n * @param {MrlRadioButtonStandaloneProps} props - the component props\n * @returns an input element with type=\"radio\"\n */\nexport function MrlRadioButtonStandalone({\n\tclassName,\n\tdisabled,\n\thasError,\n\tid,\n\tname,\n\tref,\n\tvalue,\n\t...rest\n}: MrlRadioButtonStandaloneProps): JSX.Element {\n\t// Use id if the developer passes in a custom id\n\t// but we need to ensure one exists for accessibility\n\tconst radioIdRef = React.useRef<string>(id || getUniqueId('mrl-radio'));\n\n\tif (!(id || rest['aria-labelledby'])) {\n\t\tconsole.warn(\n\t\t\t'Warning: MrlRadioButtonStandalone must have either an id or' +\n\t\t\t\t' aria-labelledby attribute for proper accessibility.'\n\t\t);\n\t}\n\n\treturn (\n\t\t<span className={classnames(styles['MrlRadioButtonStandalone'], 'mrl-u-focus-wrapper')}>\n\t\t\t<input\n\t\t\t\t{...rest}\n\t\t\t\tclassName={classnames(\n\t\t\t\t\t'MrlRadioButtonStandalone-input',\n\t\t\t\t\tstyles['MrlRadioButtonStandalone-input'],\n\t\t\t\t\t'MrlRadioButtonStandalone',\n\t\t\t\t\t{\n\t\t\t\t\t\t[styles.hasError]: hasError\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tid={radioIdRef.current}\n\t\t\t\tref={ref}\n\t\t\t\tname={name}\n\t\t\t\tvalue={value}\n\t\t\t\tdisabled={disabled}\n\t\t\t\ttype=\"radio\"\n\t\t\t/>\n\t\t\t<span className=\"mrl-u-focus-indicator MrlRadioButtonStandalone-focus-indicator\"></span>\n\t\t\t<span\n\t\t\t\tclassName={classnames(\n\t\t\t\t\tstyles['MrlRadioButtonStandalone-faux-input'],\n\t\t\t\t\t'MrlRadioButtonStandalone-faux-input'\n\t\t\t\t)}\n\t\t\t></span>\n\t\t</span>\n\t);\n}\n"],"names":["MrlRadioButtonStandalone","_ref","className","disabled","hasError","id","name","ref","value","rest","_objectWithoutProperties","_excluded","radioIdRef","React","useRef","getUniqueId","console","warn","createElement","classnames","styles","_extends","current","type"],"mappings":";;;;;;;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,wBAAwBA,CAAAC,IAAA,EASO;AAAA,EAAA,IAR9CC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,EAAE,GAAAJ,IAAA,CAAFI,EAAE;IACFC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,GAAG,GAAAN,IAAA,CAAHM,GAAG;IACHC,KAAK,GAAAP,IAAA,CAALO,KAAK;AACFC,IAAAA,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA;AAEP;AACA;AACA,EAAA,IAAMC,UAAU,GAAGC,KAAK,CAACC,MAAM,CAAST,EAAE,IAAIU,WAAW,CAAC,WAAW,CAAC,CAAC;EAEvE,IAAI,EAAEV,EAAE,IAAII,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE;AACrCO,IAAAA,OAAO,CAACC,IAAI,CACX,6DAA6D,GAC5D,sDACF,CAAC;AACF,EAAA;EAEA,oBACCJ,KAAA,CAAAK,aAAA,CAAA,MAAA,EAAA;IAAMhB,SAAS,EAAEiB,UAAU,CAACC,MAAM,CAAC,0BAA0B,CAAC,EAAE,qBAAqB;AAAE,GAAA,eACtFP,KAAA,CAAAK,aAAA,CAAA,OAAA,EAAAG,QAAA,KACKZ,IAAI,EAAA;IACRP,SAAS,EAAEiB,UAAU,CACpB,gCAAgC,EAChCC,MAAM,CAAC,gCAAgC,CAAC,EACxC,0BAA0B,EAC1B;MACC,CAACA,MAAM,CAAChB,QAAQ,GAAGA;KACnB,EACDF,SACD,CAAE;IACFG,EAAE,EAAEO,UAAU,CAACU,OAAQ;AACvBf,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXE,IAAAA,KAAK,EAAEA,KAAM;AACbL,IAAAA,QAAQ,EAAEA,QAAS;AACnBoB,IAAAA,IAAI,EAAC;AAAO,GAAA,CACZ,CAAC,eACFV,KAAA,CAAAK,aAAA,CAAA,MAAA,EAAA;AAAMhB,IAAAA,SAAS,EAAC;AAAgE,GAAO,CAAC,eACxFW,KAAA,CAAAK,aAAA,CAAA,MAAA,EAAA;IACChB,SAAS,EAAEiB,UAAU,CACpBC,MAAM,CAAC,qCAAqC,CAAC,EAC7C,qCACD;AAAE,GACI,CACF,CAAC;AAET;;;;"}
+{"version":3,"file":"MrlRadioButtonStandalone.js","sources":["../../../../../../src/components/form/radio/MrlRadioButtonStandalone/MrlRadioButtonStandalone.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getUniqueId } from '../../../../utils';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlRadioButtonStandalone.module.scss';\nimport './MrlRadioButtonStandalone.global.scss';\n\ninterface MrlRadioButtonStandaloneProps extends React.ComponentPropsWithoutRef<'input'> {\n\t/** The radio button's name that will group it with others in a radio group */\n\tname: string;\n\t/** The radio button's value */\n\tvalue: string;\n\t/** A ref to the input element */\n\tref?: React.Ref<HTMLInputElement>;\n\t/** Indicates if the radio button is disabled */\n\tdisabled?: boolean;\n\t/** Indicates if the radio button has an error */\n\thasError?: boolean;\n\t/** Additional class to add to the label */\n\tclassName?: string;\n\t/**\n\t * Enables interaction tracking for this radio button. Provide a stable, non-PII id\n\t * (e.g. 'plan-selection'). When omitted, the radio button emits no analytics.\n\t */\n\teventId?: string;\n}\n\n/**\n * Input that allows the user to select one options from a provided radio group.\n * Note, this component does not provide out of the box accessibility for ensuring\n * an associated label and must be manually setup during adoption.\n *\n * @param {MrlRadioButtonStandaloneProps} props - the component props\n * @returns an input element with type=\"radio\"\n */\nexport function MrlRadioButtonStandalone({\n\tclassName,\n\tdisabled,\n\thasError,\n\tid,\n\tname,\n\tonChange,\n\tref,\n\teventId,\n\tvalue,\n\t...rest\n}: MrlRadioButtonStandaloneProps): JSX.Element {\n\t// Use id if the developer passes in a custom id\n\t// but we need to ensure one exists for accessibility\n\tconst radioIdRef = React.useRef<string>(id || getUniqueId('mrl-radio'));\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlRadioButtonStandalone', eventId);\n\n\t/**\n\t * Handle change events\n\t *\n\t * @param {React.ChangeEvent<HTMLInputElement>} e - change event\n\t */\n\tconst handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t// the radio's `value` is consumer data and may be free text, so it is never emitted.\n\t\ttrackInteraction({ action: 'select' });\n\n\t\tonChange?.(e);\n\t};\n\n\tif (!(id || rest['aria-labelledby'])) {\n\t\tconsole.warn(\n\t\t\t'Warning: MrlRadioButtonStandalone must have either an id or' +\n\t\t\t\t' aria-labelledby attribute for proper accessibility.'\n\t\t);\n\t}\n\n\treturn (\n\t\t<span className={classnames(styles['MrlRadioButtonStandalone'], 'mrl-u-focus-wrapper')}>\n\t\t\t<input\n\t\t\t\t{...rest}\n\t\t\t\tclassName={classnames(\n\t\t\t\t\t'MrlRadioButtonStandalone-input',\n\t\t\t\t\tstyles['MrlRadioButtonStandalone-input'],\n\t\t\t\t\t'MrlRadioButtonStandalone',\n\t\t\t\t\t{\n\t\t\t\t\t\t[styles.hasError]: hasError\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tid={radioIdRef.current}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tref={ref}\n\t\t\t\tname={name}\n\t\t\t\tvalue={value}\n\t\t\t\tdisabled={disabled}\n\t\t\t\ttype=\"radio\"\n\t\t\t/>\n\t\t\t<span className=\"mrl-u-focus-indicator MrlRadioButtonStandalone-focus-indicator\"></span>\n\t\t\t<span\n\t\t\t\tclassName={classnames(\n\t\t\t\t\tstyles['MrlRadioButtonStandalone-faux-input'],\n\t\t\t\t\t'MrlRadioButtonStandalone-faux-input'\n\t\t\t\t)}\n\t\t\t></span>\n\t\t</span>\n\t);\n}\n"],"names":["MrlRadioButtonStandalone","_ref","className","disabled","hasError","id","name","onChange","ref","eventId","value","rest","_objectWithoutProperties","_excluded","radioIdRef","React","useRef","getUniqueId","trackInteraction","useMrlTrackInteraction","handleChange","e","action","console","warn","createElement","classnames","styles","_extends","current","type"],"mappings":";;;;;;;;AA4BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,wBAAwBA,CAAAC,IAAA,EAWO;AAAA,EAAA,IAV9CC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,EAAE,GAAAJ,IAAA,CAAFI,EAAE;IACFC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,GAAG,GAAAP,IAAA,CAAHO,GAAG;IACHC,OAAO,GAAAR,IAAA,CAAPQ,OAAO;IACPC,KAAK,GAAAT,IAAA,CAALS,KAAK;AACFC,IAAAA,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA;AAEP;AACA;AACA,EAAA,IAAMC,UAAU,GAAGC,KAAK,CAACC,MAAM,CAASX,EAAE,IAAIY,WAAW,CAAC,WAAW,CAAC,CAAC;AAEvE,EAAA,IAAMC,gBAAgB,GAAGC,sBAAsB,CAAC,0BAA0B,EAAEV,OAAO,CAAC;;AAEpF;AACD;AACA;AACA;AACA;EACC,IAAMW,YAAY,GAAIC,CAAsC,IAAK;AAChE;AACAH,IAAAA,gBAAgB,CAAC;AAAEI,MAAAA,MAAM,EAAE;AAAS,KAAC,CAAC;AAEtCf,IAAAA,QAAQ,aAARA,QAAQ,KAAA,MAAA,GAAA,MAAA,GAARA,QAAQ,CAAGc,CAAC,CAAC;EACd,CAAC;EAED,IAAI,EAAEhB,EAAE,IAAIM,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE;AACrCY,IAAAA,OAAO,CAACC,IAAI,CACX,6DAA6D,GAC5D,sDACF,CAAC;AACF,EAAA;EAEA,oBACCT,KAAA,CAAAU,aAAA,CAAA,MAAA,EAAA;IAAMvB,SAAS,EAAEwB,UAAU,CAACC,MAAM,CAAC,0BAA0B,CAAC,EAAE,qBAAqB;AAAE,GAAA,eACtFZ,KAAA,CAAAU,aAAA,CAAA,OAAA,EAAAG,QAAA,KACKjB,IAAI,EAAA;IACRT,SAAS,EAAEwB,UAAU,CACpB,gCAAgC,EAChCC,MAAM,CAAC,gCAAgC,CAAC,EACxC,0BAA0B,EAC1B;MACC,CAACA,MAAM,CAACvB,QAAQ,GAAGA;KACnB,EACDF,SACD,CAAE;IACFG,EAAE,EAAES,UAAU,CAACe,OAAQ;AACvBtB,IAAAA,QAAQ,EAAEa,YAAa;AACvBZ,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,KAAK,EAAEA,KAAM;AACbP,IAAAA,QAAQ,EAAEA,QAAS;AACnB2B,IAAAA,IAAI,EAAC;AAAO,GAAA,CACZ,CAAC,eACFf,KAAA,CAAAU,aAAA,CAAA,MAAA,EAAA;AAAMvB,IAAAA,SAAS,EAAC;AAAgE,GAAO,CAAC,eACxFa,KAAA,CAAAU,aAAA,CAAA,MAAA,EAAA;IACCvB,SAAS,EAAEwB,UAAU,CACpBC,MAAM,CAAC,qCAAqC,CAAC,EAC7C,qCACD;AAAE,GACI,CACF,CAAC;AAET;;;;"}

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

@@ -3,13 +3,15 @@ import * as React from 'react';
 import CreatableSelect from 'react-select/creatable';
 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';
 import { MrlSelectClearIndicator } from '../components/MrlSelectClearIndicator.js';
 
-var _excluded = ["hasError", "isReadOnly", "kind"];
+var _excluded = ["hasError", "isReadOnly", "kind"],
+  _excluded2 = ["eventId"];
 var CREATABLE_SELECT_CLASS_NAME_PREFIX = 'MrlCreatableSelect';
 var CREATABLE_SELECT_MENU_LIST_CLASS_NAME = "".concat(CREATABLE_SELECT_CLASS_NAME_PREFIX, "__menu-list");
 
@@ -24,6 +26,11 @@ function MrlCreatableSelect(props) {
     _props$kind = props.kind,
     kind = _props$kind === void 0 ? 'default' : _props$kind,
     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('MrlCreatableSelect', eventId);
   var defaultStyles = React.useMemo(() => {
     return getSelectStyles(kind);
   }, [kind]);
@@ -44,9 +51,42 @@ function MrlCreatableSelect(props) {
     classNamePrefix: CREATABLE_SELECT_CLASS_NAME_PREFIX,
     closeMenuOnScroll: closeMenuOnScroll(CREATABLE_SELECT_MENU_LIST_CLASS_NAME),
     formatCreateLabel: () => "Press enter to add new option"
-  }, 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);
+    },
+    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/esm/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,wBAAA,CAAKN,KAAK,EAAAO,SAAA,CAAA;AAEjE,EAAA,IAAMC,aAAa,GAAGC,KAAK,CAACC,OAAO,CAAC,MAAM;IACzC,OAAOC,eAAe,CAAIP,IAAI,CAAC;AAChC,EAAA,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;AAEV,EAAA,IAAMQ,gBAAgB,GAAGH,KAAK,CAACC,OAAO,CAAC,MAAM;AAC5C,IAAA,IAAMG,QAAQ,GAAG;AAChBC,MAAAA,cAAc,EAAEC,uBAA0B;AAC1CC,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,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,KAAA,CAAAkB,aAAA,CAACC,eAAe,EAAAC,QAAA,CAAA;AACfC,IAAAA,eAAe,EAAElC,kCAAmC;AACpDmC,IAAAA,iBAAiB,EAAEA,iBAAiB,CAAClC,qCAAqC,CAAE;AAC5EmC,IAAAA,iBAAiB,EAAEA,MAAA;GAAsC,EACrD3B,IAAI,EACJL,KAAK,EAAA;IACTiC,MAAM,EAAAC,cAAA,CAAAA,cAAA,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/esm/components/form/select/MrlMultiCreatableSelect/MrlMultiCreatableSelect.js

@@ -3,13 +3,15 @@ import * as React from 'react';
 import CreatableSelect from 'react-select/creatable';
 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';
 import { MrlSelectClearIndicator } from '../components/MrlSelectClearIndicator.js';
 
-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");
 
@@ -24,6 +26,11 @@ function MrlMultiCreatableSelect(props) {
     _props$kind = props.kind,
     kind = _props$kind === void 0 ? 'default' : _props$kind,
     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('MrlMultiCreatableSelect', eventId);
   var defaultStyles = React.useMemo(() => {
     return getSelectStyles(kind);
   }, [kind]);
@@ -44,9 +51,42 @@ function MrlMultiCreatableSelect(props) {
     classNamePrefix: MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX,
     closeMenuOnScroll: closeMenuOnScroll(MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME),
     formatCreateLabel: () => "Press enter to add new option"
-  }, 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);
+    },
+    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/esm/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,wBAAA,CAAKN,KAAK,EAAAO,SAAA,CAAA;AAEjE,EAAA,IAAMC,aAAa,GAAGC,KAAK,CAACC,OAAO,CAAC,MAAM;IACzC,OAAOC,eAAe,CAAoBP,IAAI,CAAC;AAChD,EAAA,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;AAEV,EAAA,IAAMQ,gBAAgB,GAAGH,KAAK,CAACC,OAAO,CAAC,MAAM;AAC5C,IAAA,IAAMG,QAAQ,GAAG;AAChBC,MAAAA,cAAc,EAAEC,uBAA0C;AAC1DC,MAAAA,iBAAiB,EAAEC,0BAA6C;AAChEC,MAAAA,MAAM,EAAEC,eAAkC;AAC1CC,MAAAA,eAAe,EAAEC,kBAAqC;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,KAAA,CAAAkB,aAAA,CAACC,eAAe,EAAAC,QAAA,CAAA;AACfC,IAAAA,eAAe,EAAElC,wCAAyC;AAC1DmC,IAAAA,iBAAiB,EAAEA,iBAAiB,CAAClC,2CAA2C,CAAE;AAClFmC,IAAAA,iBAAiB,EAAEA,MAAA;GAAsC,EACrD3B,IAAI,EACJL,KAAK,EAAA;IACTiC,MAAM,EAAAC,cAAA,CAAAA,cAAA,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/esm/components/form/select/MrlMultiSelect/MrlMultiSelect.js

@@ -3,6 +3,7 @@ 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';
@@ -10,7 +11,8 @@ import { MrlSelectMultiValueRemove } from '../components/MrlSelectMultiValueRemo
 import { MrlSelectMultiValue } from '../components/MrlSelectMultiValue.js';
 import { MrlSelectDropdownIndicator } from '../components/MrlSelectDropdownIndicator.js';
 
-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");
 
@@ -29,6 +31,11 @@ function MrlMultiSelect(props) {
     _props$kind = props.kind,
     kind = _props$kind === void 0 ? 'default' : _props$kind,
     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('MrlMultiSelect', eventId);
   var defaultStyles = React.useMemo(() => {
     var styles = getSelectStyles(kind);
     return styles;
@@ -50,9 +57,34 @@ function MrlMultiSelect(props) {
   return /*#__PURE__*/React.createElement(Select, _extends({
     classNamePrefix: MULTI_SELECT_CLASS_NAME_PREFIX,
     closeMenuOnScroll: closeMenuOnScroll(MULTI_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/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,wBAAA,CACJV,KAAK,EAAAW,SAAA,CAAA;AAET,EAAA,IAAMC,aAAa,GAAGC,KAAK,CAACC,OAAO,CAAC,MAAM;AACzC,IAAA,IAAMC,MAAM,GAAGC,eAAe,CAAoBR,IAAI,CAAC;AAEvD,IAAA,OAAOO,MAAM;AACd,EAAA,CAAC,EAAE,CAACP,IAAI,CAAC,CAAC;AAEV,EAAA,IAAMS,gBAAgB,GAAGJ,KAAK,CAACC,OAAO,CAAC,MAAM;AAC5C,IAAA,IAAMI,QAAQ,GAAG;AAChBC,MAAAA,iBAAiB,EAAEC,0BAA6C;AAChEC,MAAAA,UAAU,EAAEC,mBAAsC;AAClDC,MAAAA,gBAAgB,EAAEC,yBAA4C;AAC9DC,MAAAA,MAAM,EAAEC,eAAkC;AAC1CC,MAAAA,eAAe,EAAEC,kBAAqC;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,KAAA,CAAAqB,aAAA,CAACC,MAAM,EAAAC,QAAA,CAAA;AACNC,IAAAA,eAAe,EAAEzC,8BAA+B;IAChD0C,iBAAiB,EAAEA,iBAAiB,CAACzC,iCAAiC;GAAE,EACpEY,IAAI,EACJT,KAAK,EAAA;IACTe,MAAM,EAAAwB,cAAA,CAAAA,cAAA,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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"}