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

package/dist/esm/components/filter/MrlFilter/MrlFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlFilter.js","sources":["../../../../../src/components/filter/MrlFilter/MrlFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MrlFilterContextProvider } from '../MrlFilterContext';\nimport classnames from 'classnames';\nimport styles from './MrlFilter.module.scss';\nimport { MrlRovingTabindex, RovingPropTypes } from '../../rovingTabindex';\nimport { DataQa } from '../../../utils/dataQa';\n\nexport type MrlFilterProps = {\n\t/**\n\t * The label for the radio group.\n\t */\n\tradioGroupLabel: string;\n\t/**\n\t * The children elements to be rendered within the MrlFilter component.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Callback function that is called when the filter value changes.\n\t */\n\tonFilterChange?: (checked: string) => void;\n\t/**\n\t * The default checked value for the filter. It will match the value of the MrlFilterItem.\n\t */\n\tdefaultCheckedValue?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultChecked' | 'defaultValue'> &\n\tRequired<Pick<RovingPropTypes, 'orientation'>> &\n\tDataQa;\n\n/**\n * MrlFilter component.\n *\n * @param props - The component props.\n * @returns The MrlFilter component.\n */\nexport function MrlFilter(props: MrlFilterProps): React.ReactElement {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdefaultCheckedValue,\n\t\tonFilterChange,\n\t\torientation,\n\t\tradioGroupLabel,\n\t\t['data-qa']: dataQa,\n\t\t...rest\n\t} = props;\n\n\treturn (\n\t\t<MrlFilterContextProvider\n\t\t\tdefaultCheckedValue={defaultCheckedValue}\n\t\t\tonFilterChange={onFilterChange}\n\t\t>\n\t\t\t<MrlRovingTabindex orientation={orientation}>\n\t\t\t\t<div\n\t\t\t\t\t{...rest}\n\t\t\t\t\tdata-qa={dataQa}\n\t\t\t\t\taria-label={radioGroupLabel}\n\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\tclassName={classnames(styles['MrlFilter'], 'MrlFilter', className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</MrlRovingTabindex>\n\t\t</MrlFilterContextProvider>\n\t);\n}\n"],"names":["MrlFilter","props","children","className","defaultCheckedValue","onFilterChange","orientation","radioGroupLabel","dataQa","rest","_objectWithoutProperties","_excluded","React","createElement","MrlFilterContextProvider","MrlRovingTabindex","_extends","role","classnames","styles"],"mappings":";;;;;;;;AA4BA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,SAASA,CAACC,KAAqB,EAAsB;AACpE,EAAA,IACCC,QAAQ,GAQLD,KAAK,CARRC,QAAQ;IACRC,SAAS,GAONF,KAAK,CAPRE,SAAS;IACTC,mBAAmB,GAMhBH,KAAK,CANRG,mBAAmB;IACnBC,cAAc,GAKXJ,KAAK,CALRI,cAAc;IACdC,WAAW,GAIRL,KAAK,CAJRK,WAAW;IACXC,eAAe,GAGZN,KAAK,CAHRM,eAAe;IACFC,MAAM,GAEhBP,KAAK,CAFP,SAAS,CAAA;AACPQ,IAAAA,IAAI,GAAAC,wBAAA,CACJT,KAAK,EAAAU,SAAA,CAAA;AAET,EAAA,oBACCC,KAAA,CAAAC,aAAA,CAACC,wBAAwB,EAAA;AACxBV,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,cAAc,EAAEA;AAAe,GAAA,eAE/BO,KAAA,CAAAC,aAAA,CAACE,iBAAiB,EAAA;AAACT,IAAAA,WAAW,EAAEA;AAAY,GAAA,eAC3CM,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAG,QAAA,KACKP,IAAI,EAAA;AACR,IAAA,SAAA,EAASD,MAAO;AAChB,IAAA,YAAA,EAAYD,eAAgB;AAC5BU,IAAAA,IAAI,EAAC,YAAY;IACjBd,SAAS,EAAEe,UAAU,CAACC,MAAM,CAAC,WAAW,CAAC,EAAE,WAAW,EAAEhB,SAAS;GAAE,CAAA,EAElED,QACG,CACa,CACM,CAAC;AAE7B;;;;"}
+{"version":3,"file":"MrlFilter.js","sources":["../../../../../src/components/filter/MrlFilter/MrlFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MrlFilterContextProvider } from '../MrlFilterContext';\nimport classnames from 'classnames';\nimport styles from './MrlFilter.module.scss';\nimport { MrlRovingTabindex, RovingPropTypes } from '../../rovingTabindex';\nimport { DataQa } from '../../../utils/dataQa';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nexport type MrlFilterProps = {\n\t/**\n\t * The label for the radio group.\n\t */\n\tradioGroupLabel: string;\n\t/**\n\t * The children elements to be rendered within the MrlFilter component.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Callback function that is called when the filter value changes.\n\t */\n\tonFilterChange?: (checked: string) => void;\n\t/**\n\t * The default checked value for the filter. It will match the value of the MrlFilterItem.\n\t */\n\tdefaultCheckedValue?: string;\n\t/**\n\t * Enables interaction tracking for this filter group. Provide a stable, non-PII id\n\t * (e.g. 'templates-filter'). When omitted, the filter emits no analytics.\n\t *\n\t * Note: the selected value is never emitted.\n\t */\n\teventId?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultChecked' | 'defaultValue'> &\n\tRequired<Pick<RovingPropTypes, 'orientation'>> &\n\tDataQa;\n\n/**\n * MrlFilter component.\n *\n * @param props - The component props.\n * @returns The MrlFilter component.\n */\nexport function MrlFilter(props: MrlFilterProps): React.ReactElement {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdefaultCheckedValue,\n\t\tonFilterChange,\n\t\torientation,\n\t\tradioGroupLabel,\n\t\teventId,\n\t\t['data-qa']: dataQa,\n\t\t...rest\n\t} = props;\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlFilter', eventId);\n\n\t/**\n\t * Handles a change in the selected filter option.\n\t *\n\t * @param {string} checked - the newly selected value\n\t */\n\tconst handleFilterChange = React.useCallback(\n\t\t(checked: string) => {\n\t\t\t// the selected value is consumer data and is never emitted.\n\t\t\ttrackInteraction({ action: 'change' });\n\n\t\t\tonFilterChange?.(checked);\n\t\t},\n\t\t[onFilterChange, trackInteraction]\n\t);\n\n\treturn (\n\t\t<MrlFilterContextProvider\n\t\t\tdefaultCheckedValue={defaultCheckedValue}\n\t\t\tonFilterChange={handleFilterChange}\n\t\t>\n\t\t\t<MrlRovingTabindex orientation={orientation}>\n\t\t\t\t<div\n\t\t\t\t\t{...rest}\n\t\t\t\t\tdata-qa={dataQa}\n\t\t\t\t\taria-label={radioGroupLabel}\n\t\t\t\t\trole=\"radiogroup\"\n\t\t\t\t\tclassName={classnames(styles['MrlFilter'], 'MrlFilter', className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</MrlRovingTabindex>\n\t\t</MrlFilterContextProvider>\n\t);\n}\n"],"names":["MrlFilter","props","children","className","defaultCheckedValue","onFilterChange","orientation","radioGroupLabel","eventId","dataQa","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","handleFilterChange","React","useCallback","checked","action","createElement","MrlFilterContextProvider","MrlRovingTabindex","_extends","role","classnames","styles"],"mappings":";;;;;;;;;AAoCA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,SAASA,CAACC,KAAqB,EAAsB;AACpE,EAAA,IACCC,QAAQ,GASLD,KAAK,CATRC,QAAQ;IACRC,SAAS,GAQNF,KAAK,CARRE,SAAS;IACTC,mBAAmB,GAOhBH,KAAK,CAPRG,mBAAmB;IACnBC,cAAc,GAMXJ,KAAK,CANRI,cAAc;IACdC,WAAW,GAKRL,KAAK,CALRK,WAAW;IACXC,eAAe,GAIZN,KAAK,CAJRM,eAAe;IACfC,OAAO,GAGJP,KAAK,CAHRO,OAAO;IACMC,MAAM,GAEhBR,KAAK,CAFP,SAAS,CAAA;AACPS,IAAAA,IAAI,GAAAC,wBAAA,CACJV,KAAK,EAAAW,SAAA,CAAA;AAET,EAAA,IAAMC,gBAAgB,GAAGC,sBAAsB,CAAC,WAAW,EAAEN,OAAO,CAAC;;AAErE;AACD;AACA;AACA;AACA;AACC,EAAA,IAAMO,kBAAkB,GAAGC,KAAK,CAACC,WAAW,CAC1CC,OAAe,IAAK;AACpB;AACAL,IAAAA,gBAAgB,CAAC;AAAEM,MAAAA,MAAM,EAAE;AAAS,KAAC,CAAC;AAEtCd,IAAAA,cAAc,aAAdA,cAAc,KAAA,MAAA,GAAA,MAAA,GAAdA,cAAc,CAAGa,OAAO,CAAC;AAC1B,EAAA,CAAC,EACD,CAACb,cAAc,EAAEQ,gBAAgB,CAClC,CAAC;AAED,EAAA,oBACCG,KAAA,CAAAI,aAAA,CAACC,wBAAwB,EAAA;AACxBjB,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,cAAc,EAAEU;AAAmB,GAAA,eAEnCC,KAAA,CAAAI,aAAA,CAACE,iBAAiB,EAAA;AAAChB,IAAAA,WAAW,EAAEA;AAAY,GAAA,eAC3CU,KAAA,CAAAI,aAAA,CAAA,KAAA,EAAAG,QAAA,KACKb,IAAI,EAAA;AACR,IAAA,SAAA,EAASD,MAAO;AAChB,IAAA,YAAA,EAAYF,eAAgB;AAC5BiB,IAAAA,IAAI,EAAC,YAAY;IACjBrB,SAAS,EAAEsB,UAAU,CAACC,MAAM,CAAC,WAAW,CAAC,EAAE,WAAW,EAAEvB,SAAS;GAAE,CAAA,EAElED,QACG,CACa,CACM,CAAC;AAE7B;;;;"}

package/dist/esm/components/filter/MrlFilterItem/MrlFilterItem.js

@@ -3,10 +3,11 @@ import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlFilterItem.module.scss.js';
 import { useMrlFilterContext } from '../MrlFilterContext/MrlFilterContext.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { getUniqueId } from '../../../utils/setAttributes/setAttributes.js';
 import { MrlBadge } from '../../badge/MrlBadge/MrlBadge.js';
 
-var _excluded = ["data-qa", "id", "children", "className", "value", "count"];
+var _excluded = ["data-qa", "id", "children", "className", "value", "count", "eventId"];
 /**
  * MrlFilterItem component.
  *
@@ -20,11 +21,20 @@ function MrlFilterItem(props) {
     className = props.className,
     value = props.value,
     count = props.count,
+    eventId = props.eventId,
     rest = _objectWithoutProperties(props, _excluded);
   var _useMrlFilterContext = useMrlFilterContext(),
     state = _useMrlFilterContext.state,
     dispatch = _useMrlFilterContext.dispatch;
+  var trackInteraction = useMrlTrackInteraction('MrlFilterItem', eventId);
   function handleFilterChange() {
+    // click also focuses the item, so only an actual change in selection is emitted.
+    // the option's value is consumer data and is never emitted.
+    if (state.checked !== value) {
+      trackInteraction({
+        action: 'select'
+      });
+    }
     dispatch({
       payload: value,
       type: 'SET_CHECKED'

package/dist/esm/components/filter/MrlFilterItem/MrlFilterItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlFilterItem.js","sources":["../../../../../src/components/filter/MrlFilterItem/MrlFilterItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlFilterItem.module.scss';\nimport { DataQa } from '../../../utils/dataQa';\nimport { getUniqueId } from '../../../utils';\nimport { useMrlFilterContext } from '../MrlFilterContext';\nimport { MrlBadge } from '../../badge';\n\nexport type MrlFilterItemProps = {\n\t/**\n\t * The filter item's value.\n\t */\n\tvalue: string;\n\t/**\n\t * The content to be displayed within the filter item.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * The count of items for this filter option.\n\t */\n\tcount?: number;\n} & React.ComponentPropsWithoutRef<'span'> &\n\tDataQa;\n\n/**\n * MrlFilterItem component.\n *\n * @param props - The component props.\n * @returns The MrlFilterItem component.\n */\nexport function MrlFilterItem(props: MrlFilterItemProps): React.ReactElement {\n\tconst { ['data-qa']: dataQa, id, children, className, value, count, ...rest } = props;\n\n\tconst { state, dispatch } = useMrlFilterContext();\n\n\tfunction handleFilterChange() {\n\t\tdispatch({\n\t\t\tpayload: value,\n\t\t\ttype: 'SET_CHECKED'\n\t\t});\n\t}\n\n\tconst filterItemIdRef = React.useRef<string>(id || getUniqueId('mrl-filter-item'));\n\tconst isChecked = state.checked === value;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus, jsx-a11y/click-events-have-key-events\n\t\t<span\n\t\t\t{...rest}\n\t\t\tdata-qa={dataQa}\n\t\t\tdata-roving=\"true\"\n\t\t\tonClick={handleFilterChange}\n\t\t\tonFocus={handleFilterChange}\n\t\t\taria-checked={isChecked}\n\t\t\trole=\"radio\"\n\t\t\tid={filterItemIdRef.current}\n\t\t\tclassName={classnames(\n\t\t\t\tstyles['MrlFilterItem'],\n\t\t\t\t'MrlFilterItem',\n\t\t\t\t{\n\t\t\t\t\t[styles['MrlFilterItem-has-count']]: typeof count !== 'undefined'\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t\t{typeof count !== 'undefined' && (\n\t\t\t\t<MrlBadge text={String(count)} aria-label={`, ${count} items`} />\n\t\t\t)}\n\t\t</span>\n\t);\n}\n"],"names":["MrlFilterItem","props","dataQa","id","children","className","value","count","rest","_objectWithoutProperties","_excluded","_useMrlFilterContext","useMrlFilterContext","state","dispatch","handleFilterChange","payload","type","filterItemIdRef","React","useRef","getUniqueId","isChecked","checked","createElement","_extends","onClick","onFocus","role","current","classnames","styles","MrlBadge","text","String","concat"],"mappings":";;;;;;;;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAaA,CAACC,KAAyB,EAAsB;AAC5E,EAAA,IAAqBC,MAAM,GAAqDD,KAAK,CAA5E,SAAS,CAAA;IAAWE,EAAE,GAAiDF,KAAK,CAAxDE,EAAE;IAAEC,QAAQ,GAAuCH,KAAK,CAApDG,QAAQ;IAAEC,SAAS,GAA4BJ,KAAK,CAA1CI,SAAS;IAAEC,KAAK,GAAqBL,KAAK,CAA/BK,KAAK;IAAEC,KAAK,GAAcN,KAAK,CAAxBM,KAAK;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA,CAAA;AAErF,EAAA,IAAAC,oBAAA,GAA4BC,mBAAmB,EAAE;IAAzCC,KAAK,GAAAF,oBAAA,CAALE,KAAK;IAAEC,QAAQ,GAAAH,oBAAA,CAARG,QAAQ;EAEvB,SAASC,kBAAkBA,GAAG;AAC7BD,IAAAA,QAAQ,CAAC;AACRE,MAAAA,OAAO,EAAEV,KAAK;AACdW,MAAAA,IAAI,EAAE;AACP,KAAC,CAAC;AACH,EAAA;AAEA,EAAA,IAAMC,eAAe,GAAGC,KAAK,CAACC,MAAM,CAASjB,EAAE,IAAIkB,WAAW,CAAC,iBAAiB,CAAC,CAAC;AAClF,EAAA,IAAMC,SAAS,GAAGT,KAAK,CAACU,OAAO,KAAKjB,KAAK;AAEzC,EAAA;AAAA;AACC;AACAa,IAAAA,KAAA,CAAAK,aAAA,CAAA,MAAA,EAAAC,QAAA,KACKjB,IAAI,EAAA;AACR,MAAA,SAAA,EAASN,MAAO;AAChB,MAAA,aAAA,EAAY,MAAM;AAClBwB,MAAAA,OAAO,EAAEX,kBAAmB;AAC5BY,MAAAA,OAAO,EAAEZ,kBAAmB;AAC5B,MAAA,cAAA,EAAcO,SAAU;AACxBM,MAAAA,IAAI,EAAC,OAAO;MACZzB,EAAE,EAAEe,eAAe,CAACW,OAAQ;MAC5BxB,SAAS,EAAEyB,UAAU,CACpBC,MAAM,CAAC,eAAe,CAAC,EACvB,eAAe,EACf;AACC,QAAA,CAACA,MAAM,CAAC,yBAAyB,CAAC,GAAG,OAAOxB,KAAK,KAAK;AACvD,OAAC,EACDF,SACD;KAAE,CAAA,EAEDD,QAAQ,EACR,OAAOG,KAAK,KAAK,WAAW,iBAC5BY,KAAA,CAAAK,aAAA,CAACQ,QAAQ,EAAA;AAACC,MAAAA,IAAI,EAAEC,MAAM,CAAC3B,KAAK,CAAE;MAAC,YAAA,EAAA,IAAA,CAAA4B,MAAA,CAAiB5B,KAAK,EAAA,QAAA;AAAS,KAAE,CAE5D;AAAC;AAET;;;;"}
+{"version":3,"file":"MrlFilterItem.js","sources":["../../../../../src/components/filter/MrlFilterItem/MrlFilterItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlFilterItem.module.scss';\nimport { DataQa } from '../../../utils/dataQa';\nimport { getUniqueId } from '../../../utils';\nimport { useMrlFilterContext } from '../MrlFilterContext';\nimport { MrlBadge } from '../../badge';\nimport { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics';\n\nexport type MrlFilterItemProps = {\n\t/**\n\t * The filter item's value.\n\t */\n\tvalue: string;\n\t/**\n\t * The content to be displayed within the filter item.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * The count of items for this filter option.\n\t */\n\tcount?: number;\n\t/**\n\t * Enables interaction tracking for this filter option. Provide a stable, non-PII id\n\t * (e.g. 'templates-category-filter'). When omitted, the option emits no analytics.\n\t *\n\t * Note: the option's value and content are never emitted.\n\t */\n\teventId?: string;\n} & React.ComponentPropsWithoutRef<'span'> &\n\tDataQa;\n\n/**\n * MrlFilterItem component.\n *\n * @param props - The component props.\n * @returns The MrlFilterItem component.\n */\nexport function MrlFilterItem(props: MrlFilterItemProps): React.ReactElement {\n\tconst { ['data-qa']: dataQa, id, children, className, value, count, eventId, ...rest } = props;\n\n\tconst { state, dispatch } = useMrlFilterContext();\n\tconst trackInteraction = useMrlTrackInteraction('MrlFilterItem', eventId);\n\n\tfunction handleFilterChange() {\n\t\t// click also focuses the item, so only an actual change in selection is emitted.\n\t\t// the option's value is consumer data and is never emitted.\n\t\tif (state.checked !== value) {\n\t\t\ttrackInteraction({ action: 'select' });\n\t\t}\n\n\t\tdispatch({\n\t\t\tpayload: value,\n\t\t\ttype: 'SET_CHECKED'\n\t\t});\n\t}\n\n\tconst filterItemIdRef = React.useRef<string>(id || getUniqueId('mrl-filter-item'));\n\tconst isChecked = state.checked === value;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus, jsx-a11y/click-events-have-key-events\n\t\t<span\n\t\t\t{...rest}\n\t\t\tdata-qa={dataQa}\n\t\t\tdata-roving=\"true\"\n\t\t\tonClick={handleFilterChange}\n\t\t\tonFocus={handleFilterChange}\n\t\t\taria-checked={isChecked}\n\t\t\trole=\"radio\"\n\t\t\tid={filterItemIdRef.current}\n\t\t\tclassName={classnames(\n\t\t\t\tstyles['MrlFilterItem'],\n\t\t\t\t'MrlFilterItem',\n\t\t\t\t{\n\t\t\t\t\t[styles['MrlFilterItem-has-count']]: typeof count !== 'undefined'\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t\t{typeof count !== 'undefined' && (\n\t\t\t\t<MrlBadge text={String(count)} aria-label={`, ${count} items`} />\n\t\t\t)}\n\t\t</span>\n\t);\n}\n"],"names":["MrlFilterItem","props","dataQa","id","children","className","value","count","eventId","rest","_objectWithoutProperties","_excluded","_useMrlFilterContext","useMrlFilterContext","state","dispatch","trackInteraction","useMrlTrackInteraction","handleFilterChange","checked","action","payload","type","filterItemIdRef","React","useRef","getUniqueId","isChecked","createElement","_extends","onClick","onFocus","role","current","classnames","styles","MrlBadge","text","String","concat"],"mappings":";;;;;;;;;;AAgCA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAaA,CAACC,KAAyB,EAAsB;AAC5E,EAAA,IAAqBC,MAAM,GAA8DD,KAAK,CAArF,SAAS,CAAA;IAAWE,EAAE,GAA0DF,KAAK,CAAjEE,EAAE;IAAEC,QAAQ,GAAgDH,KAAK,CAA7DG,QAAQ;IAAEC,SAAS,GAAqCJ,KAAK,CAAnDI,SAAS;IAAEC,KAAK,GAA8BL,KAAK,CAAxCK,KAAK;IAAEC,KAAK,GAAuBN,KAAK,CAAjCM,KAAK;IAAEC,OAAO,GAAcP,KAAK,CAA1BO,OAAO;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAKT,KAAK,EAAAU,SAAA,CAAA;AAE9F,EAAA,IAAAC,oBAAA,GAA4BC,mBAAmB,EAAE;IAAzCC,KAAK,GAAAF,oBAAA,CAALE,KAAK;IAAEC,QAAQ,GAAAH,oBAAA,CAARG,QAAQ;AACvB,EAAA,IAAMC,gBAAgB,GAAGC,sBAAsB,CAAC,eAAe,EAAET,OAAO,CAAC;EAEzE,SAASU,kBAAkBA,GAAG;AAC7B;AACA;AACA,IAAA,IAAIJ,KAAK,CAACK,OAAO,KAAKb,KAAK,EAAE;AAC5BU,MAAAA,gBAAgB,CAAC;AAAEI,QAAAA,MAAM,EAAE;AAAS,OAAC,CAAC;AACvC,IAAA;AAEAL,IAAAA,QAAQ,CAAC;AACRM,MAAAA,OAAO,EAAEf,KAAK;AACdgB,MAAAA,IAAI,EAAE;AACP,KAAC,CAAC;AACH,EAAA;AAEA,EAAA,IAAMC,eAAe,GAAGC,KAAK,CAACC,MAAM,CAAStB,EAAE,IAAIuB,WAAW,CAAC,iBAAiB,CAAC,CAAC;AAClF,EAAA,IAAMC,SAAS,GAAGb,KAAK,CAACK,OAAO,KAAKb,KAAK;AAEzC,EAAA;AAAA;AACC;AACAkB,IAAAA,KAAA,CAAAI,aAAA,CAAA,MAAA,EAAAC,QAAA,KACKpB,IAAI,EAAA;AACR,MAAA,SAAA,EAASP,MAAO;AAChB,MAAA,aAAA,EAAY,MAAM;AAClB4B,MAAAA,OAAO,EAAEZ,kBAAmB;AAC5Ba,MAAAA,OAAO,EAAEb,kBAAmB;AAC5B,MAAA,cAAA,EAAcS,SAAU;AACxBK,MAAAA,IAAI,EAAC,OAAO;MACZ7B,EAAE,EAAEoB,eAAe,CAACU,OAAQ;MAC5B5B,SAAS,EAAE6B,UAAU,CACpBC,MAAM,CAAC,eAAe,CAAC,EACvB,eAAe,EACf;AACC,QAAA,CAACA,MAAM,CAAC,yBAAyB,CAAC,GAAG,OAAO5B,KAAK,KAAK;AACvD,OAAC,EACDF,SACD;KAAE,CAAA,EAEDD,QAAQ,EACR,OAAOG,KAAK,KAAK,WAAW,iBAC5BiB,KAAA,CAAAI,aAAA,CAACQ,QAAQ,EAAA;AAACC,MAAAA,IAAI,EAAEC,MAAM,CAAC/B,KAAK,CAAE;MAAC,YAAA,EAAA,IAAA,CAAAgC,MAAA,CAAiBhC,KAAK,EAAA,QAAA;AAAS,KAAE,CAE5D;AAAC;AAET;;;;"}

