npm - @muraldevkit/ui-toolkit - Versions diffs - 4.73.0-dev-NYDL.1 → 4.73.0-dev-t0WE.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (273) hide show

package/dist/cjs/components/form/date-picker/MrlDatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlDatePicker.js","sources":["../../../../../src/components/form/date-picker/MrlDatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { calendar } from '@muraldevkit/ds-icons';\nimport { useActiveColor } from '../hooks/useActiveColor';\nimport { InputStates } from '../constants';\nimport { MrlSvg } from '../../svg/MrlSvg';\nimport styles from './MrlDatePicker.module.scss';\nimport { DataQa } from '../../../utils/dataQa';\n\nexport interface MrlDatePickerProps extends React.ComponentPropsWithRef<'input'>, DataQa {\n\t/** Id of the text input /\n\tinputId: string;\n\tkind?: 'default' \| 'borderless';\n\t/* The value of the text input used to make it a controlled input /\n\tvalue?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: InputStates;\n\tautofocus?: boolean;\n\t/\n\t Event handler for onChange Events\n\t * The value is normalized to yyyy-mm-dd\n\t \n\t @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\n\t /\n\tonChange?: React.ComponentPropsWithRef<'input'>['onChange'];\n}\n\n/\n Allows the user to input a date\n \n @param {MrlDatePickerProps} props - the component props\n * @param {HTMLInputElement} ref - a ref to the input element in the DOM\n * @returns a date input element\n */\nexport const MrlDatePicker = React.forwardRef<HTMLInputElement, MrlDatePickerProps>(\n\tfunction MrlDatePicker(props, ref): JSX.Element {\n\t\tconst {\n\t\t\tautofocus = false,\n\t\t\tclassName,\n\t\t\tinputId,\n\t\t\tkind = 'default',\n\t\t\tonBlur,\n\t\t\tonFocus,\n\t\t\tonMouseEnter,\n\t\t\tonMouseLeave,\n\t\t\tstate,\n\t\t\tvalue,\n\t\t\t['data-qa']: qa,\n\t\t\t...rest\n\t\t} = props;\n\n\t\tconst dateInputRef = React.useRef<HTMLInputElement>(null);\n\n\t\tconst { hasActiveColor, setHasActiveColor } = useActiveColor(state);\n\n\t\tReact.useImperativeHandle<HTMLInputElement \| null, HTMLInputElement \| null>(\n\t\t\tref,\n\t\t\t() => dateInputRef.current\n\t\t);\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tif (typeof onBlur !== 'undefined') {\n\t\t\t\t\tonBlur(e);\n\t\t\t\t}\n\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t},\n\t\t\t[setHasActiveColor, onBlur]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tif (typeof onFocus === 'function') {\n\t\t\t\t\tonFocus(e);\n\t\t\t\t}\n\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t},\n\t\t\t[setHasActiveColor, onFocus]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tif (typeof onMouseEnter === 'function') {\n\t\t\t\t\tonMouseEnter(e);\n\t\t\t\t}\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t},\n\t\t\t[setHasActiveColor, onMouseEnter]\n\t\t);\n\n\t\tconst handleOnMouseLeave = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tif (typeof onMouseLeave === 'function') {\n\t\t\t\t\tonMouseLeave(e);\n\t\t\t\t}\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t},\n\t\t\t[setHasActiveColor, onMouseLeave]\n\t\t);\n\n\t\tconst showPicker = React.useCallback(() => {\n\t\t\tif (dateInputRef.current && typeof dateInputRef.current.showPicker === 'function') {\n\t\t\t\tdateInputRef.current.showPicker();\n\t\t\t}\n\t\t}, []);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (dateInputRef.current && autofocus) {\n\t\t\t\tdateInputRef.current.focus();\n\t\t\t}\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, []);\n\n\t\tconst inputClasses = classnames(\n\t\t\t'MrlDatePicker',\n\t\t\tstyles['MrlDatePicker'],\n\t\t\t{\n\t\t\t\t[styles['MrlDatePicker--borderless']]: kind === 'borderless',\n\t\t\t\t[styles['MrlDatePicker--active']]: hasActiveColor\n\t\t\t},\n\t\t\tclassName\n\t\t);\n\n\t\tconst iconClasses = classnames('MrlDatePicker--icon', styles['MrlDatePicker--icon'], {\n\t\t\t[styles['MrlDatePicker--icon-active']]: hasActiveColor\n\t\t});\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className={classnames('MrlDatePicker--container', styles['MrlDatePicker--container'])}>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\tdata-qa={qa}\n\t\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\tonBlur={handleOnBlur}\n\t\t\t\t\t\tonClick={showPicker}\n\t\t\t\t\t\tonFocus={handleOnFocus}\n\t\t\t\t\t\tonMouseEnter={handleOnMouseEnter}\n\t\t\t\t\t\tonMouseLeave={handleOnMouseLeave}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\treadOnly={state === 'read-only'}\n\t\t\t\t\t\tref={dateInputRef}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t/>\n\t\t\t\t\t<MrlSvg aria-hidden=\"true\" className={iconClasses} svg={calendar} size=\"small\" />\n\t\t\t\t</div>\n\t\t\t</>\n\t\t);\n\t}\n);\n"],"names":["MrlDatePicker","React","forwardRef","props","ref","_props$autofocus","autofocus","className","inputId","_props$kind","kind","onBlur","onFocus","onMouseEnter","onMouseLeave","state","value","qa","rest","_objectWithoutProperties","_excluded","dateInputRef","useRef","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","useImperativeHandle","current","handleOnBlur","useCallback","e","handleOnFocus","handleOnMouseEnter","handleOnMouseLeave","showPicker","useEffect","focus","inputClasses","classnames","styles","iconClasses","createElement","Fragment","_extends","type","disabled","onClick","id","readOnly","MrlSvg","svg","calendar","size"],"mappings":"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"}
1	+ {"version":3,"file":"MrlDatePicker.js","sources":["../../../../../src/components/form/date-picker/MrlDatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { calendar } from '@muraldevkit/ds-icons';\nimport { useActiveColor } from '../hooks/useActiveColor';\nimport { InputStates } from '../constants';\nimport { MrlSvg } from '../../svg/MrlSvg';\nimport styles from './MrlDatePicker.module.scss';\nimport { DataQa } from '../../../utils/dataQa';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nexport interface MrlDatePickerProps extends React.ComponentPropsWithRef<'input'>, DataQa {\n\t/** Id of the text input /\n\tinputId: string;\n\tkind?: 'default' \| 'borderless';\n\t/* The value of the text input used to make it a controlled input /\n\tvalue?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: InputStates;\n\tautofocus?: boolean;\n\t/\n\t Event handler for onChange Events\n\t * The value is normalized to yyyy-mm-dd\n\t \n\t @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\n\t /\n\tonChange?: React.ComponentPropsWithRef<'input'>['onChange'];\n\t/\n\t Enables interaction tracking for this date picker. Provide a stable, non-PII id\n\t * (e.g. 'trial-end-date'). When omitted, the date picker emits no analytics.\n\t \n\t Note: the selected date is never emitted — only that a change happened.\n\t /\n\teventId?: string;\n}\n\n/\n Allows the user to input a date\n \n @param {MrlDatePickerProps} props - the component props\n * @param {HTMLInputElement} ref - a ref to the input element in the DOM\n * @returns a date input element\n */\nexport const MrlDatePicker = React.forwardRef<HTMLInputElement, MrlDatePickerProps>(\n\tfunction MrlDatePicker(props, ref): JSX.Element {\n\t\tconst {\n\t\t\tautofocus = false,\n\t\t\tclassName,\n\t\t\tinputId,\n\t\t\tkind = 'default',\n\t\t\tonBlur,\n\t\t\tonChange,\n\t\t\tonFocus,\n\t\t\tonMouseEnter,\n\t\t\tonMouseLeave,\n\t\t\tstate,\n\t\t\teventId,\n\t\t\tvalue,\n\t\t\t['data-qa']: qa,\n\t\t\t...rest\n\t\t} = props;\n\n\t\tconst dateInputRef = React.useRef<HTMLInputElement>(null);\n\n\t\tconst trackInteraction = useMrlTrackInteraction('MrlDatePicker', eventId);\n\n\t\tconst { hasActiveColor, setHasActiveColor } = useActiveColor(state);\n\n\t\tReact.useImperativeHandle<HTMLInputElement \| null, HTMLInputElement \| null>(\n\t\t\tref,\n\t\t\t() => dateInputRef.current\n\t\t);\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tif (typeof onBlur !== 'undefined') {\n\t\t\t\t\tonBlur(e);\n\t\t\t\t}\n\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t},\n\t\t\t[setHasActiveColor, onBlur]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tif (typeof onFocus === 'function') {\n\t\t\t\t\tonFocus(e);\n\t\t\t\t}\n\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t},\n\t\t\t[setHasActiveColor, onFocus]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tif (typeof onMouseEnter === 'function') {\n\t\t\t\t\tonMouseEnter(e);\n\t\t\t\t}\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t},\n\t\t\t[setHasActiveColor, onMouseEnter]\n\t\t);\n\n\t\tconst handleOnMouseLeave = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tif (typeof onMouseLeave === 'function') {\n\t\t\t\t\tonMouseLeave(e);\n\t\t\t\t}\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t},\n\t\t\t[setHasActiveColor, onMouseLeave]\n\t\t);\n\n\t\tconst handleOnChange = React.useCallback(\n\t\t\t(e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\t// the selected date is consumer data and is never emitted.\n\t\t\t\ttrackInteraction({ action: 'change' });\n\n\t\t\t\tonChange?.(e);\n\t\t\t},\n\t\t\t[onChange, trackInteraction]\n\t\t);\n\n\t\tconst showPicker = React.useCallback(() => {\n\t\t\ttrackInteraction({ action: 'open' });\n\n\t\t\tif (dateInputRef.current && typeof dateInputRef.current.showPicker === 'function') {\n\t\t\t\tdateInputRef.current.showPicker();\n\t\t\t}\n\t\t}, [trackInteraction]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (dateInputRef.current && autofocus) {\n\t\t\t\tdateInputRef.current.focus();\n\t\t\t}\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, []);\n\n\t\tconst inputClasses = classnames(\n\t\t\t'MrlDatePicker',\n\t\t\tstyles['MrlDatePicker'],\n\t\t\t{\n\t\t\t\t[styles['MrlDatePicker--borderless']]: kind === 'borderless',\n\t\t\t\t[styles['MrlDatePicker--active']]: hasActiveColor\n\t\t\t},\n\t\t\tclassName\n\t\t);\n\n\t\tconst iconClasses = classnames('MrlDatePicker--icon', styles['MrlDatePicker--icon'], {\n\t\t\t[styles['MrlDatePicker--icon-active']]: hasActiveColor\n\t\t});\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className={classnames('MrlDatePicker--container', styles['MrlDatePicker--container'])}>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t\tdata-qa={qa}\n\t\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\tonBlur={handleOnBlur}\n\t\t\t\t\t\tonChange={handleOnChange}\n\t\t\t\t\t\tonClick={showPicker}\n\t\t\t\t\t\tonFocus={handleOnFocus}\n\t\t\t\t\t\tonMouseEnter={handleOnMouseEnter}\n\t\t\t\t\t\tonMouseLeave={handleOnMouseLeave}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\treadOnly={state === 'read-only'}\n\t\t\t\t\t\tref={dateInputRef}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t/>\n\t\t\t\t\t<MrlSvg aria-hidden=\"true\" className={iconClasses} svg={calendar} size=\"small\" />\n\t\t\t\t</div>\n\t\t\t</>\n\t\t);\n\t}\n);\n"],"names":["MrlDatePicker","React","forwardRef","props","ref","_props$autofocus","autofocus","className","inputId","_props$kind","kind","onBlur","onChange","onFocus","onMouseEnter","onMouseLeave","state","eventId","value","qa","rest","_objectWithoutProperties","_excluded","dateInputRef","useRef","trackInteraction","useMrlTrackInteraction","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","useImperativeHandle","current","handleOnBlur","useCallback","e","handleOnFocus","handleOnMouseEnter","handleOnMouseLeave","handleOnChange","action","showPicker","useEffect","focus","inputClasses","classnames","styles","iconClasses","createElement","Fragment","_extends","type","disabled","onClick","id","readOnly","MrlSvg","svg","calendar","size"],"mappings":"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"}