package/dist/esm/components/form/checkbox/MrlCheckbox/MrlCheckbox.js

@@ -6,10 +6,11 @@ import { MrlCheckboxStandalone } from '../MrlCheckboxStandalone/MrlCheckboxStand
 import { checkInvalidAttributes } from '../../../../utils/checkInvalidAttributes/index.js';
 import styles from './MrlCheckbox.module.scss.js';
 import { getDescribedby } from '../../utils.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { getUniqueId, setAttributes } from '../../../../utils/setAttributes/setAttributes.js';
 import { MrlLabelWithDescription } from '../../label/MrlLabelWithDescription/MrlLabelWithDescription.js';
 
-var _excluded = ["attrs", "className", "description", "hasMultilineLabel", "state", "selected", "icon", "label"];
+var _excluded = ["attrs", "className", "description", "hasMultilineLabel", "state", "selected", "icon", "label", "eventId"];
 /**
  * Form element with an associated text label that allows the user to select one or more options
  * from a provided list
@@ -29,7 +30,9 @@ function MrlCheckbox(_ref) {
     selected = _ref$selected === void 0 ? checkboxDefaults.selected : _ref$selected,
     icon = _ref.icon,
     label = _ref.label,
+    eventId = _ref.eventId,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlTrackInteraction('MrlCheckbox', eventId);
   var checkboxIdRef = React.useRef(getUniqueId('mrl-checkbox'));
   var descriptionId = "".concat(checkboxIdRef.current, "-description");
   var allClasses = classnames(attrs.class || attrs.className, className, 'MrlCheckbox', styles['MrlCheckbox'], {
@@ -47,6 +50,19 @@ function MrlCheckbox(_ref) {
 
   // setAttributes always sets className="" which always triggers the warning message in the MrlCheckboxStandalone component
   delete attributes.className;
+
+  // the consumer's handler arrives through `attrs`, so wrap it before handing the
+  // attributes down to the standalone input.
+  var consumerOnChange = attributes.onChange;
+  attributes.onChange = e => {
+    trackInteraction({
+      action: 'change',
+      metadata: {
+        selected: e.target.checked
+      }
+    });
+    consumerOnChange === null || consumerOnChange === void 0 ? void 0 : consumerOnChange(e);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: allClasses
   }, /*#__PURE__*/React.createElement(MrlCheckboxStandalone, _extends({}, rest, {

package/dist/esm/components/form/checkbox/MrlCheckbox/MrlCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlCheckbox.js","sources":["../../../../../../src/components/form/checkbox/MrlCheckbox/MrlCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, getUniqueId, setAttributes } from '../../../../utils';\nimport {\n\tcheckboxDefaults,\n\tCheckboxSelected,\n\tCheckboxStates,\n\tStaticIconConfig\n} from '../../constants';\nimport { MrlCheckboxStandalone } from '../MrlCheckboxStandalone/MrlCheckboxStandalone';\nimport { checkInvalidAttributes } from '../../../../utils/checkInvalidAttributes';\n\nimport './MrlCheckbox.global.scss';\nimport styles from './MrlCheckbox.module.scss';\nimport { MrlLabelWithDescription } from '../../label/MrlLabelWithDescription';\nimport { getDescribedby } from '../../utils';\n\ninterface MrlCheckboxProps {\n\t/** Applies additional HTML attributes to the checkbox element */\n\tattrs?: AttrsObject;\n\t/** Additional class to add to the container of the checkbox and label */\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 current state of the checkbox input based on user interactions or permissions */\n\tstate?: CheckboxStates;\n\t/** Sets what selection state the checkbox is in. */\n\tselected?: CheckboxSelected;\n\t/** The text to display as the checkbox's label */\n\tlabel: string;\n\t/** Leading label icon */\n\ticon?: StaticIconConfig;\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 MrlCheckbox through 'attrs[\"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 * @example\n\t * <MrlCheckbox attrs={{ 'aria-describedby': customId }} description={\n\t *   <p id={customId}>description</p>\n\t * }>\n\t */\n\tdescription?: string | React.ReactNode;\n}\n\n/**\n * Form element with an associated text label that allows the user to select one or more options\n * from a provided list\n * @param {MrlCheckboxProps} props - the component props\n * @returns a checkbox element with an associated label\n */\nexport function MrlCheckbox({\n\tattrs = {},\n\tclassName,\n\tdescription,\n\thasMultilineLabel = false,\n\tstate = checkboxDefaults.state,\n\tselected = checkboxDefaults.selected,\n\ticon,\n\tlabel,\n\t...rest\n}: MrlCheckboxProps): JSX.Element {\n\tconst checkboxIdRef = React.useRef<string>(getUniqueId('mrl-checkbox'));\n\tconst descriptionId = `${checkboxIdRef.current}-description`;\n\n\tconst allClasses = classnames(\n\t\tattrs.class || attrs.className,\n\t\tclassName,\n\t\t'MrlCheckbox',\n\t\tstyles['MrlCheckbox'],\n\t\t{\n\t\t\t[styles['mrl-is--disabled']]: state === 'disabled',\n\t\t\t[styles['mrl-is--invalid']]: state === 'error',\n\t\t\t[styles['mrl-is--selected']]: selected === 'checked',\n\t\t\t[styles['mrl-is--indeterminate']]: selected === 'indeterminate'\n\t\t}\n\t);\n\n\tcheckInvalidAttributes(attrs);\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs, {\n\t\t...getDescribedby(\n\t\t\tattrs['aria-describedby'],\n\t\t\ttypeof description === 'string' ? descriptionId : undefined\n\t\t),\n\t\tid: checkboxIdRef.current\n\t});\n\n\t// setAttributes always sets className=\"\" which always triggers the warning message in the MrlCheckboxStandalone component\n\tdelete attributes.className;\n\n\treturn (\n\t\t<div className={allClasses}>\n\t\t\t<MrlCheckboxStandalone {...rest} selected={selected} state={state} attrs={attributes} />\n\t\t\t<MrlLabelWithDescription\n\t\t\t\tisDisabled={state === 'disabled'}\n\t\t\t\tisSelected={selected === 'checked'}\n\t\t\t\tisIndeterminate={selected === 'indeterminate'}\n\t\t\t\thasMultilineLabel={hasMultilineLabel}\n\t\t\t\thtmlFor={checkboxIdRef.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":["MrlCheckbox","_ref","_ref$attrs","attrs","className","description","_ref$hasMultilineLabe","hasMultilineLabel","_ref$state","state","checkboxDefaults","_ref$selected","selected","icon","label","rest","_objectWithoutProperties","_excluded","checkboxIdRef","React","useRef","getUniqueId","descriptionId","concat","current","allClasses","classnames","class","styles","checkInvalidAttributes","attributes","setAttributes","_objectSpread","getDescribedby","undefined","id","createElement","MrlCheckboxStandalone","_extends","MrlLabelWithDescription","isDisabled","isSelected","isIndeterminate","htmlFor"],"mappings":"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"}
+{"version":3,"file":"MrlCheckbox.js","sources":["../../../../../../src/components/form/checkbox/MrlCheckbox/MrlCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, getUniqueId, setAttributes } from '../../../../utils';\nimport {\n\tcheckboxDefaults,\n\tCheckboxSelected,\n\tCheckboxStates,\n\tStaticIconConfig\n} from '../../constants';\nimport { MrlCheckboxStandalone } from '../MrlCheckboxStandalone/MrlCheckboxStandalone';\nimport { checkInvalidAttributes } from '../../../../utils/checkInvalidAttributes';\n\nimport './MrlCheckbox.global.scss';\nimport styles from './MrlCheckbox.module.scss';\nimport { MrlLabelWithDescription } from '../../label/MrlLabelWithDescription';\nimport { getDescribedby } from '../../utils';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\ninterface MrlCheckboxProps {\n\t/** Applies additional HTML attributes to the checkbox element */\n\tattrs?: AttrsObject;\n\t/** Additional class to add to the container of the checkbox and label */\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 current state of the checkbox input based on user interactions or permissions */\n\tstate?: CheckboxStates;\n\t/** Sets what selection state the checkbox is in. */\n\tselected?: CheckboxSelected;\n\t/** The text to display as the checkbox's label */\n\tlabel: string;\n\t/** Leading label icon */\n\ticon?: StaticIconConfig;\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 MrlCheckbox through 'attrs[\"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 * @example\n\t * <MrlCheckbox attrs={{ 'aria-describedby': customId }} description={\n\t *   <p id={customId}>description</p>\n\t * }>\n\t */\n\tdescription?: string | React.ReactNode;\n\t/**\n\t * Enables interaction tracking for this checkbox. Provide a stable, non-PII id\n\t * (e.g. 'export-include-comments'). When omitted, the checkbox emits no analytics.\n\t */\n\teventId?: string;\n}\n\n/**\n * Form element with an associated text label that allows the user to select one or more options\n * from a provided list\n * @param {MrlCheckboxProps} props - the component props\n * @returns a checkbox element with an associated label\n */\nexport function MrlCheckbox({\n\tattrs = {},\n\tclassName,\n\tdescription,\n\thasMultilineLabel = false,\n\tstate = checkboxDefaults.state,\n\tselected = checkboxDefaults.selected,\n\ticon,\n\tlabel,\n\teventId,\n\t...rest\n}: MrlCheckboxProps): JSX.Element {\n\tconst trackInteraction = useMrlTrackInteraction('MrlCheckbox', eventId);\n\tconst checkboxIdRef = React.useRef<string>(getUniqueId('mrl-checkbox'));\n\tconst descriptionId = `${checkboxIdRef.current}-description`;\n\n\tconst allClasses = classnames(\n\t\tattrs.class || attrs.className,\n\t\tclassName,\n\t\t'MrlCheckbox',\n\t\tstyles['MrlCheckbox'],\n\t\t{\n\t\t\t[styles['mrl-is--disabled']]: state === 'disabled',\n\t\t\t[styles['mrl-is--invalid']]: state === 'error',\n\t\t\t[styles['mrl-is--selected']]: selected === 'checked',\n\t\t\t[styles['mrl-is--indeterminate']]: selected === 'indeterminate'\n\t\t}\n\t);\n\n\tcheckInvalidAttributes(attrs);\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs, {\n\t\t...getDescribedby(\n\t\t\tattrs['aria-describedby'],\n\t\t\ttypeof description === 'string' ? descriptionId : undefined\n\t\t),\n\t\tid: checkboxIdRef.current\n\t});\n\n\t// setAttributes always sets className=\"\" which always triggers the warning message in the MrlCheckboxStandalone component\n\tdelete attributes.className;\n\n\t// the consumer's handler arrives through `attrs`, so wrap it before handing the\n\t// attributes down to the standalone input.\n\tconst consumerOnChange = attributes.onChange as\n\t\t| ((e: React.ChangeEvent<HTMLInputElement>) => void)\n\t\t| undefined;\n\n\tattributes.onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\ttrackInteraction({ action: 'change', metadata: { selected: e.target.checked } });\n\n\t\tconsumerOnChange?.(e);\n\t};\n\n\treturn (\n\t\t<div className={allClasses}>\n\t\t\t<MrlCheckboxStandalone {...rest} selected={selected} state={state} attrs={attributes} />\n\t\t\t<MrlLabelWithDescription\n\t\t\t\tisDisabled={state === 'disabled'}\n\t\t\t\tisSelected={selected === 'checked'}\n\t\t\t\tisIndeterminate={selected === 'indeterminate'}\n\t\t\t\thasMultilineLabel={hasMultilineLabel}\n\t\t\t\thtmlFor={checkboxIdRef.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":["MrlCheckbox","_ref","_ref$attrs","attrs","className","description","_ref$hasMultilineLabe","hasMultilineLabel","_ref$state","state","checkboxDefaults","_ref$selected","selected","icon","label","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","checkboxIdRef","React","useRef","getUniqueId","descriptionId","concat","current","allClasses","classnames","class","styles","checkInvalidAttributes","attributes","setAttributes","_objectSpread","getDescribedby","undefined","id","consumerOnChange","onChange","e","action","metadata","target","checked","createElement","MrlCheckboxStandalone","_extends","MrlLabelWithDescription","isDisabled","isSelected","isIndeterminate","htmlFor"],"mappings":"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"}

package/dist/esm/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.js

@@ -4,10 +4,11 @@ import classnames from 'classnames';
 import { check, minus } from '@muraldevkit/ds-icons';
 import { checkboxDefaults } from '../../constants.js';
 import styles from './MrlCheckboxStandalone.module.scss.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { getUniqueId, setAttributes } from '../../../../utils/setAttributes/setAttributes.js';
 import { MrlSvg } from '../../../svg/MrlSvg/MrlSvg.js';
 
-var _excluded = ["attrs", "state", "selected"];
+var _excluded = ["attrs", "state", "selected", "eventId"];
 /**
  * Input that allows the user to select one or more options from a provided list.
  * Note, this component does not provide out of the box accessibility for ensuring
@@ -22,7 +23,9 @@ function MrlCheckboxStandalone(_ref) {
     state = _ref$state === void 0 ? checkboxDefaults.state : _ref$state,
     _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? checkboxDefaults.selected : _ref$selected,
+    eventId = _ref.eventId,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var trackInteraction = useMrlTrackInteraction('MrlCheckboxStandalone', eventId);
   // Use attrs.id if the developer passes in a custom id
   // but we need to ensure one exists for accessibility
   var checkboxIdRef = React.useRef(attrs.id || getUniqueId('mrl-checkbox'));
@@ -42,6 +45,25 @@ function MrlCheckboxStandalone(_ref) {
   delete attrs.class;
   delete attrs.className;
   var attributes = setAttributes(attrs);
+
+  // the consumer's handler arrives through `attrs`, so wrap it here rather than
+  // relying on a top-level onChange prop.
+  var consumerOnChange = attributes.onChange;
+
+  /**
+   * Handle change events
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} e - change event
+   */
+  var handleChange = e => {
+    trackInteraction({
+      action: 'change',
+      metadata: {
+        selected: e.target.checked
+      }
+    });
+    consumerOnChange === null || consumerOnChange === void 0 ? void 0 : consumerOnChange(e);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles['MrlCheckboxStandalone'], 'MrlCheckboxStandalone')
   }, /*#__PURE__*/React.createElement("span", {
@@ -51,6 +73,7 @@ function MrlCheckboxStandalone(_ref) {
     checked: selected === 'checked',
     disabled: state === 'disabled',
     id: checkboxIdRef.current,
+    onChange: handleChange,
     ref: inputRef,
     type: "checkbox",
     className: classnames(styles['MrlCheckboxStandalone-input'], 'MrlCheckboxStandalone-input')

package/dist/esm/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlCheckboxStandalone.js","sources":["../../../../../../src/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, getUniqueId, setAttributes } from '../../../../utils';\nimport { check, minus } from '@muraldevkit/ds-icons';\nimport { checkboxDefaults, CheckboxSelected, CheckboxStates } from '../../constants';\nimport { MrlSvg } from '../../../';\n\nimport styles from './MrlCheckboxStandalone.module.scss';\nimport './MrlCheckboxStandalone.global.scss';\n\ninterface MrlCheckboxStandaloneProps {\n\t/** Applies additional HTML attributes to the checkbox element */\n\tattrs?: AttrsObject;\n\t/** The current state of the checkbox input based on user interactions or permissions */\n\tstate?: CheckboxStates;\n\t/** Sets what selection state the checkbox is in. */\n\tselected?: CheckboxSelected;\n}\n\n/**\n * Input that allows the user to select one or more options from a provided list.\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 * @param {MrlCheckboxStandaloneProps} props - the component props\n * @returns a checkbox element\n */\nexport function MrlCheckboxStandalone({\n\tattrs = {},\n\tstate = checkboxDefaults.state,\n\tselected = checkboxDefaults.selected,\n\t...rest\n}: MrlCheckboxStandaloneProps): JSX.Element {\n\t// Use attrs.id if the developer passes in a custom id\n\t// but we need to ensure one exists for accessibility\n\tconst checkboxIdRef = React.useRef<string>(attrs.id || getUniqueId('mrl-checkbox'));\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\n\tif (!(attrs.id || attrs['aria-labelledby'])) {\n\t\tconsole.warn(\n\t\t\t'Warning: Mural Standalone Checkboxes must have either an id or' +\n\t\t\t\t' aria-labelledby attribute for proper accessibility.'\n\t\t);\n\t}\n\n\t// We need to use the ref to set indetermiant attr\n\t// due to not being an intrinsic HTML attr\n\tReact.useEffect(() => {\n\t\tconst indeterminate = selected === 'indeterminate';\n\n\t\tif (inputRef.current) {\n\t\t\tinputRef.current.indeterminate = indeterminate;\n\t\t}\n\t}, [selected]);\n\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs);\n\n\treturn (\n\t\t<div className={classnames(styles['MrlCheckboxStandalone'], 'MrlCheckboxStandalone')}>\n\t\t\t<span className=\"mrl-u-focus-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\t{...rest}\n\t\t\t\t\t{...attributes}\n\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\tchecked={selected === 'checked'}\n\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\tid={checkboxIdRef.current}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlCheckboxStandalone-input'],\n\t\t\t\t\t\t'MrlCheckboxStandalone-input'\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t\t<span className=\"mrl-u-focus-indicator\"></span>\n\t\t\t\t<span\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlCheckboxStandalone-inputDisplay'],\n\t\t\t\t\t\t'MrlCheckboxStandalone-inputDisplay'\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\tsvg={selected !== 'indeterminate' ? check : minus}\n\t\t\t\t\t\tsize=\"auto\"\n\t\t\t\t\t\tclassName={styles['MrlCheckboxStandalone-inputDisplay-icon']}\n\t\t\t\t\t/>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n"],"names":["MrlCheckboxStandalone","_ref","_ref$attrs","attrs","_ref$state","state","checkboxDefaults","_ref$selected","selected","rest","_objectWithoutProperties","_excluded","checkboxIdRef","React","useRef","id","getUniqueId","inputRef","console","warn","useEffect","indeterminate","current","class","className","attributes","setAttributes","createElement","classnames","styles","_extends","checked","disabled","ref","type","MrlSvg","svg","check","minus","size"],"mappings":"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"}
+{"version":3,"file":"MrlCheckboxStandalone.js","sources":["../../../../../../src/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, getUniqueId, setAttributes } from '../../../../utils';\nimport { check, minus } from '@muraldevkit/ds-icons';\nimport { checkboxDefaults, CheckboxSelected, CheckboxStates } from '../../constants';\nimport { MrlSvg } from '../../../';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlCheckboxStandalone.module.scss';\nimport './MrlCheckboxStandalone.global.scss';\n\ninterface MrlCheckboxStandaloneProps {\n\t/** Applies additional HTML attributes to the checkbox element */\n\tattrs?: AttrsObject;\n\t/** The current state of the checkbox input based on user interactions or permissions */\n\tstate?: CheckboxStates;\n\t/** Sets what selection state the checkbox is in. */\n\tselected?: CheckboxSelected;\n\t/**\n\t * Enables interaction tracking for this checkbox. Provide a stable, non-PII id\n\t * (e.g. 'export-include-comments'). When omitted, the checkbox emits no analytics.\n\t */\n\teventId?: string;\n}\n\n/**\n * Input that allows the user to select one or more options from a provided list.\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 * @param {MrlCheckboxStandaloneProps} props - the component props\n * @returns a checkbox element\n */\nexport function MrlCheckboxStandalone({\n\tattrs = {},\n\tstate = checkboxDefaults.state,\n\tselected = checkboxDefaults.selected,\n\teventId,\n\t...rest\n}: MrlCheckboxStandaloneProps): JSX.Element {\n\tconst trackInteraction = useMrlTrackInteraction('MrlCheckboxStandalone', eventId);\n\t// Use attrs.id if the developer passes in a custom id\n\t// but we need to ensure one exists for accessibility\n\tconst checkboxIdRef = React.useRef<string>(attrs.id || getUniqueId('mrl-checkbox'));\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\n\tif (!(attrs.id || attrs['aria-labelledby'])) {\n\t\tconsole.warn(\n\t\t\t'Warning: Mural Standalone Checkboxes must have either an id or' +\n\t\t\t\t' aria-labelledby attribute for proper accessibility.'\n\t\t);\n\t}\n\n\t// We need to use the ref to set indetermiant attr\n\t// due to not being an intrinsic HTML attr\n\tReact.useEffect(() => {\n\t\tconst indeterminate = selected === 'indeterminate';\n\n\t\tif (inputRef.current) {\n\t\t\tinputRef.current.indeterminate = indeterminate;\n\t\t}\n\t}, [selected]);\n\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs);\n\n\t// the consumer's handler arrives through `attrs`, so wrap it here rather than\n\t// relying on a top-level onChange prop.\n\tconst consumerOnChange = attributes.onChange as\n\t\t| ((e: React.ChangeEvent<HTMLInputElement>) => void)\n\t\t| undefined;\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\ttrackInteraction({ action: 'change', metadata: { selected: e.target.checked } });\n\n\t\tconsumerOnChange?.(e);\n\t};\n\n\treturn (\n\t\t<div className={classnames(styles['MrlCheckboxStandalone'], 'MrlCheckboxStandalone')}>\n\t\t\t<span className=\"mrl-u-focus-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\t{...rest}\n\t\t\t\t\t{...attributes}\n\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\tchecked={selected === 'checked'}\n\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\tid={checkboxIdRef.current}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlCheckboxStandalone-input'],\n\t\t\t\t\t\t'MrlCheckboxStandalone-input'\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t\t<span className=\"mrl-u-focus-indicator\"></span>\n\t\t\t\t<span\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlCheckboxStandalone-inputDisplay'],\n\t\t\t\t\t\t'MrlCheckboxStandalone-inputDisplay'\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\tsvg={selected !== 'indeterminate' ? check : minus}\n\t\t\t\t\t\tsize=\"auto\"\n\t\t\t\t\t\tclassName={styles['MrlCheckboxStandalone-inputDisplay-icon']}\n\t\t\t\t\t/>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n"],"names":["MrlCheckboxStandalone","_ref","_ref$attrs","attrs","_ref$state","state","checkboxDefaults","_ref$selected","selected","eventId","rest","_objectWithoutProperties","_excluded","trackInteraction","useMrlTrackInteraction","checkboxIdRef","React","useRef","id","getUniqueId","inputRef","console","warn","useEffect","indeterminate","current","class","className","attributes","setAttributes","consumerOnChange","onChange","handleChange","e","action","metadata","target","checked","createElement","classnames","styles","_extends","disabled","ref","type","MrlSvg","svg","check","minus","size"],"mappings":"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"}

package/dist/esm/components/form/date-picker/MrlDatePicker.js

@@ -4,9 +4,10 @@ import classnames from 'classnames';
 import { calendar } from '@muraldevkit/ds-icons';
 import { useActiveColor } from '../hooks/useActiveColor.js';
 import styles from './MrlDatePicker.module.scss.js';
+import { useMrlTrackInteraction } from '../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
 
-var _excluded = ["autofocus", "className", "inputId", "kind", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "state", "value", "data-qa"];
+var _excluded = ["autofocus", "className", "inputId", "kind", "onBlur", "onChange", "onFocus", "onMouseEnter", "onMouseLeave", "state", "eventId", "value", "data-qa"];
 /**
  * Allows the user to input a date
  *
@@ -22,14 +23,17 @@ var MrlDatePicker = /*#__PURE__*/React.forwardRef(function MrlDatePicker(props,
     _props$kind = props.kind,
     kind = _props$kind === void 0 ? 'default' : _props$kind,
     onBlur = props.onBlur,
+    onChange = props.onChange,
     onFocus = props.onFocus,
     onMouseEnter = props.onMouseEnter,
     onMouseLeave = props.onMouseLeave,
     state = props.state,
+    eventId = props.eventId,
     value = props.value,
     qa = props['data-qa'],
     rest = _objectWithoutProperties(props, _excluded);
   var dateInputRef = React.useRef(null);
+  var trackInteraction = useMrlTrackInteraction('MrlDatePicker', eventId);
   var _useActiveColor = useActiveColor(state),
     hasActiveColor = _useActiveColor.hasActiveColor,
     setHasActiveColor = _useActiveColor.setHasActiveColor;
@@ -58,11 +62,21 @@ var MrlDatePicker = /*#__PURE__*/React.forwardRef(function MrlDatePicker(props,
     }
     setHasActiveColor(false);
   }, [setHasActiveColor, onMouseLeave]);
+  var handleOnChange = React.useCallback(e => {
+    // the selected date is consumer data and is never emitted.
+    trackInteraction({
+      action: 'change'
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  }, [onChange, trackInteraction]);
   var showPicker = React.useCallback(() => {
+    trackInteraction({
+      action: 'open'
+    });
     if (dateInputRef.current && typeof dateInputRef.current.showPicker === 'function') {
       dateInputRef.current.showPicker();
     }
-  }, []);
+  }, [trackInteraction]);
   React.useEffect(() => {
     if (dateInputRef.current && autofocus) {
       dateInputRef.current.focus();
@@ -86,6 +100,7 @@ var MrlDatePicker = /*#__PURE__*/React.forwardRef(function MrlDatePicker(props,
     className: inputClasses,
     disabled: state === 'disabled',
     onBlur: handleOnBlur,
+    onChange: handleOnChange,
     onClick: showPicker,
     onFocus: handleOnFocus,
     onMouseEnter: handleOnMouseEnter,

package/dist/esm/components/form/date-picker/MrlDatePicker.js.map

@@ -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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"}
+{"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/esm/components/form/legacy-select/MrlLegacySelect/MrlLegacySelect.js

@@ -8,12 +8,13 @@ import { getActionFromKey, actions, getUpdatedIndex } from '../../utils.js';
 import { PORTAL_LAYERS } from '../../../../utils/layers/index.js';
 import { useClickOutside } from '../../../../hooks/useClickOutside/index.js';
 import styles from './MrlLegacySelect.module.scss.js';
+import { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics/useMrlAnalytics.js';
 import { useCoordinate } from '../../../../hooks/useCoordinate/index.js';
 import { setAttributes } from '../../../../utils/setAttributes/setAttributes.js';
 import { MrlPortal } from '../../../portal/MrlPortal.js';
 import { MrlSvg } from '../../../svg/MrlSvg/MrlSvg.js';
 
-var _excluded = ["attrs", "children", "kind", "labelId", "size"];
+var _excluded = ["attrs", "children", "kind", "labelId", "size", "eventId"];
 /**
  * Creates and exports component class for Mural Select
  *
@@ -29,22 +30,30 @@ var MrlLegacySelect = _ref => {
     labelId = _ref.labelId,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? selectDefaults.size : _ref$size,
+    eventId = _ref.eventId,
     theRest = _objectWithoutProperties(_ref, _excluded);
   var selectRef = React.useRef(null);
   var portalRef = React.useRef(null);
   var _useSelect = useSelect(),
     dispatch = _useSelect.dispatch,
     dispatchState = _useSelect.state;
+  var trackInteraction = useMrlTrackInteraction('MrlLegacySelect', eventId);
   var coords = useCoordinate(selectRef.current, false, dispatchState.open);
   var handleOpen = React.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'
       });
@@ -52,7 +61,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.useCallback(event => {
     var _theRest$onKeyDown;
     // trap tab when we are open

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

@@ -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,cAAc,CAACD,IAAI,GAAAD,SAAA;IAC1BG,OAAO,GAAAP,IAAA,CAAPO,OAAO;IAAAC,SAAA,GAAAR,IAAA,CACPS,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAGF,cAAc,CAACG,IAAI,GAAAD,SAAA;AACvBE,IAAAA,OAAO,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA;AAEV,EAAA,IAAMC,SAAS,GAAGC,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;AACpD,EAAA,IAAMC,SAAS,GAAGF,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;AACpD,EAAA,IAAAE,UAAA,GAA2CC,SAAS,EAAE;IAA9CC,QAAQ,GAAAF,UAAA,CAARE,QAAQ;IAASC,aAAa,GAAAH,UAAA,CAApBI,KAAK;AACvB,EAAA,IAAMC,MAAM,GAAGC,aAAa,CAAwBV,SAAS,CAACW,OAAO,EAAE,KAAK,EAAEJ,aAAa,CAACK,IAAI,CAAC;AAEjG,EAAA,IAAMC,UAAU,GAAGZ,KAAK,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,KAAK,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,gBAAgB,CAACL,KAAK,EAAEhB,aAAa,CAACK,IAAI,CAAC;AAC1D,IAAA,QAAQe,MAAM;MACb,KAAKE,OAAO,CAACC,IAAI;MACjB,KAAKD,OAAO,CAACE,KAAK;AACjBzB,QAAAA,QAAQ,CAAC;AAAEa,UAAAA,IAAI,EAAE;AAAO,SAAC,CAAC;AAC1B,QAAA;MACD,KAAKU,OAAO,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,OAAO,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,KAAK,CAACa,WAAW,CAC5CS,KAAoB,IAAK;AAAA,IAAA,IAAAa,kBAAA;IACzB,IAAMT,MAAM,GAAGC,gBAAgB,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,OAAO,CAACc,QAAQ;MACrB,KAAKd,OAAO,CAACC,IAAI;QAChBP,KAAK,CAACN,eAAe,EAAE;QACvBM,KAAK,CAACG,cAAc,EAAE;AACtBpB,QAAAA,QAAQ,CAAC;UACRY,OAAO,EAAE0B,eAAe,CAACF,UAAU,EAAEH,aAAa,EAAEZ,MAAM,CAAC;AAC3DR,UAAAA,IAAI,EAAE;AACP,SAAC,CAAC;AACF,QAAA;MACD,KAAKU,OAAO,CAACgB,MAAM;MACnB,KAAKhB,OAAO,CAACE,KAAK;QACjBR,KAAK,CAACN,eAAe,EAAE;QACvBM,KAAK,CAACG,cAAc,EAAE;AACtBpB,QAAAA,QAAQ,CAAC;UACRY,OAAO,EAAE0B,eAAe,CAACF,UAAU,EAAEH,aAAa,EAAEZ,MAAM,CAAC;AAC3DR,UAAAA,IAAI,EAAE;AACP,SAAC,CAAC;AACF,QAAA;MACD,KAAKU,OAAO,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,OAAO,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,OAAO,CAACmB,WAAW;MACxB,KAAKnB,OAAO,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,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;AACvD,EAAA,IAAMiD,iBAAiB,GAAGlD,KAAK,CAACC,MAAM,CAAgB,IAAI,CAAC;EAE3DD,KAAK,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,KAAK,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,KAAK,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,KAAK,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,KAAK,CAACwE,QAAQ,CAACC,OAAO,CAACpF,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEtD,QAAA,iBAAIW,KAAK,CAAC0E,cAAc,CAACH,UAAU,CAAC,EAAE;AACrC;AACA,UAAA,IAAMI,YAAY,GAAG3E,KAAK,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,KAAK,CAAC0E,cAAc,CAACK,IAAI,CAAC,IAAKA,IAAI,CAASH,KAAK,CAACR,KAAK,KAAKA,KAC9D,CAAC;;AAED;UACA,IAAIS,WAAW,iBAAI7E,KAAK,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,aAAa,CAAC9F,KAAK,EAAA+F,cAAA,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,UAAU,CAAC,YAAY,EAAER,UAAU,CAACS,SAAS,EAAE9F,OAAO,CAAC8F,SAAS,EAAE;AACpF,IAAA,CAACC,MAAM,CAAC,YAAY,CAAC,GAAG,IAAI;AAC5B,IAAA,CAACA,MAAM,CAAC,sBAAsB,CAAC,GAAGrF,aAAa,CAACwD,QAAQ;AACxD,IAAA,CAAC6B,MAAM,CAAC,uBAAuB,CAAC,GAAGrF,aAAa,CAACyD;AAClD,GAAC,CAAC;AAEF,EAAA,IAAM6B,aAAa,GAAGH,UAAU,CAAC,oBAAoB,EAAE;AACtD,IAAA,CAACE,MAAM,CAAC,oBAAoB,CAAC,GAAG,IAAI;AACpC,IAAA,CAACA,MAAM,CAAC,4BAA4B,CAAC,GAAGpG,IAAI,KAAK,SAAS;IAC1D,CAACoG,MAAM,wBAAAE,MAAA,CAAwBtG,IAAI,CAAA,CAAG,GAAGA,IAAI,KAAK,SAAS;IAC3D,CAACoG,MAAM,wBAAAE,MAAA,CAAwBlG,IAAI,CAAA,CAAG,GAAGA,IAAI,KAAK;AACnD,GAAC,CAAC;EAEF,IAAMmG,UAAU,GAAGL,UAAU,CAAC;AAC7B,IAAA,CAACE,MAAM,CAAC,cAAc,CAAC,GAAGrF,aAAa,CAACK,IAAI;AAC5C,IAAA,CAACgF,MAAM,CAAC,8BAA8B,CAAC,GAAG;AAC3C,GAAC,CAAC;AAEF,EAAA,IAAMX,YAAY,GAAGhF,KAAK,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,KAAK,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,eAAe,CAAClG,SAAS,EAAEG,SAAS,EAAE,WAAW,EAAE8F,WAAW,CAAC;AAE/D,EAAA,oBACChG,KAAA,CAAAkG,aAAA,QAAAC,QAAA,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,KAAA,CAAAkG,aAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAEE;AAAc,GAAA,eAC7B5F,KAAA,CAAAkG,aAAA,CAAA,MAAA,EAAA,IAAA,EAAOlB,YAAmB,CAAC,EAC1B,CAAC1E,aAAa,CAACyD,QAAQ,iBACvB/D,KAAA,CAAAkG,aAAA,CAACG,MAAM,EAAA;AACNC,IAAAA,GAAG,EAAEhG,aAAa,CAACK,IAAI,GAAG4F,eAAe,GAAGC,iBAAkB;AAC9Dd,IAAAA,SAAS,EAAEI,UAAW;AACtBnG,IAAAA,IAAI,EAAC;GACL,CAEE,CAAC,EACLW,aAAa,CAACK,IAAI,iBAClBX,KAAA,CAAAkG,aAAA,CAACO,SAAS,EAAA;AAACrB,IAAAA,EAAE,EAAC,mBAAmB;IAACsB,KAAK,EAAEC,aAAa,CAACC;GAAO,eAC7D5G,KAAA,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;;;;"}
+{"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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"}