package/dist/cjs/components/form/legacy-select/MrlLegacySelect/MrlLegacySelect.js CHANGED Viewed

@@ -10,6 +10,7 @@ var utils = require('../../utils.js');
 var index$2 = require('../../../../utils/layers/index.js');
 var index$1 = require('../../../../hooks/useClickOutside/index.js');
 var MrlLegacySelect_module = require('./MrlLegacySelect.module.scss.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var index = require('../../../../hooks/useCoordinate/index.js');
 var setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
 var MrlPortal = require('../../../portal/MrlPortal.js');
@@ -38,7 +39,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var _excluded = ["attrs", "children", "kind", "labelId", "size"];
+var _excluded = ["attrs", "children", "kind", "labelId", "size", "eventId"];
 /**
  * Creates and exports component class for Mural Select
  *
@@ -54,22 +55,30 @@ var MrlLegacySelect = _ref => {
     labelId = _ref.labelId,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? constants.selectDefaults.size : _ref$size,
+    eventId = _ref.eventId,
     theRest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var selectRef = React__namespace.useRef(null);
   var portalRef = React__namespace.useRef(null);
   var _useSelect = SelectContext.useSelect(),
     dispatch = _useSelect.dispatch,
     dispatchState = _useSelect.state;
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlLegacySelect', eventId);
   var coords = index.useCoordinate(selectRef.current, false, dispatchState.open);
   var handleOpen = React__namespace.useCallback(e => {
     var _theRest$onClick;
     e.stopPropagation();
     if (dispatchState.open) {
+      trackInteraction({
+        action: 'close'
+      });
       dispatch({
         payload: 'mouse',
         type: 'close'
       });
     } else {
+      trackInteraction({
+        action: 'open'
+      });
       dispatch({
         type: 'open'
       });
@@ -77,7 +86,7 @@ var MrlLegacySelect = _ref => {
     (_theRest$onClick = theRest.onClick) === null || _theRest$onClick === void 0 ? void 0 : _theRest$onClick.call(theRest, e);
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [dispatchState.open]);
+  [dispatchState.open, trackInteraction]);
   var handleKeyPress = React__namespace.useCallback(event => {
     var _theRest$onKeyDown;
     // trap tab when we are open

package/dist/cjs/components/form/legacy-select/MrlLegacySelect/MrlLegacySelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlLegacySelect.js","sources":["../../../../../../src/components/form/legacy-select/MrlLegacySelect/MrlLegacySelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { chevronDownFilled, chevronUpFilled } from '@muraldevkit/ds-icons';\nimport { MrlPortal, MrlSvg } from '../../../';\nimport { SelectStates, selectDefaults, InputKinds, InputSizes } from '../../constants';\nimport { useSelect } from '../context/SelectContext';\nimport { getActionFromKey, actions, getUpdatedIndex } from '../../utils';\nimport { AttrsObject, setAttributes } from '../../../../utils';\nimport { useCoordinate } from '../../../../hooks';\nimport { PORTAL_LAYERS } from '../../../../utils/layers';\nimport { useClickOutside } from '../../../../hooks/useClickOutside';\n\nimport styles from './MrlLegacySelect.module.scss';\n\nexport interface MrlLegacySelectProptypes extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Additional function to be run when the value of the select changes /\n\thookChange?: (newValue?: string) => void \| undefined;\n\n\t/* State of the select element based on user actions or permissions /\n\tstate?: SelectStates;\n\n\t/\n\t By default, we will select the first item in the list.\n\t * To select a different option by default, pass that item’s value as the defaultValue to the mrlSelect element.\n\t /\n\tdefaultValue?: string;\n\n\t/\n\t Because this is a custom element, we can't use a standard \"for\" attribute setup. The label\n\t * element needs to have an id and then we reference via the select with aria\n\t /\n\tlabelId: string;\n\n\t/\n\t Changes the visual style of the select trigger; Use 'inline when your select is inline\n\t * with other content\n\t /\n\tkind?: InputKinds;\n\n\t/\n\t Changes the visual size of the select trigger; Currently only supported when kind=\"inline\"\n\t /\n\tsize?: InputSizes;\n\n\t/\n\t Applies additional HTML attributes to the `mrl-select` 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='{ \"tabindex\": \"1\" }'`\n\t /\n\tattrs?: AttrsObject;\n\n\t/\n\t menu - list of options for the user to chose from; expects an `MrlLegacySelectMenu` component\n\t /\n\tchildren?: React.ReactNode;\n\n\t/\n\t optional id - we will generate a unique one if it isn't given.\n\t * ID will be decorated with `${id}-mrl-select` to not conflict with aria controls.\n\t /\n\tid?: string;\n\n\t/\n\t optional value - control which item is selected by passing an `MrlLegacySelectItem` value (overrides `defaultValue`)\n\t * Can be used in conjunction with `hookChange` to create a controlled component.\n\t /\n\tvalue?: string;\n}\n\n/\n Creates and exports component class for Mural Select\n \n @param {MrlLegacySelectProptypes} props the props for your MrlLink\n * @returns {React.ReactElement} an a element containing the text you pass\n /\nexport const MrlLegacySelect = ({\n\tattrs = {},\n\tchildren,\n\tkind = selectDefaults.kind,\n\tlabelId,\n\tsize = selectDefaults.size,\n\t...theRest\n}: MrlLegacySelectProptypes): React.ReactElement => {\n\tconst selectRef = React.useRef<HTMLDivElement>(null);\n\tconst portalRef = React.useRef<HTMLDivElement>(null);\n\tconst { dispatch, state: dispatchState } = useSelect();\n\tconst coords = useCoordinate<HTMLDivElement \| null>(selectRef.current, false, dispatchState.open);\n\n\tconst handleOpen = React.useCallback(\n\t\t(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n\t\t\te.stopPropagation();\n\n\t\t\tif (dispatchState.open) {\n\t\t\t\tdispatch({ payload: 'mouse', type: 'close' });\n\t\t\t} else {\n\t\t\t\tdispatch({ type: 'open' });\n\t\t\t}\n\t\t\ttheRest.onClick?.(e);\n\t\t},\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[dispatchState.open]\n\t);\n\n\tconst handleKeyPress = React.useCallback(\n\t\t(event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t// trap tab when we are open\n\t\t\tif (dispatchState.open && event.key === 'Tab') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst action = getActionFromKey(event, dispatchState.open);\n\t\t\tswitch (action) {\n\t\t\t\tcase actions.Last:\n\t\t\t\tcase actions.First:\n\t\t\t\t\tdispatch({ type: 'open' });\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.Type:\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tdispatch({ type: 'open' });\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.Open:\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tdispatch({ type: 'open' });\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\ttheRest.onKeyDown?.(event);\n\t\t},\n\t\t// only want to rereun this when our keydown changes or our state changes.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[dispatchState, theRest.onKeyDown]\n\t);\n\n\t/\n\t @TODO: move menu key handling to MrlLegacySelectMenu\n\t /\n\tconst handleGlobalKeyPress = React.useCallback(\n\t\t(event: KeyboardEvent) => {\n\t\t\tconst action = getActionFromKey(event as unknown as React.KeyboardEvent, dispatchState.open);\n\t\t\tconst items = portalRef?.current?.querySelectorAll('.mrl-selectItem') \|\| [];\n\t\t\tconst lastItemIndex = items?.length - 1;\n\t\t\tconst firstItemIndex = 0;\n\t\t\tconst focusIndex = dispatchState.focusIndex \|\| 0;\n\n\t\t\tswitch (action) {\n\t\t\t\tcase actions.PageDown:\n\t\t\t\tcase actions.Last:\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tdispatch({\n\t\t\t\t\t\tpayload: getUpdatedIndex(focusIndex, lastItemIndex, action),\n\t\t\t\t\t\ttype: 'focus'\n\t\t\t\t\t});\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.PageUp:\n\t\t\t\tcase actions.First:\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tdispatch({\n\t\t\t\t\t\tpayload: getUpdatedIndex(focusIndex, lastItemIndex, action),\n\t\t\t\t\t\ttype: 'focus'\n\t\t\t\t\t});\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.Previous:\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t// if not our first item then focus next.\n\t\t\t\t\tif (firstItemIndex !== focusIndex) {\n\t\t\t\t\t\tdispatch({\n\t\t\t\t\t\t\tpayload: focusIndex - 1,\n\t\t\t\t\t\t\ttype: 'focus'\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.Next:\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t// if not our last item then focus next.\n\t\t\t\t\tif (lastItemIndex !== focusIndex) {\n\t\t\t\t\t\tdispatch({\n\t\t\t\t\t\t\tpayload: focusIndex + 1,\n\t\t\t\t\t\t\ttype: 'focus'\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.CloseSelect:\n\t\t\t\tcase actions.Close:\n\t\t\t\t\tdispatch({ payload: 'keyboard', type: 'close' });\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t},\n\t\t// only want to change when state changes or we have different children.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[dispatchState, children]\n\t);\n\n\t/\n\t Detects if the select element has moved and closes the menu if it has\n\t \n\t We are using requestAnimationFrame to check the position of the select element\n\t * and compare it to the last known position. If the position has changed, we close\n\t * the menu.\n\t /\n\tconst lastPosition = React.useRef<DOMRect \| null>(null);\n\tconst animationFrameRef = React.useRef<number \| null>(null);\n\n\tReact.useEffect(() => {\n\t\tconst checkPositionChange = () => {\n\t\t\tif (selectRef.current && dispatchState.open) {\n\t\t\t\tconst currentPosition = selectRef.current.getBoundingClientRect();\n\n\t\t\t\t// If the last position is different than the current position, we know that the\n\t\t\t\t// menu has scrolled and we should close it.\n\t\t\t\tif (lastPosition.current && lastPosition.current.y !== currentPosition.y) {\n\t\t\t\t\tlastPosition.current = null;\n\t\t\t\t\tdispatch({ payload: 'mouse', type: 'close' });\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlastPosition.current = currentPosition;\n\t\t\t}\n\t\t\tanimationFrameRef.current = requestAnimationFrame(checkPositionChange);\n\t\t};\n\n\t\tif (dispatchState.open) {\n\t\t\tanimationFrameRef.current = requestAnimationFrame(checkPositionChange);\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (animationFrameRef.current) {\n\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t}\n\t\t};\n\t}, [dispatch, dispatchState.open]);\n\n\t/\n\t Sets focus to select element when it is closed\n\t /\n\tReact.useEffect(() => {\n\t\tif (!dispatchState.open && dispatchState.actionType === 'keyboard') {\n\t\t\tselectRef.current?.focus();\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [dispatchState.open]);\n\n\t/\n\t @TODO: move menu key handling to MrlLegacySelectMenu\n\t /\n\tReact.useEffect(() => {\n\t\tif (dispatchState.disabled \|\| dispatchState.readOnly) {\n\t\t\treturn;\n\t\t}\n\n\t\tdocument?.addEventListener('keydown', handleGlobalKeyPress);\n\n\t\treturn () => {\n\t\t\tdocument?.removeEventListener('keydown', handleGlobalKeyPress);\n\t\t};\n\t}, [handleGlobalKeyPress, dispatchState.disabled, dispatchState.readOnly]);\n\n\t/\n\t This useEffect is responsible for setting the value if it passed in or changed\n\t * when the select is being used as a controlled component\n\t */\n\tReact.useEffect(() => {\n\t\tconst value = dispatchState.controlledValue;\n\n\t\tif (value && value !== dispatchState.selectedItem) {\n\t\t\tdispatch({ payload: value, type: 'select' });\n\n\t\t\tif (children) {\n\t\t\t\t// The first child is an instance of MrlLegacySelectMenu, so let's grab that\n\t\t\t\t// because we are looking to match the value against the children passed\n\t\t\t\t// into the MrlLegacySelectMenu component\n\t\t\t\tconst selectMenu = React.Children.toArray(children)[0];\n\n\t\t\t\tif (React.isValidElement(selectMenu)) {\n\t\t\t\t\t// Now let's grab the children of the array\n\t\t\t\t\tconst menuChildren = React.Children.toArray(selectMenu.props.children);\n\n\t\t\t\t\t// Once we have the children, we want to iterate over them to check to see if\n\t\t\t\t\t// the controlled value passed to the component matches any of the items in the menu\n\t\t\t\t\tconst matchedItem = menuChildren.find(\n\t\t\t\t\t\t(item) =>\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\t\t\t\t\t\tReact.isValidElement(item) && (item as any).props.value === value\n\t\t\t\t\t);\n\n\t\t\t\t\t// If we found a match, we want to set the selected text to the value of the item's children\n\t\t\t\t\tif (matchedItem && React.isValidElement(matchedItem)) {\n\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\t\t\t\t\tconst selectedText = (matchedItem as any).props.children;\n\t\t\t\t\t\tdispatch({ payload: selectedText, type: 'selectedText' });\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [children, dispatchState.controlledValue, dispatchState.selectedItem]);\n\n\tconst attributes = setAttributes(attrs, {\n\t\t'aria-controls': dispatchState.id,\n\t\t'aria-disabled': dispatchState.disabled ? 'true' : 'false',\n\t\t'aria-expanded': dispatchState.open.toString(),\n\t\t'aria-haspopup': 'listbox',\n\t\t'aria-labelledby': labelId,\n\t\trole: 'combobox',\n\t\t...(!dispatchState.disabled && { tabIndex: '0' })\n\t});\n\n\tconst allClasses = classnames('mrl-select', attributes.className, theRest.className, {\n\t\t[styles['mrl-select']]: true,\n\t\t[styles['mrl-select--disabled']]: dispatchState.disabled,\n\t\t[styles['mrl-select--read-only']]: dispatchState.readOnly\n\t});\n\n\tconst selectClasses = classnames('mrl-select-trigger', {\n\t\t[styles['mrl-select-trigger']]: true,\n\t\t[styles['mrl-select-trigger--border']]: kind === 'default',\n\t\t[styles[`mrl-select-trigger--${kind}`]]: kind !== 'default',\n\t\t[styles[`mrl-select-trigger--${size}`]]: size !== 'default'\n\t});\n\n\tconst svgClasses = classnames({\n\t\t[styles['mrl-is--open']]: dispatchState.open,\n\t\t[styles['mrl-select-trigger-indicator']]: true\n\t});\n\n\tconst selectedText = React.useMemo(() => {\n\t\tif (dispatchState.selectedText) {\n\t\t\treturn dispatchState.selectedText;\n\t\t}\n\n\t\tif (children) {\n\t\t\treturn React.Children.toArray(children)[0];\n\t\t}\n\n\t\treturn 'loading...';\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [dispatchState.selectedText]);\n\n\tconst closeSelect = () => dispatch({ payload: 'mouse', type: 'close' });\n\tuseClickOutside(selectRef, portalRef, 'mousedown', closeSelect);\n\n\treturn (\n\t\t<div\n\t\t\t{...attributes}\n\t\t\t{...theRest}\n\t\t\t{...(!dispatchState.disabled && !dispatchState.readOnly && { onClick: handleOpen })}\n\t\t\t{...(!dispatchState.disabled && !dispatchState.readOnly && { onKeyDown: handleKeyPress })}\n\t\t\tdata-value={dispatchState.selectedItem}\n\t\t\tid={dispatchState.id}\n\t\t\tclassName={allClasses}\n\t\t\tref={selectRef}\n\t\t>\n\t\t\t<div className={selectClasses}>\n\t\t\t\t<span>{selectedText}</span>\n\t\t\t\t{!dispatchState.readOnly && (\n\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\tsvg={dispatchState.open ? chevronUpFilled : chevronDownFilled}\n\t\t\t\t\t\tclassName={svgClasses}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{dispatchState.open && (\n\t\t\t\t<MrlPortal id=\"mrl-select-portal\" layer={PORTAL_LAYERS.SELECT}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={portalRef}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tleft: coords.left,\n\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\ttop: coords.top + coords.height,\n\t\t\t\t\t\t\twidth: `${coords.width}px`\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</MrlPortal>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["MrlLegacySelect","_ref","_ref$attrs","attrs","children","_ref$kind","kind","selectDefaults","labelId","_ref$size","size","theRest","_objectWithoutProperties","_excluded","selectRef","React","useRef","portalRef","_useSelect","useSelect","dispatch","dispatchState","state","coords","useCoordinate","current","open","handleOpen","useCallback","e","_theRest$onClick","stopPropagation","payload","type","onClick","call","handleKeyPress","event","_theRest$onKeyDown","key","preventDefault","action","getActionFromKey","actions","Last","First","Type","Open","onKeyDown","handleGlobalKeyPress","_portalRef$current","items","querySelectorAll","lastItemIndex","length","firstItemIndex","focusIndex","PageDown","getUpdatedIndex","PageUp","Previous","Next","CloseSelect","Close","lastPosition","animationFrameRef","useEffect","checkPositionChange","currentPosition","getBoundingClientRect","y","requestAnimationFrame","cancelAnimationFrame","actionType","_selectRef$current","focus","_document","disabled","readOnly","document","addEventListener","_document2","removeEventListener","value","controlledValue","selectedItem","selectMenu","Children","toArray","isValidElement","menuChildren","props","matchedItem","find","item","selectedText","attributes","setAttributes","_objectSpread","id","toString","role","tabIndex","allClasses","classnames","className","styles","selectClasses","concat","svgClasses","useMemo","closeSelect","useClickOutside","createElement","_extends","ref","MrlSvg","svg","chevronUpFilled","chevronDownFilled","MrlPortal","layer","PORTAL_LAYERS","SELECT","style","left","position","top","height","width"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAGC,IAAA,IAOqB;AAAA,EAAA,IAAAC,UAAA,GAAAD,IAAA,CANnDE,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,UAAA;IACVE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,SAAA,GAAAJ,IAAA,CACRK,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAGE,wBAAc,CAACD,IAAI,GAAAD,SAAA;IAC1BG,OAAO,GAAAP,IAAA,CAAPO,OAAO;IAAAC,SAAA,GAAAR,IAAA,CACPS,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAGF,wBAAc,CAACG,IAAI,GAAAD,SAAA;AACvBE,IAAAA,OAAO,GAAAC,iDAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA;AAEV,EAAA,IAAMC,SAAS,GAAGC,gBAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;AACpD,EAAA,IAAMC,SAAS,GAAGF,gBAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;AACpD,EAAA,IAAAE,UAAA,GAA2CC,uBAAS,EAAE;IAA9CC,QAAQ,GAAAF,UAAA,CAARE,QAAQ;IAASC,aAAa,GAAAH,UAAA,CAApBI,KAAK;AACvB,EAAA,IAAMC,MAAM,GAAGC,mBAAa,CAAwBV,SAAS,CAACW,OAAO,EAAE,KAAK,EAAEJ,aAAa,CAACK,IAAI,CAAC;AAEjG,EAAA,IAAMC,UAAU,GAAGZ,gBAAK,CAACa,WAAW,CAClCC,CAA+C,IAAK;AAAA,IAAA,IAAAC,gBAAA;IACpDD,CAAC,CAACE,eAAe,EAAE;IAEnB,IAAIV,aAAa,CAACK,IAAI,EAAE;AACvBN,MAAAA,QAAQ,CAAC;AAAEY,QAAAA,OAAO,EAAE,OAAO;AAAEC,QAAAA,IAAI,EAAE;AAAQ,OAAC,CAAC;AAC9C,IAAA,CAAC,MAAM;AACNb,MAAAA,QAAQ,CAAC;AAAEa,QAAAA,IAAI,EAAE;AAAO,OAAC,CAAC;AAC3B,IAAA;AACA,IAAA,CAAAH,gBAAA,GAAAnB,OAAO,CAACuB,OAAO,MAAA,IAAA,IAAAJ,gBAAA,KAAA,MAAA,GAAA,MAAA,GAAfA,gBAAA,CAAAK,IAAA,CAAAxB,OAAO,EAAWkB,CAAC,CAAC;EACrB,CAAC;AACD;AACA,EAAA,CAACR,aAAa,CAACK,IAAI,CACpB,CAAC;AAED,EAAA,IAAMU,cAAc,GAAGrB,gBAAK,CAACa,WAAW,CACtCS,KAA0C,IAAK;AAAA,IAAA,IAAAC,kBAAA;AAC/C;IACA,IAAIjB,aAAa,CAACK,IAAI,IAAIW,KAAK,CAACE,GAAG,KAAK,KAAK,EAAE;MAC9CF,KAAK,CAACG,cAAc,EAAE;MACtBH,KAAK,CAACN,eAAe,EAAE;AACvB,MAAA;AACD,IAAA;IAEA,IAAMU,MAAM,GAAGC,sBAAgB,CAACL,KAAK,EAAEhB,aAAa,CAACK,IAAI,CAAC;AAC1D,IAAA,QAAQe,MAAM;MACb,KAAKE,aAAO,CAACC,IAAI;MACjB,KAAKD,aAAO,CAACE,KAAK;AACjBzB,QAAAA,QAAQ,CAAC;AAAEa,UAAAA,IAAI,EAAE;AAAO,SAAC,CAAC;AAC1B,QAAA;MACD,KAAKU,aAAO,CAACG,IAAI;QAChBT,KAAK,CAACG,cAAc,EAAE;QACtBH,KAAK,CAACN,eAAe,EAAE;AACvBX,QAAAA,QAAQ,CAAC;AAAEa,UAAAA,IAAI,EAAE;AAAO,SAAC,CAAC;AAC1B,QAAA;MACD,KAAKU,aAAO,CAACI,IAAI;QAChBV,KAAK,CAACG,cAAc,EAAE;QACtBH,KAAK,CAACN,eAAe,EAAE;AACvBX,QAAAA,QAAQ,CAAC;AAAEa,UAAAA,IAAI,EAAE;AAAO,SAAC,CAAC;AAC1B,QAAA;AACF;AAEA,IAAA,CAAAK,kBAAA,GAAA3B,OAAO,CAACqC,SAAS,MAAA,IAAA,IAAAV,kBAAA,KAAA,MAAA,GAAA,MAAA,GAAjBA,kBAAA,CAAAH,IAAA,CAAAxB,OAAO,EAAa0B,KAAK,CAAC;EAC3B,CAAC;AACD;AACA;AACA,EAAA,CAAChB,aAAa,EAAEV,OAAO,CAACqC,SAAS,CAClC,CAAC;;AAED;AACD;AACA;AACC,EAAA,IAAMC,oBAAoB,GAAGlC,gBAAK,CAACa,WAAW,CAC5CS,KAAoB,IAAK;AAAA,IAAA,IAAAa,kBAAA;IACzB,IAAMT,MAAM,GAAGC,sBAAgB,CAACL,KAAK,EAAoChB,aAAa,CAACK,IAAI,CAAC;IAC5F,IAAMyB,KAAK,GAAG,CAAAlC,SAAS,aAATA,SAAS,KAAA,MAAA,GAAA,MAAA,GAAA,CAAAiC,kBAAA,GAATjC,SAAS,CAAEQ,OAAO,MAAA,IAAA,IAAAyB,kBAAA,uBAAlBA,kBAAA,CAAoBE,gBAAgB,CAAC,iBAAiB,CAAC,KAAI,EAAE;IAC3E,IAAMC,aAAa,GAAG,CAAAF,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAEG,MAAM,IAAG,CAAC;IACvC,IAAMC,cAAc,GAAG,CAAC;AACxB,IAAA,IAAMC,UAAU,GAAGnC,aAAa,CAACmC,UAAU,IAAI,CAAC;AAEhD,IAAA,QAAQf,MAAM;MACb,KAAKE,aAAO,CAACc,QAAQ;MACrB,KAAKd,aAAO,CAACC,IAAI;QAChBP,KAAK,CAACN,eAAe,EAAE;QACvBM,KAAK,CAACG,cAAc,EAAE;AACtBpB,QAAAA,QAAQ,CAAC;UACRY,OAAO,EAAE0B,qBAAe,CAACF,UAAU,EAAEH,aAAa,EAAEZ,MAAM,CAAC;AAC3DR,UAAAA,IAAI,EAAE;AACP,SAAC,CAAC;AACF,QAAA;MACD,KAAKU,aAAO,CAACgB,MAAM;MACnB,KAAKhB,aAAO,CAACE,KAAK;QACjBR,KAAK,CAACN,eAAe,EAAE;QACvBM,KAAK,CAACG,cAAc,EAAE;AACtBpB,QAAAA,QAAQ,CAAC;UACRY,OAAO,EAAE0B,qBAAe,CAACF,UAAU,EAAEH,aAAa,EAAEZ,MAAM,CAAC;AAC3DR,UAAAA,IAAI,EAAE;AACP,SAAC,CAAC;AACF,QAAA;MACD,KAAKU,aAAO,CAACiB,QAAQ;QACpBvB,KAAK,CAACN,eAAe,EAAE;QACvBM,KAAK,CAACG,cAAc,EAAE;AACtB;QACA,IAAIe,cAAc,KAAKC,UAAU,EAAE;AAClCpC,UAAAA,QAAQ,CAAC;YACRY,OAAO,EAAEwB,UAAU,GAAG,CAAC;AACvBvB,YAAAA,IAAI,EAAE;AACP,WAAC,CAAC;AACH,QAAA;AAEA,QAAA;MACD,KAAKU,aAAO,CAACkB,IAAI;QAChBxB,KAAK,CAACN,eAAe,EAAE;QACvBM,KAAK,CAACG,cAAc,EAAE;AACtB;QACA,IAAIa,aAAa,KAAKG,UAAU,EAAE;AACjCpC,UAAAA,QAAQ,CAAC;YACRY,OAAO,EAAEwB,UAAU,GAAG,CAAC;AACvBvB,YAAAA,IAAI,EAAE;AACP,WAAC,CAAC;AACH,QAAA;AACA,QAAA;MACD,KAAKU,aAAO,CAACmB,WAAW;MACxB,KAAKnB,aAAO,CAACoB,KAAK;AACjB3C,QAAAA,QAAQ,CAAC;AAAEY,UAAAA,OAAO,EAAE,UAAU;AAAEC,UAAAA,IAAI,EAAE;AAAQ,SAAC,CAAC;AAChD,QAAA;AACF;EACD,CAAC;AACD;AACA;AACA,EAAA,CAACZ,aAAa,EAAEjB,QAAQ,CACzB,CAAC;;AAED;AACD;AACA;AACA;AACA;AACA;AACA;AACC,EAAA,IAAM4D,YAAY,GAAGjD,gBAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;AACvD,EAAA,IAAMiD,iBAAiB,GAAGlD,gBAAK,CAACC,MAAM,CAAgB,IAAI,CAAC;EAE3DD,gBAAK,CAACmD,SAAS,CAAC,MAAM;IACrB,IAAMC,mBAAmB,GAAGA,MAAM;AACjC,MAAA,IAAIrD,SAAS,CAACW,OAAO,IAAIJ,aAAa,CAACK,IAAI,EAAE;QAC5C,IAAM0C,eAAe,GAAGtD,SAAS,CAACW,OAAO,CAAC4C,qBAAqB,EAAE;;AAEjE;AACA;AACA,QAAA,IAAIL,YAAY,CAACvC,OAAO,IAAIuC,YAAY,CAACvC,OAAO,CAAC6C,CAAC,KAAKF,eAAe,CAACE,CAAC,EAAE;UACzEN,YAAY,CAACvC,OAAO,GAAG,IAAI;AAC3BL,UAAAA,QAAQ,CAAC;AAAEY,YAAAA,OAAO,EAAE,OAAO;AAAEC,YAAAA,IAAI,EAAE;AAAQ,WAAC,CAAC;AAC7C,UAAA;AACD,QAAA;QACA+B,YAAY,CAACvC,OAAO,GAAG2C,eAAe;AACvC,MAAA;AACAH,MAAAA,iBAAiB,CAACxC,OAAO,GAAG8C,qBAAqB,CAACJ,mBAAmB,CAAC;IACvE,CAAC;IAED,IAAI9C,aAAa,CAACK,IAAI,EAAE;AACvBuC,MAAAA,iBAAiB,CAACxC,OAAO,GAAG8C,qBAAqB,CAACJ,mBAAmB,CAAC;AACvE,IAAA;AAEA,IAAA,OAAO,MAAM;MACZ,IAAIF,iBAAiB,CAACxC,OAAO,EAAE;AAC9B+C,QAAAA,oBAAoB,CAACP,iBAAiB,CAACxC,OAAO,CAAC;AAChD,MAAA;IACD,CAAC;EACF,CAAC,EAAE,CAACL,QAAQ,EAAEC,aAAa,CAACK,IAAI,CAAC,CAAC;;AAElC;AACD;AACA;EACCX,gBAAK,CAACmD,SAAS,CAAC,MAAM;IACrB,IAAI,CAAC7C,aAAa,CAACK,IAAI,IAAIL,aAAa,CAACoD,UAAU,KAAK,UAAU,EAAE;AAAA,MAAA,IAAAC,kBAAA;AACnE,MAAA,CAAAA,kBAAA,GAAA5D,SAAS,CAACW,OAAO,MAAA,IAAA,IAAAiD,kBAAA,KAAA,MAAA,GAAA,MAAA,GAAjBA,kBAAA,CAAmBC,KAAK,EAAE;AAC3B,IAAA;AACA;AACD,EAAA,CAAC,EAAE,CAACtD,aAAa,CAACK,IAAI,CAAC,CAAC;;AAExB;AACD;AACA;EACCX,gBAAK,CAACmD,SAAS,CAAC,MAAM;AAAA,IAAA,IAAAU,SAAA;AACrB,IAAA,IAAIvD,aAAa,CAACwD,QAAQ,IAAIxD,aAAa,CAACyD,QAAQ,EAAE;AACrD,MAAA;AACD,IAAA;AAEA,IAAA,CAAAF,SAAA,GAAAG,QAAQ,MAAA,IAAA,IAAAH,SAAA,KAAA,MAAA,GAAA,MAAA,GAARA,SAAA,CAAUI,gBAAgB,CAAC,SAAS,EAAE/B,oBAAoB,CAAC;AAE3D,IAAA,OAAO,MAAM;AAAA,MAAA,IAAAgC,UAAA;AACZ,MAAA,CAAAA,UAAA,GAAAF,QAAQ,MAAA,IAAA,IAAAE,UAAA,KAAA,MAAA,GAAA,MAAA,GAARA,UAAA,CAAUC,mBAAmB,CAAC,SAAS,EAAEjC,oBAAoB,CAAC;IAC/D,CAAC;AACF,EAAA,CAAC,EAAE,CAACA,oBAAoB,EAAE5B,aAAa,CAACwD,QAAQ,EAAExD,aAAa,CAACyD,QAAQ,CAAC,CAAC;;AAE1E;AACD;AACA;AACA;EACC/D,gBAAK,CAACmD,SAAS,CAAC,MAAM;AACrB,IAAA,IAAMiB,KAAK,GAAG9D,aAAa,CAAC+D,eAAe;AAE3C,IAAA,IAAID,KAAK,IAAIA,KAAK,KAAK9D,aAAa,CAACgE,YAAY,EAAE;AAClDjE,MAAAA,QAAQ,CAAC;AAAEY,QAAAA,OAAO,EAAEmD,KAAK;AAAElD,QAAAA,IAAI,EAAE;AAAS,OAAC,CAAC;AAE5C,MAAA,IAAI7B,QAAQ,EAAE;AACb;AACA;AACA;AACA,QAAA,IAAMkF,UAAU,GAAGvE,gBAAK,CAACwE,QAAQ,CAACC,OAAO,CAACpF,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEtD,QAAA,iBAAIW,gBAAK,CAAC0E,cAAc,CAACH,UAAU,CAAC,EAAE;AACrC;AACA,UAAA,IAAMI,YAAY,GAAG3E,gBAAK,CAACwE,QAAQ,CAACC,OAAO,CAACF,UAAU,CAACK,KAAK,CAACvF,QAAQ,CAAC;;AAEtE;AACA;AACA,UAAA,IAAMwF,WAAW,GAAGF,YAAY,CAACG,IAAI,CACnCC,IAAI;AACJ;AACA,uBAAA/E,gBAAK,CAAC0E,cAAc,CAACK,IAAI,CAAC,IAAKA,IAAI,CAASH,KAAK,CAACR,KAAK,KAAKA,KAC9D,CAAC;;AAED;UACA,IAAIS,WAAW,iBAAI7E,gBAAK,CAAC0E,cAAc,CAACG,WAAW,CAAC,EAAE;AACrD;AACA,YAAA,IAAMG,aAAY,GAAIH,WAAW,CAASD,KAAK,CAACvF,QAAQ;AACxDgB,YAAAA,QAAQ,CAAC;AAAEY,cAAAA,OAAO,EAAE+D,aAAY;AAAE9D,cAAAA,IAAI,EAAE;AAAe,aAAC,CAAC;AAC1D,UAAA;AACD,QAAA;AACD,MAAA;AACD,IAAA;AACA;AACD,EAAA,CAAC,EAAE,CAAC7B,QAAQ,EAAEiB,aAAa,CAAC+D,eAAe,EAAE/D,aAAa,CAACgE,YAAY,CAAC,CAAC;AAEzE,EAAA,IAAMW,UAAU,GAAGC,2BAAa,CAAC9F,KAAK,EAAA+F,uCAAA,CAAA;IACrC,eAAe,EAAE7E,aAAa,CAAC8E,EAAE;AACjC,IAAA,eAAe,EAAE9E,aAAa,CAACwD,QAAQ,GAAG,MAAM,GAAG,OAAO;AAC1D,IAAA,eAAe,EAAExD,aAAa,CAACK,IAAI,CAAC0E,QAAQ,EAAE;AAC9C,IAAA,eAAe,EAAE,SAAS;AAC1B,IAAA,iBAAiB,EAAE5F,OAAO;AAC1B6F,IAAAA,IAAI,EAAE;AAAU,GAAA,EACZ,CAAChF,aAAa,CAACwD,QAAQ,IAAI;AAAEyB,IAAAA,QAAQ,EAAE;AAAI,GAAC,CAChD,CAAC;AAEF,EAAA,IAAMC,UAAU,GAAGC,2BAAU,CAAC,YAAY,EAAER,UAAU,CAACS,SAAS,EAAE9F,OAAO,CAAC8F,SAAS,EAAE;AACpF,IAAA,CAACC,8BAAM,CAAC,YAAY,CAAC,GAAG,IAAI;AAC5B,IAAA,CAACA,8BAAM,CAAC,sBAAsB,CAAC,GAAGrF,aAAa,CAACwD,QAAQ;AACxD,IAAA,CAAC6B,8BAAM,CAAC,uBAAuB,CAAC,GAAGrF,aAAa,CAACyD;AAClD,GAAC,CAAC;AAEF,EAAA,IAAM6B,aAAa,GAAGH,2BAAU,CAAC,oBAAoB,EAAE;AACtD,IAAA,CAACE,8BAAM,CAAC,oBAAoB,CAAC,GAAG,IAAI;AACpC,IAAA,CAACA,8BAAM,CAAC,4BAA4B,CAAC,GAAGpG,IAAI,KAAK,SAAS;IAC1D,CAACoG,8BAAM,wBAAAE,MAAA,CAAwBtG,IAAI,CAAA,CAAG,GAAGA,IAAI,KAAK,SAAS;IAC3D,CAACoG,8BAAM,wBAAAE,MAAA,CAAwBlG,IAAI,CAAA,CAAG,GAAGA,IAAI,KAAK;AACnD,GAAC,CAAC;EAEF,IAAMmG,UAAU,GAAGL,2BAAU,CAAC;AAC7B,IAAA,CAACE,8BAAM,CAAC,cAAc,CAAC,GAAGrF,aAAa,CAACK,IAAI;AAC5C,IAAA,CAACgF,8BAAM,CAAC,8BAA8B,CAAC,GAAG;AAC3C,GAAC,CAAC;AAEF,EAAA,IAAMX,YAAY,GAAGhF,gBAAK,CAAC+F,OAAO,CAAC,MAAM;IACxC,IAAIzF,aAAa,CAAC0E,YAAY,EAAE;MAC/B,OAAO1E,aAAa,CAAC0E,YAAY;AAClC,IAAA;AAEA,IAAA,IAAI3F,QAAQ,EAAE;MACb,OAAOW,gBAAK,CAACwE,QAAQ,CAACC,OAAO,CAACpF,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC3C,IAAA;AAEA,IAAA,OAAO,YAAY;AACnB;AACD,EAAA,CAAC,EAAE,CAACiB,aAAa,CAAC0E,YAAY,CAAC,CAAC;AAEhC,EAAA,IAAMgB,WAAW,GAAGA,MAAM3F,QAAQ,CAAC;AAAEY,IAAAA,OAAO,EAAE,OAAO;AAAEC,IAAAA,IAAI,EAAE;AAAQ,GAAC,CAAC;EACvE+E,uBAAe,CAAClG,SAAS,EAAEG,SAAS,EAAE,WAAW,EAAE8F,WAAW,CAAC;AAE/D,EAAA,oBACChG,gBAAA,CAAAkG,aAAA,QAAAC,iCAAA,CAAA,EAAA,EACKlB,UAAU,EACVrF,OAAO,EACN,CAACU,aAAa,CAACwD,QAAQ,IAAI,CAACxD,aAAa,CAACyD,QAAQ,IAAI;AAAE5C,IAAAA,OAAO,EAAEP;GAAY,EAC7E,CAACN,aAAa,CAACwD,QAAQ,IAAI,CAACxD,aAAa,CAACyD,QAAQ,IAAI;AAAE9B,IAAAA,SAAS,EAAEZ;GAAgB,EAAA;IACxF,YAAA,EAAYf,aAAa,CAACgE,YAAa;IACvCc,EAAE,EAAE9E,aAAa,CAAC8E,EAAG;AACrBM,IAAAA,SAAS,EAAEF,UAAW;AACtBY,IAAAA,GAAG,EAAErG;GAAU,CAAA,eAEfC,gBAAA,CAAAkG,aAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAEE;AAAc,GAAA,eAC7B5F,gBAAA,CAAAkG,aAAA,CAAA,MAAA,EAAA,IAAA,EAAOlB,YAAmB,CAAC,EAC1B,CAAC1E,aAAa,CAACyD,QAAQ,iBACvB/D,gBAAA,CAAAkG,aAAA,CAACG,aAAM,EAAA;AACNC,IAAAA,GAAG,EAAEhG,aAAa,CAACK,IAAI,GAAG4F,uBAAe,GAAGC,yBAAkB;AAC9Dd,IAAAA,SAAS,EAAEI,UAAW;AACtBnG,IAAAA,IAAI,EAAC;GACL,CAEE,CAAC,EACLW,aAAa,CAACK,IAAI,iBAClBX,gBAAA,CAAAkG,aAAA,CAACO,mBAAS,EAAA;AAACrB,IAAAA,EAAE,EAAC,mBAAmB;IAACsB,KAAK,EAAEC,qBAAa,CAACC;GAAO,eAC7D5G,gBAAA,CAAAkG,aAAA,CAAA,KAAA,EAAA;AACCE,IAAAA,GAAG,EAAElG,SAAU;AACf2G,IAAAA,KAAK,EAAE;MACNC,IAAI,EAAEtG,MAAM,CAACsG,IAAI;AACjBC,MAAAA,QAAQ,EAAE,UAAU;AACpBC,MAAAA,GAAG,EAAExG,MAAM,CAACwG,GAAG,GAAGxG,MAAM,CAACyG,MAAM;AAC/BC,MAAAA,KAAK,EAAA,EAAA,CAAArB,MAAA,CAAKrF,MAAM,CAAC0G,KAAK,EAAA,IAAA;AACvB;GAAE,EAED7H,QACG,CACK,CAER,CAAC;AAER;;;;"}
1	+ {"version":3,"file":"MrlLegacySelect.js","sources":["../../../../../../src/components/form/legacy-select/MrlLegacySelect/MrlLegacySelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { chevronDownFilled, chevronUpFilled } from '@muraldevkit/ds-icons';\nimport { MrlPortal, MrlSvg } from '../../../';\nimport { SelectStates, selectDefaults, InputKinds, InputSizes } from '../../constants';\nimport { useSelect } from '../context/SelectContext';\nimport { getActionFromKey, actions, getUpdatedIndex } from '../../utils';\nimport { AttrsObject, setAttributes } from '../../../../utils';\nimport { useCoordinate } from '../../../../hooks';\nimport { PORTAL_LAYERS } from '../../../../utils/layers';\nimport { useClickOutside } from '../../../../hooks/useClickOutside';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlLegacySelect.module.scss';\n\nexport interface MrlLegacySelectProptypes extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Additional function to be run when the value of the select changes /\n\thookChange?: (newValue?: string) => void \| undefined;\n\n\t/* State of the select element based on user actions or permissions /\n\tstate?: SelectStates;\n\n\t/\n\t By default, we will select the first item in the list.\n\t * To select a different option by default, pass that item’s value as the defaultValue to the mrlSelect element.\n\t /\n\tdefaultValue?: string;\n\n\t/\n\t Because this is a custom element, we can't use a standard \"for\" attribute setup. The label\n\t * element needs to have an id and then we reference via the select with aria\n\t /\n\tlabelId: string;\n\n\t/\n\t Changes the visual style of the select trigger; Use 'inline when your select is inline\n\t * with other content\n\t /\n\tkind?: InputKinds;\n\n\t/\n\t Changes the visual size of the select trigger; Currently only supported when kind=\"inline\"\n\t /\n\tsize?: InputSizes;\n\n\t/\n\t Applies additional HTML attributes to the `mrl-select` 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='{ \"tabindex\": \"1\" }'`\n\t /\n\tattrs?: AttrsObject;\n\n\t/\n\t menu - list of options for the user to chose from; expects an `MrlLegacySelectMenu` component\n\t /\n\tchildren?: React.ReactNode;\n\n\t/\n\t optional id - we will generate a unique one if it isn't given.\n\t * ID will be decorated with `${id}-mrl-select` to not conflict with aria controls.\n\t /\n\tid?: string;\n\n\t/\n\t optional value - control which item is selected by passing an `MrlLegacySelectItem` value (overrides `defaultValue`)\n\t * Can be used in conjunction with `hookChange` to create a controlled component.\n\t /\n\tvalue?: string;\n\n\t/\n\t Enables interaction tracking for this select. Provide a stable, non-PII id\n\t * (e.g. 'workspace-role-select'). When omitted, the select emits no analytics.\n\t /\n\teventId?: string;\n}\n\n/\n Creates and exports component class for Mural Select\n \n @param {MrlLegacySelectProptypes} props the props for your MrlLink\n * @returns {React.ReactElement} an a element containing the text you pass\n /\nexport const MrlLegacySelect = ({\n\tattrs = {},\n\tchildren,\n\tkind = selectDefaults.kind,\n\tlabelId,\n\tsize = selectDefaults.size,\n\teventId,\n\t...theRest\n}: MrlLegacySelectProptypes): React.ReactElement => {\n\tconst selectRef = React.useRef<HTMLDivElement>(null);\n\tconst portalRef = React.useRef<HTMLDivElement>(null);\n\tconst { dispatch, state: dispatchState } = useSelect();\n\tconst trackInteraction = useMrlTrackInteraction('MrlLegacySelect', eventId);\n\tconst coords = useCoordinate<HTMLDivElement \| null>(selectRef.current, false, dispatchState.open);\n\n\tconst handleOpen = React.useCallback(\n\t\t(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n\t\t\te.stopPropagation();\n\n\t\t\tif (dispatchState.open) {\n\t\t\t\ttrackInteraction({ action: 'close' });\n\t\t\t\tdispatch({ payload: 'mouse', type: 'close' });\n\t\t\t} else {\n\t\t\t\ttrackInteraction({ action: 'open' });\n\t\t\t\tdispatch({ type: 'open' });\n\t\t\t}\n\t\t\ttheRest.onClick?.(e);\n\t\t},\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[dispatchState.open, trackInteraction]\n\t);\n\n\tconst handleKeyPress = React.useCallback(\n\t\t(event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t// trap tab when we are open\n\t\t\tif (dispatchState.open && event.key === 'Tab') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst action = getActionFromKey(event, dispatchState.open);\n\t\t\tswitch (action) {\n\t\t\t\tcase actions.Last:\n\t\t\t\tcase actions.First:\n\t\t\t\t\tdispatch({ type: 'open' });\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.Type:\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tdispatch({ type: 'open' });\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.Open:\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tdispatch({ type: 'open' });\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\ttheRest.onKeyDown?.(event);\n\t\t},\n\t\t// only want to rereun this when our keydown changes or our state changes.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[dispatchState, theRest.onKeyDown]\n\t);\n\n\t/\n\t @TODO: move menu key handling to MrlLegacySelectMenu\n\t /\n\tconst handleGlobalKeyPress = React.useCallback(\n\t\t(event: KeyboardEvent) => {\n\t\t\tconst action = getActionFromKey(event as unknown as React.KeyboardEvent, dispatchState.open);\n\t\t\tconst items = portalRef?.current?.querySelectorAll('.mrl-selectItem') \|\| [];\n\t\t\tconst lastItemIndex = items?.length - 1;\n\t\t\tconst firstItemIndex = 0;\n\t\t\tconst focusIndex = dispatchState.focusIndex \|\| 0;\n\n\t\t\tswitch (action) {\n\t\t\t\tcase actions.PageDown:\n\t\t\t\tcase actions.Last:\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tdispatch({\n\t\t\t\t\t\tpayload: getUpdatedIndex(focusIndex, lastItemIndex, action),\n\t\t\t\t\t\ttype: 'focus'\n\t\t\t\t\t});\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.PageUp:\n\t\t\t\tcase actions.First:\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tdispatch({\n\t\t\t\t\t\tpayload: getUpdatedIndex(focusIndex, lastItemIndex, action),\n\t\t\t\t\t\ttype: 'focus'\n\t\t\t\t\t});\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.Previous:\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t// if not our first item then focus next.\n\t\t\t\t\tif (firstItemIndex !== focusIndex) {\n\t\t\t\t\t\tdispatch({\n\t\t\t\t\t\t\tpayload: focusIndex - 1,\n\t\t\t\t\t\t\ttype: 'focus'\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.Next:\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t// if not our last item then focus next.\n\t\t\t\t\tif (lastItemIndex !== focusIndex) {\n\t\t\t\t\t\tdispatch({\n\t\t\t\t\t\t\tpayload: focusIndex + 1,\n\t\t\t\t\t\t\ttype: 'focus'\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase actions.CloseSelect:\n\t\t\t\tcase actions.Close:\n\t\t\t\t\tdispatch({ payload: 'keyboard', type: 'close' });\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t},\n\t\t// only want to change when state changes or we have different children.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[dispatchState, children]\n\t);\n\n\t/\n\t Detects if the select element has moved and closes the menu if it has\n\t \n\t We are using requestAnimationFrame to check the position of the select element\n\t * and compare it to the last known position. If the position has changed, we close\n\t * the menu.\n\t /\n\tconst lastPosition = React.useRef<DOMRect \| null>(null);\n\tconst animationFrameRef = React.useRef<number \| null>(null);\n\n\tReact.useEffect(() => {\n\t\tconst checkPositionChange = () => {\n\t\t\tif (selectRef.current && dispatchState.open) {\n\t\t\t\tconst currentPosition = selectRef.current.getBoundingClientRect();\n\n\t\t\t\t// If the last position is different than the current position, we know that the\n\t\t\t\t// menu has scrolled and we should close it.\n\t\t\t\tif (lastPosition.current && lastPosition.current.y !== currentPosition.y) {\n\t\t\t\t\tlastPosition.current = null;\n\t\t\t\t\tdispatch({ payload: 'mouse', type: 'close' });\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlastPosition.current = currentPosition;\n\t\t\t}\n\t\t\tanimationFrameRef.current = requestAnimationFrame(checkPositionChange);\n\t\t};\n\n\t\tif (dispatchState.open) {\n\t\t\tanimationFrameRef.current = requestAnimationFrame(checkPositionChange);\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (animationFrameRef.current) {\n\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t}\n\t\t};\n\t}, [dispatch, dispatchState.open]);\n\n\t/\n\t Sets focus to select element when it is closed\n\t /\n\tReact.useEffect(() => {\n\t\tif (!dispatchState.open && dispatchState.actionType === 'keyboard') {\n\t\t\tselectRef.current?.focus();\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [dispatchState.open]);\n\n\t/\n\t @TODO: move menu key handling to MrlLegacySelectMenu\n\t /\n\tReact.useEffect(() => {\n\t\tif (dispatchState.disabled \|\| dispatchState.readOnly) {\n\t\t\treturn;\n\t\t}\n\n\t\tdocument?.addEventListener('keydown', handleGlobalKeyPress);\n\n\t\treturn () => {\n\t\t\tdocument?.removeEventListener('keydown', handleGlobalKeyPress);\n\t\t};\n\t}, [handleGlobalKeyPress, dispatchState.disabled, dispatchState.readOnly]);\n\n\t/\n\t This useEffect is responsible for setting the value if it passed in or changed\n\t * when the select is being used as a controlled component\n\t */\n\tReact.useEffect(() => {\n\t\tconst value = dispatchState.controlledValue;\n\n\t\tif (value && value !== dispatchState.selectedItem) {\n\t\t\tdispatch({ payload: value, type: 'select' });\n\n\t\t\tif (children) {\n\t\t\t\t// The first child is an instance of MrlLegacySelectMenu, so let's grab that\n\t\t\t\t// because we are looking to match the value against the children passed\n\t\t\t\t// into the MrlLegacySelectMenu component\n\t\t\t\tconst selectMenu = React.Children.toArray(children)[0];\n\n\t\t\t\tif (React.isValidElement(selectMenu)) {\n\t\t\t\t\t// Now let's grab the children of the array\n\t\t\t\t\tconst menuChildren = React.Children.toArray(selectMenu.props.children);\n\n\t\t\t\t\t// Once we have the children, we want to iterate over them to check to see if\n\t\t\t\t\t// the controlled value passed to the component matches any of the items in the menu\n\t\t\t\t\tconst matchedItem = menuChildren.find(\n\t\t\t\t\t\t(item) =>\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\t\t\t\t\t\tReact.isValidElement(item) && (item as any).props.value === value\n\t\t\t\t\t);\n\n\t\t\t\t\t// If we found a match, we want to set the selected text to the value of the item's children\n\t\t\t\t\tif (matchedItem && React.isValidElement(matchedItem)) {\n\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\t\t\t\t\t\tconst selectedText = (matchedItem as any).props.children;\n\t\t\t\t\t\tdispatch({ payload: selectedText, type: 'selectedText' });\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [children, dispatchState.controlledValue, dispatchState.selectedItem]);\n\n\tconst attributes = setAttributes(attrs, {\n\t\t'aria-controls': dispatchState.id,\n\t\t'aria-disabled': dispatchState.disabled ? 'true' : 'false',\n\t\t'aria-expanded': dispatchState.open.toString(),\n\t\t'aria-haspopup': 'listbox',\n\t\t'aria-labelledby': labelId,\n\t\trole: 'combobox',\n\t\t...(!dispatchState.disabled && { tabIndex: '0' })\n\t});\n\n\tconst allClasses = classnames('mrl-select', attributes.className, theRest.className, {\n\t\t[styles['mrl-select']]: true,\n\t\t[styles['mrl-select--disabled']]: dispatchState.disabled,\n\t\t[styles['mrl-select--read-only']]: dispatchState.readOnly\n\t});\n\n\tconst selectClasses = classnames('mrl-select-trigger', {\n\t\t[styles['mrl-select-trigger']]: true,\n\t\t[styles['mrl-select-trigger--border']]: kind === 'default',\n\t\t[styles[`mrl-select-trigger--${kind}`]]: kind !== 'default',\n\t\t[styles[`mrl-select-trigger--${size}`]]: size !== 'default'\n\t});\n\n\tconst svgClasses = classnames({\n\t\t[styles['mrl-is--open']]: dispatchState.open,\n\t\t[styles['mrl-select-trigger-indicator']]: true\n\t});\n\n\tconst selectedText = React.useMemo(() => {\n\t\tif (dispatchState.selectedText) {\n\t\t\treturn dispatchState.selectedText;\n\t\t}\n\n\t\tif (children) {\n\t\t\treturn React.Children.toArray(children)[0];\n\t\t}\n\n\t\treturn 'loading...';\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [dispatchState.selectedText]);\n\n\tconst closeSelect = () => dispatch({ payload: 'mouse', type: 'close' });\n\tuseClickOutside(selectRef, portalRef, 'mousedown', closeSelect);\n\n\treturn (\n\t\t<div\n\t\t\t{...attributes}\n\t\t\t{...theRest}\n\t\t\t{...(!dispatchState.disabled && !dispatchState.readOnly && { onClick: handleOpen })}\n\t\t\t{...(!dispatchState.disabled && !dispatchState.readOnly && { onKeyDown: handleKeyPress })}\n\t\t\tdata-value={dispatchState.selectedItem}\n\t\t\tid={dispatchState.id}\n\t\t\tclassName={allClasses}\n\t\t\tref={selectRef}\n\t\t>\n\t\t\t<div className={selectClasses}>\n\t\t\t\t<span>{selectedText}</span>\n\t\t\t\t{!dispatchState.readOnly && (\n\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\tsvg={dispatchState.open ? chevronUpFilled : chevronDownFilled}\n\t\t\t\t\t\tclassName={svgClasses}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{dispatchState.open && (\n\t\t\t\t<MrlPortal id=\"mrl-select-portal\" layer={PORTAL_LAYERS.SELECT}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={portalRef}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tleft: coords.left,\n\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\ttop: coords.top + coords.height,\n\t\t\t\t\t\t\twidth: `${coords.width}px`\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</MrlPortal>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["MrlLegacySelect","_ref","_ref$attrs","attrs","children","_ref$kind","kind","selectDefaults","labelId","_ref$size","size","eventId","theRest","_objectWithoutProperties","_excluded","selectRef","React","useRef","portalRef","_useSelect","useSelect","dispatch","dispatchState","state","trackInteraction","useMrlTrackInteraction","coords","useCoordinate","current","open","handleOpen","useCallback","e","_theRest$onClick","stopPropagation","action","payload","type","onClick","call","handleKeyPress","event","_theRest$onKeyDown","key","preventDefault","getActionFromKey","actions","Last","First","Type","Open","onKeyDown","handleGlobalKeyPress","_portalRef$current","items","querySelectorAll","lastItemIndex","length","firstItemIndex","focusIndex","PageDown","getUpdatedIndex","PageUp","Previous","Next","CloseSelect","Close","lastPosition","animationFrameRef","useEffect","checkPositionChange","currentPosition","getBoundingClientRect","y","requestAnimationFrame","cancelAnimationFrame","actionType","_selectRef$current","focus","_document","disabled","readOnly","document","addEventListener","_document2","removeEventListener","value","controlledValue","selectedItem","selectMenu","Children","toArray","isValidElement","menuChildren","props","matchedItem","find","item","selectedText","attributes","setAttributes","_objectSpread","id","toString","role","tabIndex","allClasses","classnames","className","styles","selectClasses","concat","svgClasses","useMemo","closeSelect","useClickOutside","createElement","_extends","ref","MrlSvg","svg","chevronUpFilled","chevronDownFilled","MrlPortal","layer","PORTAL_LAYERS","SELECT","style","left","position","top","height","width"],"mappings":"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"}

package/dist/cjs/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.js CHANGED Viewed

@@ -6,6 +6,7 @@ var classnames = require('classnames');
 var SelectContext = require('../context/SelectContext.js');
 var dsIcons = require('@muraldevkit/ds-icons');
 var MrlLegacySelectItem_module = require('./MrlLegacySelectItem.module.scss.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
 var MrlSvg = require('../../../svg/MrlSvg/MrlSvg.js');
@@ -32,7 +33,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var _excluded = ["attrs", "children", "index", "value", "isDisabled"];
+var _excluded = ["attrs", "children", "index", "value", "isDisabled", "eventId"];
 var getChildText = children => {
   var textContent = '';
@@ -68,6 +69,7 @@ var MrlLegacySelectItem = _ref => {
     index = _ref.index,
     value = _ref.value,
     isDisabled = _ref.isDisabled,
+    eventId = _ref.eventId,
     theRest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var focusRef = React__namespace.useRef(null);
   var _useSelect = SelectContext.useSelect(),
@@ -75,7 +77,12 @@ var MrlLegacySelectItem = _ref => {
     dispatchState = _useSelect.state;
   var disabled = dispatchState.disabled || isDisabled;
   var childText = getChildText(children);
+  var trackInteraction = useMrlAnalytics.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/cjs/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.js.map CHANGED Viewed

	@@ -1 +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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"}
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';\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/cjs/components/form/radio/MrlRadioButton/MrlRadioButton.js CHANGED Viewed

@@ -6,6 +6,7 @@ var classnames = require('classnames');
 var utils = require('../../utils.js');
 var MrlRadioButton_module = require('./MrlRadioButton.module.scss.js');
 var setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlRadioButtonStandalone = require('../MrlRadioButtonStandalone/MrlRadioButtonStandalone.js');
 var MrlLabelWithDescription = require('../../label/MrlLabelWithDescription/MrlLabelWithDescription.js');
@@ -32,7 +33,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-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
@@ -53,10 +54,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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var radioButtonIdRef = React__namespace.useRef(setAttributes.getUniqueId('mrl-radio-button'));
   var descriptionId = "".concat(radioButtonIdRef.current, "-description");
+  var trackInteraction = useMrlAnalytics.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__default.default(className, 'MrlRadioButton', MrlRadioButton_module.default['MrlRadioButton']);
   return /*#__PURE__*/React__namespace.createElement("div", {
     className: allClasses,
@@ -65,6 +82,7 @@ function MrlRadioButton(_ref) {
     id: radioButtonIdRef.current,
     className: allClasses,
     name: name,
+    onChange: handleChange,
     value: value,
     disabled: disabled,
     hasError: !disabled && hasError

package/dist/cjs/components/form/radio/MrlRadioButton/MrlRadioButton.js.map CHANGED Viewed

	@@ -1 +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,iDAAA,~~CAAAf~~,IAAA,~~EAAAgB~~,SAAA,CAAA;EAEP,IAAMC,gBAAgB,GAAGC,gBAAK,CAACC,MAAM,CAASC,yBAAW,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,2BAAU,~~CAACxB~~,SAAS,EAAE,gBAAgB,~~EAAEyB~~,6BAAM,CAAC,gBAAgB,CAAC,CAAC;EAEpF,~~oBACCR~~,gBAAA,~~CAAAS~~,aAAA,CAAA,KAAA,EAAA;~~AAAK1B~~,IAAAA,SAAS,~~EAAEuB~~,UAAW;~~AAACX~~,IAAAA,KAAK,EAAEA;GAAM,~~eACxCK~~,gBAAA,~~CAAAS~~,aAAA,CAACC,iDAAwB,EAAAC,iCAAA,~~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~~,oBAAc,~~CACjBjB~~,IAAI,CAAC,kBAAkB,CAAC,EACxB,~~OAAOZ~~,WAAW,KAAK,QAAQ,~~GAAGmB~~,aAAa,~~GAAGW~~,SACnD,CAAC,CACD,CAAC,~~eACFd~~,gBAAA,~~CAAAS~~,aAAA,CAACM,+CAAuB,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;;;;"}
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';\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/cjs/components/form/radio/MrlRadioButtonStandalone/MrlRadioButtonStandalone.js CHANGED Viewed

@@ -5,6 +5,7 @@ var React = require('react');
 var classnames = require('classnames');
 var MrlRadioButtonStandalone_module = require('./MrlRadioButtonStandalone.module.scss.js');
 var setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -29,7 +30,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-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
@@ -44,12 +45,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 = _rollupPluginBabelHelpers.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__namespace.useRef(id || setAttributes.getUniqueId('mrl-radio'));
+  var trackInteraction = useMrlAnalytics.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.');
   }
@@ -60,6 +77,7 @@ function MrlRadioButtonStandalone(_ref) {
       [MrlRadioButtonStandalone_module.default.hasError]: hasError
     }, className),
     id: radioIdRef.current,
+    onChange: handleChange,
     ref: ref,
     name: name,
     value: value,

package/dist/cjs/components/form/radio/MrlRadioButtonStandalone/MrlRadioButtonStandalone.js.map CHANGED Viewed

	@@ -1 +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,iDAAA,~~CAAAT~~,IAAA,~~EAAAU~~,SAAA,CAAA;AAEP;AACA;AACA,EAAA,IAAMC,UAAU,GAAGC,gBAAK,CAACC,MAAM,~~CAAST~~,EAAE,~~IAAIU~~,yBAAW,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~~,gBAAA,~~CAAAK~~,aAAA,CAAA,MAAA,EAAA;~~IAAMhB~~,SAAS,~~EAAEiB~~,2BAAU,CAACC,uCAAM,CAAC,0BAA0B,CAAC,EAAE,qBAAqB;AAAE,GAAA,~~eACtFP~~,gBAAA,~~CAAAK~~,aAAA,CAAA,OAAA,EAAAG,iCAAA,~~KACKZ~~,IAAI,EAAA;~~IACRP~~,SAAS,~~EAAEiB~~,2BAAU,CACpB,gCAAgC,EAChCC,uCAAM,CAAC,gCAAgC,CAAC,EACxC,0BAA0B,EAC1B;MACC,CAACA,uCAAM,~~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~~,gBAAA,~~CAAAK~~,aAAA,CAAA,MAAA,EAAA;~~AAAMhB~~,IAAAA,SAAS,EAAC;AAAgE,GAAO,CAAC,~~eACxFW~~,gBAAA,~~CAAAK~~,aAAA,CAAA,MAAA,EAAA;~~IACChB~~,SAAS,~~EAAEiB~~,2BAAU,CACpBC,uCAAM,CAAC,qCAAqC,CAAC,EAC7C,qCACD;AAAE,GACI,CACF,CAAC;AAET;;;;"}
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';\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,iDAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA;AAEP;AACA;AACA,EAAA,IAAMC,UAAU,GAAGC,gBAAK,CAACC,MAAM,CAASX,EAAE,IAAIY,yBAAW,CAAC,WAAW,CAAC,CAAC;AAEvE,EAAA,IAAMC,gBAAgB,GAAGC,sCAAsB,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,gBAAA,CAAAU,aAAA,CAAA,MAAA,EAAA;IAAMvB,SAAS,EAAEwB,2BAAU,CAACC,uCAAM,CAAC,0BAA0B,CAAC,EAAE,qBAAqB;AAAE,GAAA,eACtFZ,gBAAA,CAAAU,aAAA,CAAA,OAAA,EAAAG,iCAAA,KACKjB,IAAI,EAAA;IACRT,SAAS,EAAEwB,2BAAU,CACpB,gCAAgC,EAChCC,uCAAM,CAAC,gCAAgC,CAAC,EACxC,0BAA0B,EAC1B;MACC,CAACA,uCAAM,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,gBAAA,CAAAU,aAAA,CAAA,MAAA,EAAA;AAAMvB,IAAAA,SAAS,EAAC;AAAgE,GAAO,CAAC,eACxFa,gBAAA,CAAAU,aAAA,CAAA,MAAA,EAAA;IACCvB,SAAS,EAAEwB,2BAAU,CACpBC,uCAAM,CAAC,qCAAqC,CAAC,EAC7C,qCACD;AAAE,GACI,CACF,CAAC;AAET;;;;"}

package/dist/cjs/components/form/select/MrlCreatableSelect/MrlCreatableSelect.js CHANGED Viewed

@@ -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 CREATABLE_SELECT_CLASS_NAME_PREFIX = 'MrlCreatableSelect';
 var CREATABLE_SELECT_MENU_LIST_CLASS_NAME = "".concat(CREATABLE_SELECT_CLASS_NAME_PREFIX, "__menu-list");
@@ -49,6 +51,11 @@ function MrlCreatableSelect(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('MrlCreatableSelect', eventId);
   var defaultStyles = React__namespace.useMemo(() => {
     return index.getSelectStyles(kind);
   }, [kind]);
@@ -69,9 +76,42 @@ function MrlCreatableSelect(props) {
     classNamePrefix: CREATABLE_SELECT_CLASS_NAME_PREFIX,
     closeMenuOnScroll: closeMenuOnScroll.closeMenuOnScroll(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,