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

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

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

Files changed (273) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlEditableTextInput.js","sources":["../../../../../../src/components/form/text-input/MrlEditableTextInput/MrlEditableTextInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { InputStates, MrlFormInputError } from '../../constants';\nimport { edit, error as errorIcon } from '@muraldevkit/ds-icons';\nimport styles from './MrlEditableTextInput.module.scss';\nimport './MrlEditableTextInput.global.scss';\nimport { useActiveColor } from '../../hooks/useActiveColor';\nimport { useIsEditable } from '../../hooks/useIsEditable';\nimport { MrlEditableTextInputRightButton } from './MrlEditableTextInputRightIcon';\nimport { MrlSvg } from '../../..';\n\ninterface MrlEditableTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n\t/** Id of the text input /\n\tinputId: string;\n\t/\n\t \tValue of the label text assigned to the input.\n\t * This is used to describe to the user what field they will be editing when interacting with the edit buton.\n\t /\n\tinputLabelText: string;\n\t/* The value of the text input used to make it a controlled input /\n\tvalue?: string;\n\t/\n\t The maximum number of characters that the user can enter.\n\t * If undefined or set to \"0\", removes the character counter from the textarea\n\t /\n\tmaxLength?: number;\n\t/* Text placeholder for the text input /\n\tplaceholder?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: InputStates;\n\terror?: MrlFormInputError;\n\t'data-qa': string;\n\t/ Expost isEditable and setIsEditable as optionally controlled state /\n\tisEditable?: boolean;\n\tsetIsEditable?: (isEditableUpdate: boolean) => void;\n\n\t/\n\t Show icon on hover, if true the icon will be hidden and show on hover and focus\n\t * @default false\n\t /\n\tshowIconOnHover?: boolean;\n}\n\nexport const MrlEditableTextInput = React.forwardRef<HTMLButtonElement, MrlEditableTextInputProps>(\n\tfunction MrlEditiableTextInput(\n\t\tprops: MrlEditableTextInputProps,\n\t\tref: React.Ref<HTMLButtonElement>\n\t): JSX.Element {\n\t\tconst {\n\t\t\tinputId,\n\t\t\tmaxLength,\n\t\t\tplaceholder,\n\t\t\tstate,\n\t\t\tvalue,\n\t\t\terror,\n\t\t\tisEditable: controlledIsEditable,\n\t\t\tsetIsEditable: controlledIsEditableUpdate,\n\t\t\tshowIconOnHover = false,\n\t\t\tinputLabelText,\n\t\t\t...attrs\n\t\t} = props;\n\t\t// html id to be reference by input and error description to relay the error for a specific input\n\t\tconst describedById = `${inputId}-description`;\n\t\tconst textInputRef = React.useRef<HTMLInputElement>(null);\n\t\tconst iconRef = React.useRef<HTMLButtonElement>(null);\n\n\t\tconst { hasActiveColor, setHasActiveColor } = useActiveColor(state);\n\t\tconst { isEditable, isEditing, setIsEditable, setIsEditing } = useIsEditable({\n\t\t\tchangeHandler: controlledIsEditableUpdate,\n\t\t\tinitialValue: false,\n\t\t\tstate,\n\t\t\tvalue: controlledIsEditable\n\t\t});\n\n\t\tReact.useImperativeHandle<HTMLButtonElement \| null, HTMLButtonElement \| null>(\n\t\t\tref,\n\t\t\t() => iconRef.current\n\t\t);\n\n\t\tconst unlockInput = React.useCallback(() => {\n\t\t\tsetIsEditable(true);\n\t\t\tsetIsEditing(true);\n\t\t}, [setIsEditable, setIsEditing]);\n\n\t\tconst lockInput = React.useCallback(() => {\n\t\t\tsetIsEditable(false);\n\t\t\tsetIsEditing(false);\n\t\t}, [setIsEditable, setIsEditing]);\n\t\tconst handleOnClick = (e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\tif (!isEditable && !isEditing) {\n\t\t\t\tunlockInput();\n\t\t\t}\n\n\t\t\t/\n\t\t\t * Only to be executed if onClick is provided as a prop\n\t\t\t */\n\t\t\tif (typeof attrs.onClick === 'function') {\n\t\t\t\tattrs.onClick(e);\n\t\t\t}\n\t\t};\n\n\t\tconst handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\tconst { key } = event;\n\n\t\t\t// Selects the item on enter or spacebar and closes the select\n\t\t\tif (key === 'Escape') {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tlockInput();\n\t\t\t\ticonRef.current?.focus();\n\t\t\t}\n\n\t\t\tif (typeof attrs.onKeyDown === 'function') {\n\t\t\t\tattrs.onKeyDown(event);\n\t\t\t}\n\t\t};\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tlockInput();\n\t\t\t\tif (typeof attrs.onBlur === 'function') {\n\t\t\t\t\tattrs.onBlur(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor, lockInput]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tif (typeof attrs.onFocus === 'function') {\n\t\t\t\t\tattrs.onFocus(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tif (typeof attrs.onMouseEnter === 'function') {\n\t\t\t\t\tattrs.onMouseEnter(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseLeave = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tif (typeof attrs.onMouseLeave === 'function') {\n\t\t\t\t\tattrs.onMouseLeave(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (iconRef.current) {\n\t\t\t\tif (attrs.autoFocus) {\n\t\t\t\t\ticonRef.current.focus();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// it should only run on the first render\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, []);\n\n\t\tReact.useEffect(() => {\n\t\t\t// when editiable changes focus to current thingy\n\t\t\tif (isEditable && textInputRef.current) {\n\t\t\t\ttextInputRef.current.focus();\n\t\t\t}\n\t\t}, [isEditable, isEditing]);\n\n\t\tconst inputClasses = classnames(\n\t\t\t'MrlEditableTextInput',\n\t\t\tstyles['MrlEditableTextInput'],\n\t\t\tstyles['mrl-textInput'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextInput-errorMessage']]: state === 'error',\n\t\t\t\t[styles['MrlEditableTextInput-errorIcon']]: state === 'error',\n\t\t\t\t[styles['MrlEditableTextInput--dynamicIcon']]: state !== 'read-only',\n\t\t\t\t[styles['MrlEditableTextInput--readOnly']]: state === 'read-only',\n\t\t\t\t[styles['MrlEditableTextInput--active']]: hasActiveColor,\n\t\t\t\t// if an onClick property is provided, we need to apply the class that allows pointer events\n\t\t\t\t[styles['MrlEditableTextInput--allowOnClick']]: typeof attrs.onClick === 'function'\n\t\t\t},\n\t\t\tattrs.className\n\t\t);\n\n\t\tconst hasCounter = typeof maxLength !== 'undefined' && Number(maxLength) > 0;\n\t\tif (hasCounter && isNaN(Number(maxLength))) {\n\t\t\tthrow new Error('maxLength should have type number');\n\t\t}\n\n\t\tconst hasErrorMessage = state === 'error' && error?.message;\n\n\t\t// do not pass class info to child elements/components\n\t\tdelete attrs.className;\n\n\t\tconst iconClasses = classnames(\n\t\t\t'MrlEditableTextInput-right-button',\n\t\t\tstyles['MrlEditableTextInput-right-button'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextInput-hover-button']]: showIconOnHover\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlEditableTextInput--wrapper'],\n\t\t\t\t\t\t'MrlEditableTextInput--wrapper'\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t{...attrs}\n\t\t\t\t\t\tonClick={handleOnClick}\n\t\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\t\taria-describedby={hasErrorMessage ? describedById : undefined}\n\t\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\tmaxLength={hasCounter ? maxLength : undefined}\n\t\t\t\t\t\tonBlur={handleOnBlur}\n\t\t\t\t\t\tonFocus={handleOnFocus}\n\t\t\t\t\t\tonMouseEnter={handleOnMouseEnter}\n\t\t\t\t\t\tonMouseLeave={handleOnMouseLeave}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadOnly={state === 'read-only' \|\| !isEditable}\n\t\t\t\t\t\ttabIndex={!isEditable ? -1 : 0}\n\t\t\t\t\t\tref={textInputRef}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t/>\n\t\t\t\t\t{state !== 'read-only' && state !== 'disabled' && (\n\t\t\t\t\t\t<span className={iconClasses}>\n\t\t\t\t\t\t\t<MrlEditableTextInputRightButton\n\t\t\t\t\t\t\t\taction={unlockInput}\n\t\t\t\t\t\t\t\ticon={edit}\n\t\t\t\t\t\t\t\tlabel={`Edit: ${inputLabelText \|\| inputId}`}\n\t\t\t\t\t\t\t\tdataQa={attrs['data-qa'] && `${attrs['data-qa']}-edit`}\n\t\t\t\t\t\t\t\thasActiveColor={hasActiveColor \|\| isEditable}\n\t\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\t\tref={iconRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCounter && (\n\t\t\t\t\t<span className={styles['MrlForm-counter']}>\n\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t{value?.length \|\| 0}/{maxLength}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p style={{ display: 'none' }} id={`${inputId}-counter`}>\n\t\t\t\t\t\t\t{`${maxLength - (value?.length \|\| 0)} of ${maxLength} characters remaining`}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{hasErrorMessage && (\n\t\t\t\t\t<span className={styles['MrlEditableTextInput-errorMessage']}>\n\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\tclassName={styles['MrlEditableTextInput-errorIcon']}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tsvg={errorIcon}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span id={describedById}>{`${error?.message}`}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n);\n"],"names":["MrlEditableTextInput","React","forwardRef","MrlEditiableTextInput","props","ref","inputId","maxLength","placeholder","state","value","error","controlledIsEditable","isEditable","controlledIsEditableUpdate","setIsEditable","_props$showIconOnHove","showIconOnHover","inputLabelText","attrs","_objectWithoutProperties","_excluded","describedById","concat","textInputRef","useRef","iconRef","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","_useIsEditable","useIsEditable","changeHandler","initialValue","isEditing","setIsEditing","useImperativeHandle","current","unlockInput","useCallback","lockInput","handleOnClick","e","onClick","handleKeyDown","event","key","_iconRef$current","stopPropagation","preventDefault","focus","onKeyDown","handleOnBlur","onBlur","handleOnFocus","onFocus","handleOnMouseEnter","onMouseEnter","handleOnMouseLeave","onMouseLeave","useEffect","autoFocus","inputClasses","classnames","styles","className","hasCounter","Number","isNaN","Error","hasErrorMessage","message","iconClasses","createElement","Fragment","_extends","type","undefined","disabled","id","readOnly","tabIndex","MrlEditableTextInputRightButton","action","icon","edit","label","dataQa","length","style","display","MrlSvg","svg","errorIcon","size"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,IAAMA,oBAAoB,gBAAGC,gBAAK,CAACC,UAAU,CACnD,SAASC,qBAAqBA,CAC7BC,KAAgC,EAChCC,GAAiC,EACnB;AACd,EAAA,IACCC,OAAO,GAWJF,KAAK,CAXRE,OAAO;IACPC,SAAS,GAUNH,KAAK,CAVRG,SAAS;IACTC,WAAW,GASRJ,KAAK,CATRI,WAAW;IACXC,KAAK,GAQFL,KAAK,CARRK,KAAK;IACLC,KAAK,GAOFN,KAAK,CAPRM,KAAK;IACLC,KAAK,GAMFP,KAAK,CANRO,KAAK;IACOC,oBAAoB,GAK7BR,KAAK,CALRS,UAAU;IACKC,0BAA0B,GAItCV,KAAK,CAJRW,aAAa;IAAAC,qBAAA,GAIVZ,KAAK,CAHRa,eAAe;AAAfA,IAAAA,eAAe,GAAAD,qBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,qBAAA;IACvBE,cAAc,GAEXd,KAAK,CAFRc,cAAc;AACXC,IAAAA,KAAK,GAAAC,iDAAA,CACLhB,KAAK,EAAAiB,SAAA,CAAA;AACT;AACA,EAAA,IAAMC,aAAa,GAAA,EAAA,CAAAC,MAAA,CAAMjB,OAAO,EAAA,cAAA,CAAc;AAC9C,EAAA,IAAMkB,YAAY,GAAGvB,gBAAK,CAACwB,MAAM,CAAmB,IAAI,CAAC;AACzD,EAAA,IAAMC,OAAO,GAAGzB,gBAAK,CAACwB,MAAM,CAAoB,IAAI,CAAC;AAErD,EAAA,IAAAE,eAAA,GAA8CC,6BAAc,CAACnB,KAAK,CAAC;IAA3DoB,cAAc,GAAAF,eAAA,CAAdE,cAAc;IAAEC,iBAAiB,GAAAH,eAAA,CAAjBG,iBAAiB;EACzC,IAAAC,cAAA,GAA+DC,2BAAa,CAAC;AAC5EC,MAAAA,aAAa,EAAEnB,0BAA0B;AACzCoB,MAAAA,YAAY,EAAE,KAAK;MACnBzB,KAAK;AACLC,MAAAA,KAAK,EAAEE;AACR,KAAC,CAAC;IALMC,UAAU,GAAAkB,cAAA,CAAVlB,UAAU;IAAEsB,SAAS,GAAAJ,cAAA,CAATI,SAAS;IAAEpB,aAAa,GAAAgB,cAAA,CAAbhB,aAAa;IAAEqB,YAAY,GAAAL,cAAA,CAAZK,YAAY;EAO1DnC,gBAAK,CAACoC,mBAAmB,CACxBhC,GAAG,EACH,MAAMqB,OAAO,CAACY,OACf,CAAC;AAED,EAAA,IAAMC,WAAW,GAAGtC,gBAAK,CAACuC,WAAW,CAAC,MAAM;IAC3CzB,aAAa,CAAC,IAAI,CAAC;IACnBqB,YAAY,CAAC,IAAI,CAAC;AACnB,EAAA,CAAC,EAAE,CAACrB,aAAa,EAAEqB,YAAY,CAAC,CAAC;AAEjC,EAAA,IAAMK,SAAS,GAAGxC,gBAAK,CAACuC,WAAW,CAAC,MAAM;IACzCzB,aAAa,CAAC,KAAK,CAAC;IACpBqB,YAAY,CAAC,KAAK,CAAC;AACpB,EAAA,CAAC,EAAE,CAACrB,aAAa,EAAEqB,YAAY,CAAC,CAAC;EACjC,IAAMM,aAAa,GAAIC,CAAqC,IAAK;AAChE,IAAA,IAAI,CAAC9B,UAAU,IAAI,CAACsB,SAAS,EAAE;AAC9BI,MAAAA,WAAW,EAAE;AACd,IAAA;;AAEA;AACH;AACA;AACG,IAAA,IAAI,OAAOpB,KAAK,CAACyB,OAAO,KAAK,UAAU,EAAE;AACxCzB,MAAAA,KAAK,CAACyB,OAAO,CAACD,CAAC,CAAC;AACjB,IAAA;EACD,CAAC;EAED,IAAME,aAAa,GAAIC,KAA4C,IAAK;AACvE,IAAA,IAAQC,GAAG,GAAKD,KAAK,CAAbC,GAAG;;AAEX;IACA,IAAIA,GAAG,KAAK,QAAQ,EAAE;AAAA,MAAA,IAAAC,gBAAA;MACrBF,KAAK,CAACG,eAAe,EAAE;MACvBH,KAAK,CAACI,cAAc,EAAE;AACtBT,MAAAA,SAAS,EAAE;AACX,MAAA,CAAAO,gBAAA,GAAAtB,OAAO,CAACY,OAAO,MAAA,IAAA,IAAAU,gBAAA,KAAA,MAAA,GAAA,MAAA,GAAfA,gBAAA,CAAiBG,KAAK,EAAE;AACzB,IAAA;AAEA,IAAA,IAAI,OAAOhC,KAAK,CAACiC,SAAS,KAAK,UAAU,EAAE;AAC1CjC,MAAAA,KAAK,CAACiC,SAAS,CAACN,KAAK,CAAC;AACvB,IAAA;EACD,CAAC;AAED,EAAA,IAAMO,YAAY,GAAGpD,gBAAK,CAACuC,WAAW,CACpCG,CAAqC,IAAK;IAC1Cb,iBAAiB,CAAC,KAAK,CAAC;AACxBW,IAAAA,SAAS,EAAE;AACX,IAAA,IAAI,OAAOtB,KAAK,CAACmC,MAAM,KAAK,UAAU,EAAE;AACvCnC,MAAAA,KAAK,CAACmC,MAAM,CAACX,CAAC,CAAC;AAChB,IAAA;EACD,CAAC,EACD,CAACxB,KAAK,EAAEW,iBAAiB,EAAEW,SAAS,CACrC,CAAC;AAED,EAAA,IAAMc,aAAa,GAAGtD,gBAAK,CAACuC,WAAW,CACrCG,CAAqC,IAAK;IAC1Cb,iBAAiB,CAAC,IAAI,CAAC;AACvB,IAAA,IAAI,OAAOX,KAAK,CAACqC,OAAO,KAAK,UAAU,EAAE;AACxCrC,MAAAA,KAAK,CAACqC,OAAO,CAACb,CAAC,CAAC;AACjB,IAAA;AACD,EAAA,CAAC,EACD,CAACxB,KAAK,EAAEW,iBAAiB,CAC1B,CAAC;AAED,EAAA,IAAM2B,kBAAkB,GAAGxD,gBAAK,CAACuC,WAAW,CAC1CG,CAAqC,IAAK;IAC1Cb,iBAAiB,CAAC,IAAI,CAAC;AACvB,IAAA,IAAI,OAAOX,KAAK,CAACuC,YAAY,KAAK,UAAU,EAAE;AAC7CvC,MAAAA,KAAK,CAACuC,YAAY,CAACf,CAAC,CAAC;AACtB,IAAA;AACD,EAAA,CAAC,EACD,CAACxB,KAAK,EAAEW,iBAAiB,CAC1B,CAAC;AAED,EAAA,IAAM6B,kBAAkB,GAAG1D,gBAAK,CAACuC,WAAW,CAC1CG,CAAqC,IAAK;IAC1Cb,iBAAiB,CAAC,KAAK,CAAC;AACxB,IAAA,IAAI,OAAOX,KAAK,CAACyC,YAAY,KAAK,UAAU,EAAE;AAC7CzC,MAAAA,KAAK,CAACyC,YAAY,CAACjB,CAAC,CAAC;AACtB,IAAA;AACD,EAAA,CAAC,EACD,CAACxB,KAAK,EAAEW,iBAAiB,CAC1B,CAAC;EAED7B,gBAAK,CAAC4D,SAAS,CAAC,MAAM;IACrB,IAAInC,OAAO,CAACY,OAAO,EAAE;MACpB,IAAInB,KAAK,CAAC2C,SAAS,EAAE;AACpBpC,QAAAA,OAAO,CAACY,OAAO,CAACa,KAAK,EAAE;AACxB,MAAA;AACD,IAAA;;AAEA;AACA;EACD,CAAC,EAAE,EAAE,CAAC;EAENlD,gBAAK,CAAC4D,SAAS,CAAC,MAAM;AACrB;AACA,IAAA,IAAIhD,UAAU,IAAIW,YAAY,CAACc,OAAO,EAAE;AACvCd,MAAAA,YAAY,CAACc,OAAO,CAACa,KAAK,EAAE;AAC7B,IAAA;AACD,EAAA,CAAC,EAAE,CAACtC,UAAU,EAAEsB,SAAS,CAAC,CAAC;AAE3B,EAAA,IAAM4B,YAAY,GAAGC,2BAAU,CAC9B,sBAAsB,EACtBC,mCAAM,CAAC,sBAAsB,CAAC,EAC9BA,mCAAM,CAAC,eAAe,CAAC,EACvB;AACC,IAAA,CAACA,mCAAM,CAAC,mCAAmC,CAAC,GAAGxD,KAAK,KAAK,OAAO;AAChE,IAAA,CAACwD,mCAAM,CAAC,gCAAgC,CAAC,GAAGxD,KAAK,KAAK,OAAO;AAC7D,IAAA,CAACwD,mCAAM,CAAC,mCAAmC,CAAC,GAAGxD,KAAK,KAAK,WAAW;AACpE,IAAA,CAACwD,mCAAM,CAAC,gCAAgC,CAAC,GAAGxD,KAAK,KAAK,WAAW;AACjE,IAAA,CAACwD,mCAAM,CAAC,8BAA8B,CAAC,GAAGpC,cAAc;AACxD;IACA,CAACoC,mCAAM,CAAC,oCAAoC,CAAC,GAAG,OAAO9C,KAAK,CAACyB,OAAO,KAAK;AAC1E,GAAC,EACDzB,KAAK,CAAC+C,SACP,CAAC;AAED,EAAA,IAAMC,UAAU,GAAG,OAAO5D,SAAS,KAAK,WAAW,IAAI6D,MAAM,CAAC7D,SAAS,CAAC,GAAG,CAAC;EAC5E,IAAI4D,UAAU,IAAIE,KAAK,CAACD,MAAM,CAAC7D,SAAS,CAAC,CAAC,EAAE;AAC3C,IAAA,MAAM,IAAI+D,KAAK,CAAC,mCAAmC,CAAC;AACrD,EAAA;AAEA,EAAA,IAAMC,eAAe,GAAG9D,KAAK,KAAK,OAAO,KAAIE,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAE6D,OAAO,CAAA;;AAE3D;EACA,OAAOrD,KAAK,CAAC+C,SAAS;EAEtB,IAAMO,WAAW,GAAGT,2BAAU,CAC7B,mCAAmC,EACnCC,mCAAM,CAAC,mCAAmC,CAAC,EAC3C;AACC,IAAA,CAACA,mCAAM,CAAC,mCAAmC,CAAC,GAAGhD;AAChD,GACD,CAAC;EAED,oBACChB,gBAAA,CAAAyE,aAAA,CAAAzE,gBAAA,CAAA0E,QAAA,EAAA,IAAA,eACC1E,gBAAA,CAAAyE,aAAA,CAAA,KAAA,EAAA;IACCR,SAAS,EAAEF,2BAAU,CACpBC,mCAAM,CAAC,+BAA+B,CAAC,EACvC,+BACD;AAAE,GAAA,eAEFhE,gBAAA,CAAAyE,aAAA,CAAA,OAAA,EAAAE,iCAAA,CAAA;AACCC,IAAAA,IAAI,EAAC;AAAM,GAAA,EACP1D,KAAK,EAAA;AACTyB,IAAAA,OAAO,EAAEF,aAAc;IACvB,cAAA,EAAcjC,KAAK,KAAK,OAAQ;AAChC,IAAA,kBAAA,EAAkB8D,eAAe,GAAGjD,aAAa,GAAGwD,SAAU;AAC9DZ,IAAAA,SAAS,EAAEH,YAAa;IACxBgB,QAAQ,EAAEtE,KAAK,KAAK,UAAW;AAC/BF,IAAAA,SAAS,EAAE4D,UAAU,GAAG5D,SAAS,GAAGuE,SAAU;AAC9CxB,IAAAA,MAAM,EAAED,YAAa;AACrBG,IAAAA,OAAO,EAAED,aAAc;AACvBG,IAAAA,YAAY,EAAED,kBAAmB;AACjCG,IAAAA,YAAY,EAAED,kBAAmB;AACjCP,IAAAA,SAAS,EAAEP,aAAc;AACzBmC,IAAAA,EAAE,EAAE1E,OAAQ;AACZE,IAAAA,WAAW,EAAEA,WAAY;AACzByE,IAAAA,QAAQ,EAAExE,KAAK,KAAK,WAAW,IAAI,CAACI,UAAW;AAC/CqE,IAAAA,QAAQ,EAAE,CAACrE,UAAU,GAAG,EAAE,GAAG,CAAE;AAC/BR,IAAAA,GAAG,EAAEmB,YAAa;AAClBd,IAAAA,KAAK,EAAEA;AAAM,GAAA,CACb,CAAC,EACDD,KAAK,KAAK,WAAW,IAAIA,KAAK,KAAK,UAAU,iBAC7CR,gBAAA,CAAAyE,aAAA,CAAA,MAAA,EAAA;AAAMR,IAAAA,SAAS,EAAEO;AAAY,GAAA,eAC5BxE,gBAAA,CAAAyE,aAAA,CAACS,6DAA+B,EAAA;AAC/BC,IAAAA,MAAM,EAAE7C,WAAY;AACpB8C,IAAAA,IAAI,EAAEC,YAAK;AACXC,IAAAA,KAAK,WAAAhE,MAAA,CAAWL,cAAc,IAAIZ,OAAO,CAAG;AAC5CkF,IAAAA,MAAM,EAAErE,KAAK,CAAC,SAAS,CAAC,IAAA,EAAA,CAAAI,MAAA,CAAOJ,KAAK,CAAC,SAAS,CAAC,EAAA,OAAA,CAAQ;IACvDU,cAAc,EAAEA,cAAc,IAAIhB,UAAW;AAC7CiB,IAAAA,iBAAiB,EAAEA,iBAAkB;AACrCzB,IAAAA,GAAG,EAAEqB;GACL,CACI,CAEH,CAAC,EACLyC,UAAU,iBACVlE,gBAAA,CAAAyE,aAAA,CAAA,MAAA,EAAA;IAAMR,SAAS,EAAED,mCAAM,CAAC,iBAAiB;GAAE,eAC1ChE,gBAAA,CAAAyE,aAAA,CAAA,MAAA,EAAA;IAAM,aAAA,EAAY;AAAM,GAAA,EACtB,CAAAhE,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAE+E,MAAM,KAAI,CAAC,EAAC,GAAC,EAAClF,SACjB,CAAC,eACPN,gBAAA,CAAAyE,aAAA,CAAA,GAAA,EAAA;AAAGgB,IAAAA,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE;KAAS;IAACX,EAAE,EAAA,EAAA,CAAAzD,MAAA,CAAKjB,OAAO,EAAA,UAAA;GAAW,EAAA,EAAA,CAAAiB,MAAA,CACnDhB,SAAS,IAAI,CAAAG,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAE+E,MAAM,KAAI,CAAC,CAAC,EAAA,MAAA,CAAA,CAAAlE,MAAA,CAAOhB,SAAS,EAAA,uBAAA,CAClD,CACE,CACN,EACAgE,eAAe,iBACftE,gBAAA,CAAAyE,aAAA,CAAA,MAAA,EAAA;IAAMR,SAAS,EAAED,mCAAM,CAAC,mCAAmC;AAAE,GAAA,eAC5DhE,gBAAA,CAAAyE,aAAA,CAACkB,aAAM,EAAA;AACN1B,IAAAA,SAAS,EAAED,mCAAM,CAAC,gCAAgC,CAAE;AACpD,IAAA,aAAA,EAAY,MAAM;AAClB4B,IAAAA,GAAG,EAAEC,aAAU;AACfC,IAAAA,IAAI,EAAC;AAAO,GACZ,CAAC,eACF9F,gBAAA,CAAAyE,aAAA,CAAA,MAAA,EAAA;AAAMM,IAAAA,EAAE,EAAE1D;AAAc,GAAA,EAAA,EAAA,CAAAC,MAAA,CAAKZ,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAE6D,OAAO,CAAS,CAC/C,CAEN,CAAC;AAEL,CACD;;;;"}
1	+ {"version":3,"file":"MrlEditableTextInput.js","sources":["../../../../../../src/components/form/text-input/MrlEditableTextInput/MrlEditableTextInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { InputStates, MrlFormInputError } from '../../constants';\nimport { edit, error as errorIcon } from '@muraldevkit/ds-icons';\nimport styles from './MrlEditableTextInput.module.scss';\nimport './MrlEditableTextInput.global.scss';\nimport { useActiveColor } from '../../hooks/useActiveColor';\nimport { useIsEditable } from '../../hooks/useIsEditable';\nimport { MrlEditableTextInputRightButton } from './MrlEditableTextInputRightIcon';\nimport { MrlSvg } from '../../..';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\ninterface MrlEditableTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n\t/** Id of the text input /\n\tinputId: string;\n\t/\n\t \tValue of the label text assigned to the input.\n\t * This is used to describe to the user what field they will be editing when interacting with the edit buton.\n\t /\n\tinputLabelText: string;\n\t/* The value of the text input used to make it a controlled input /\n\tvalue?: string;\n\t/\n\t The maximum number of characters that the user can enter.\n\t * If undefined or set to \"0\", removes the character counter from the textarea\n\t /\n\tmaxLength?: number;\n\t/* Text placeholder for the text input /\n\tplaceholder?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: InputStates;\n\terror?: MrlFormInputError;\n\t'data-qa': string;\n\t/ Expost isEditable and setIsEditable as optionally controlled state /\n\tisEditable?: boolean;\n\tsetIsEditable?: (isEditableUpdate: boolean) => void;\n\n\t/\n\t Show icon on hover, if true the icon will be hidden and show on hover and focus\n\t * @default false\n\t /\n\tshowIconOnHover?: boolean;\n\n\t/\n\t Enables interaction tracking for this input. Provide a stable, non-PII id\n\t * (e.g. 'mural-title'). When omitted, the input emits no analytics.\n\t \n\t Note: the input's value is never emitted, and `change` is emitted once per\n\t * editing session (on blur, when the value actually changed) rather than per keystroke.\n\t /\n\teventId?: string;\n}\n\nexport const MrlEditableTextInput = React.forwardRef<HTMLButtonElement, MrlEditableTextInputProps>(\n\tfunction MrlEditiableTextInput(\n\t\tprops: MrlEditableTextInputProps,\n\t\tref: React.Ref<HTMLButtonElement>\n\t): JSX.Element {\n\t\tconst {\n\t\t\tinputId,\n\t\t\tmaxLength,\n\t\t\tplaceholder,\n\t\t\tstate,\n\t\t\tvalue,\n\t\t\terror,\n\t\t\tisEditable: controlledIsEditable,\n\t\t\tsetIsEditable: controlledIsEditableUpdate,\n\t\t\tshowIconOnHover = false,\n\t\t\tinputLabelText,\n\t\t\teventId,\n\t\t\t...attrs\n\t\t} = props;\n\t\t// html id to be reference by input and error description to relay the error for a specific input\n\t\tconst describedById = `${inputId}-description`;\n\t\tconst textInputRef = React.useRef<HTMLInputElement>(null);\n\t\tconst iconRef = React.useRef<HTMLButtonElement>(null);\n\t\t// the value when the field gained focus, so `change` can be emitted once per\n\t\t// editing session instead of once per keystroke.\n\t\tconst valueOnFocusRef = React.useRef<string>('');\n\n\t\tconst trackInteraction = useMrlTrackInteraction('MrlEditableTextInput', eventId);\n\n\t\tconst { hasActiveColor, setHasActiveColor } = useActiveColor(state);\n\t\tconst { isEditable, isEditing, setIsEditable, setIsEditing } = useIsEditable({\n\t\t\tchangeHandler: controlledIsEditableUpdate,\n\t\t\tinitialValue: false,\n\t\t\tstate,\n\t\t\tvalue: controlledIsEditable\n\t\t});\n\n\t\tReact.useImperativeHandle<HTMLButtonElement \| null, HTMLButtonElement \| null>(\n\t\t\tref,\n\t\t\t() => iconRef.current\n\t\t);\n\n\t\tconst unlockInput = React.useCallback(() => {\n\t\t\ttrackInteraction({ action: 'edit' });\n\n\t\t\tsetIsEditable(true);\n\t\t\tsetIsEditing(true);\n\t\t}, [setIsEditable, setIsEditing, trackInteraction]);\n\n\t\tconst lockInput = React.useCallback(() => {\n\t\t\tsetIsEditable(false);\n\t\t\tsetIsEditing(false);\n\t\t}, [setIsEditable, setIsEditing]);\n\t\tconst handleOnClick = (e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\tif (!isEditable && !isEditing) {\n\t\t\t\tunlockInput();\n\t\t\t}\n\n\t\t\t/\n\t\t\t * Only to be executed if onClick is provided as a prop\n\t\t\t */\n\t\t\tif (typeof attrs.onClick === 'function') {\n\t\t\t\tattrs.onClick(e);\n\t\t\t}\n\t\t};\n\n\t\tconst handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\tconst { key } = event;\n\n\t\t\t// Selects the item on enter or spacebar and closes the select\n\t\t\tif (key === 'Escape') {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tlockInput();\n\t\t\t\ticonRef.current?.focus();\n\t\t\t}\n\n\t\t\tif (typeof attrs.onKeyDown === 'function') {\n\t\t\t\tattrs.onKeyDown(event);\n\t\t\t}\n\t\t};\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tlockInput();\n\n\t\t\t\t// the value itself is never emitted — only the fact that it changed.\n\t\t\t\tif (e.target.value !== valueOnFocusRef.current) {\n\t\t\t\t\ttrackInteraction({ action: 'change' });\n\t\t\t\t}\n\n\t\t\t\tif (typeof attrs.onBlur === 'function') {\n\t\t\t\t\tattrs.onBlur(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor, lockInput, trackInteraction]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tvalueOnFocusRef.current = e.target.value;\n\n\t\t\t\tif (typeof attrs.onFocus === 'function') {\n\t\t\t\t\tattrs.onFocus(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tif (typeof attrs.onMouseEnter === 'function') {\n\t\t\t\t\tattrs.onMouseEnter(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseLeave = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLInputElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tif (typeof attrs.onMouseLeave === 'function') {\n\t\t\t\t\tattrs.onMouseLeave(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (iconRef.current) {\n\t\t\t\tif (attrs.autoFocus) {\n\t\t\t\t\ticonRef.current.focus();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// it should only run on the first render\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, []);\n\n\t\tReact.useEffect(() => {\n\t\t\t// when editiable changes focus to current thingy\n\t\t\tif (isEditable && textInputRef.current) {\n\t\t\t\ttextInputRef.current.focus();\n\t\t\t}\n\t\t}, [isEditable, isEditing]);\n\n\t\tconst inputClasses = classnames(\n\t\t\t'MrlEditableTextInput',\n\t\t\tstyles['MrlEditableTextInput'],\n\t\t\tstyles['mrl-textInput'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextInput-errorMessage']]: state === 'error',\n\t\t\t\t[styles['MrlEditableTextInput-errorIcon']]: state === 'error',\n\t\t\t\t[styles['MrlEditableTextInput--dynamicIcon']]: state !== 'read-only',\n\t\t\t\t[styles['MrlEditableTextInput--readOnly']]: state === 'read-only',\n\t\t\t\t[styles['MrlEditableTextInput--active']]: hasActiveColor,\n\t\t\t\t// if an onClick property is provided, we need to apply the class that allows pointer events\n\t\t\t\t[styles['MrlEditableTextInput--allowOnClick']]: typeof attrs.onClick === 'function'\n\t\t\t},\n\t\t\tattrs.className\n\t\t);\n\n\t\tconst hasCounter = typeof maxLength !== 'undefined' && Number(maxLength) > 0;\n\t\tif (hasCounter && isNaN(Number(maxLength))) {\n\t\t\tthrow new Error('maxLength should have type number');\n\t\t}\n\n\t\tconst hasErrorMessage = state === 'error' && error?.message;\n\n\t\t// do not pass class info to child elements/components\n\t\tdelete attrs.className;\n\n\t\tconst iconClasses = classnames(\n\t\t\t'MrlEditableTextInput-right-button',\n\t\t\tstyles['MrlEditableTextInput-right-button'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextInput-hover-button']]: showIconOnHover\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\tstyles['MrlEditableTextInput--wrapper'],\n\t\t\t\t\t\t'MrlEditableTextInput--wrapper'\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t{...attrs}\n\t\t\t\t\t\tonClick={handleOnClick}\n\t\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\t\taria-describedby={hasErrorMessage ? describedById : undefined}\n\t\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\tmaxLength={hasCounter ? maxLength : undefined}\n\t\t\t\t\t\tonBlur={handleOnBlur}\n\t\t\t\t\t\tonFocus={handleOnFocus}\n\t\t\t\t\t\tonMouseEnter={handleOnMouseEnter}\n\t\t\t\t\t\tonMouseLeave={handleOnMouseLeave}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadOnly={state === 'read-only' \|\| !isEditable}\n\t\t\t\t\t\ttabIndex={!isEditable ? -1 : 0}\n\t\t\t\t\t\tref={textInputRef}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t/>\n\t\t\t\t\t{state !== 'read-only' && state !== 'disabled' && (\n\t\t\t\t\t\t<span className={iconClasses}>\n\t\t\t\t\t\t\t<MrlEditableTextInputRightButton\n\t\t\t\t\t\t\t\taction={unlockInput}\n\t\t\t\t\t\t\t\ticon={edit}\n\t\t\t\t\t\t\t\tlabel={`Edit: ${inputLabelText \|\| inputId}`}\n\t\t\t\t\t\t\t\tdataQa={attrs['data-qa'] && `${attrs['data-qa']}-edit`}\n\t\t\t\t\t\t\t\thasActiveColor={hasActiveColor \|\| isEditable}\n\t\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\t\tref={iconRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCounter && (\n\t\t\t\t\t<span className={styles['MrlForm-counter']}>\n\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t{value?.length \|\| 0}/{maxLength}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p style={{ display: 'none' }} id={`${inputId}-counter`}>\n\t\t\t\t\t\t\t{`${maxLength - (value?.length \|\| 0)} of ${maxLength} characters remaining`}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{hasErrorMessage && (\n\t\t\t\t\t<span className={styles['MrlEditableTextInput-errorMessage']}>\n\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\tclassName={styles['MrlEditableTextInput-errorIcon']}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tsvg={errorIcon}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span id={describedById}>{`${error?.message}`}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n);\n"],"names":["MrlEditableTextInput","React","forwardRef","MrlEditiableTextInput","props","ref","inputId","maxLength","placeholder","state","value","error","controlledIsEditable","isEditable","controlledIsEditableUpdate","setIsEditable","_props$showIconOnHove","showIconOnHover","inputLabelText","eventId","attrs","_objectWithoutProperties","_excluded","describedById","concat","textInputRef","useRef","iconRef","valueOnFocusRef","trackInteraction","useMrlTrackInteraction","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","_useIsEditable","useIsEditable","changeHandler","initialValue","isEditing","setIsEditing","useImperativeHandle","current","unlockInput","useCallback","action","lockInput","handleOnClick","e","onClick","handleKeyDown","event","key","_iconRef$current","stopPropagation","preventDefault","focus","onKeyDown","handleOnBlur","target","onBlur","handleOnFocus","onFocus","handleOnMouseEnter","onMouseEnter","handleOnMouseLeave","onMouseLeave","useEffect","autoFocus","inputClasses","classnames","styles","className","hasCounter","Number","isNaN","Error","hasErrorMessage","message","iconClasses","createElement","Fragment","_extends","type","undefined","disabled","id","readOnly","tabIndex","MrlEditableTextInputRightButton","icon","edit","label","dataQa","length","style","display","MrlSvg","svg","errorIcon","size"],"mappings":"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"}

package/dist/cjs/components/form/text-input/MrlTextInput/MrlTextInput.js CHANGED Viewed

@@ -7,6 +7,7 @@ var MrlTextInputRightIcon = require('./MrlTextInputRightIcon.js');
 var dsIcons = require('@muraldevkit/ds-icons');
 var useActiveColor = require('../../hooks/useActiveColor.js');
 var MrlTextInput_module = require('./MrlTextInput.module.scss.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
 var MrlSvg = require('../../../svg/MrlSvg/MrlSvg.js');
@@ -33,7 +34,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var _excluded = ["attrs", "inputId", "isClearable", "dynamicIcon", "hookClear", "maxLength", "persistIcon", "placeholder", "state", "value", "aria-describedby"],
+var _excluded = ["attrs", "inputId", "isClearable", "dynamicIcon", "hookClear", "maxLength", "persistIcon", "placeholder", "state", "eventId", "value", "aria-describedby"],
   _excluded2 = ["aria-describedby"];
 /**
  * @todo - we need to add static icon support for right
@@ -56,15 +57,23 @@ var MrlTextInput = /*#__PURE__*/React__namespace.forwardRef(function MrlTextInpu
     persistIcon = _ref.persistIcon,
     placeholder = _ref.placeholder,
     state = _ref.state,
+    eventId = _ref.eventId,
     value = _ref.value,
     ariaDescribedByProp = _ref['aria-describedby'],
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var textInputRef = React__namespace.useRef(null);
+  // the value when the field gained focus, so `change` can be emitted once per
+  // editing session instead of once per keystroke.
+  var valueOnFocusRef = React__namespace.useRef('');
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlTextInput', eventId);
   var _useActiveColor = useActiveColor.useActiveColor(state),
     hasActiveColor = _useActiveColor.hasActiveColor,
     setHasActiveColor = _useActiveColor.setHasActiveColor;
   React__namespace.useImperativeHandle(ref, () => textInputRef.current);
   var clearInput = React__namespace.useCallback(() => {
+    trackInteraction({
+      action: 'clear'
+    });
     if (textInputRef.current) {
       textInputRef.current.value = '';
       textInputRef.current.focus();
@@ -72,7 +81,7 @@ var MrlTextInput = /*#__PURE__*/React__namespace.forwardRef(function MrlTextInpu
     if (hookClear && typeof hookClear === 'function') {
       hookClear();
     }
-  }, [hookClear]);
+  }, [hookClear, trackInteraction]);
   var hasValue = () => {
     var _textInputRef$current;
     return ((_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.value) !== '' || value !== '';
@@ -83,15 +92,23 @@ var MrlTextInput = /*#__PURE__*/React__namespace.forwardRef(function MrlTextInpu
   var ariaDescribedBy = ariaDescribedByProp || ariaDescribedByAttrs;
   var handleOnBlur = React__namespace.useCallback(e => {
     setHasActiveColor(false);
+    // the value itself is never emitted — only the fact that it changed.
+    if (e.target.value !== valueOnFocusRef.current) {
+      trackInteraction({
+        action: 'change'
+      });
+    }
     if (typeof rest.onBlur === 'function') {
       rest.onBlur(e);
     }
     if (typeof attributes.onBlur === 'function') {
       attributes.onBlur(e);
     }
-  }, [attributes, rest, setHasActiveColor]);
+  }, [attributes, rest, setHasActiveColor, trackInteraction]);
   var handleOnFocus = React__namespace.useCallback(e => {
     setHasActiveColor(true);
+    valueOnFocusRef.current = e.target.value;
     if (typeof rest.onFocus === 'function') {
       rest.onFocus(e);
     }

package/dist/cjs/components/form/text-input/MrlTextInput/MrlTextInput.js.map CHANGED Viewed

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

package/dist/cjs/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.js CHANGED Viewed

@@ -8,6 +8,7 @@ var MrlEditableTextarea_module = require('./MrlEditableTextarea.module.scss.js')
 var useIsEditable = require('../../hooks/useIsEditable.js');
 var useActiveColor = require('../../hooks/useActiveColor.js');
 var MrlEditableTextareaRightButton = require('./MrlEditableTextareaRightButton.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var MrlSvg = require('../../../svg/MrlSvg/MrlSvg.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -33,7 +34,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var _excluded = ["autoExpand", "className", "inputId", "inputLabelText", "maxLength", "placeholder", "state", "value", "error", "isEditable", "setIsEditable"];
+var _excluded = ["autoExpand", "className", "inputId", "inputLabelText", "maxLength", "placeholder", "state", "value", "error", "isEditable", "setIsEditable", "eventId"];
 /**
  * Allows the user to input plain text in a multi-line format
  * @param {MrlEditableTextareaProps} props - the component props
@@ -52,12 +53,17 @@ var MrlEditableTextarea = /*#__PURE__*/React__namespace.forwardRef(function MrlE
     error = props.error,
     controlledIsEditable = props.isEditable,
     controlledIsEditableUpdate = props.setIsEditable,
+    eventId = props.eventId,
     attrs = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
   // html id to be reference by input and error description to relay the error for a specific input
   var describedById = "".concat(inputId, "-description");
   var textareaRef = React__namespace.useRef(null);
   var iconRef = React__namespace.useRef(null);
+  // the value when the field gained focus, so `change` can be emitted once per
+  // editing session instead of once per keystroke.
+  var valueOnFocusRef = React__namespace.useRef('');
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlEditableTextarea', eventId);
   var _useActiveColor = useActiveColor.useActiveColor(state),
     hasActiveColor = _useActiveColor.hasActiveColor,
     setHasActiveColor = _useActiveColor.setHasActiveColor;
@@ -120,15 +126,23 @@ var MrlEditableTextarea = /*#__PURE__*/React__namespace.forwardRef(function MrlE
     setIsEditable(false);
     setIsEditing(false);
     setHasEdited(false);
+    // the value itself is never emitted — only the fact that it changed.
+    if (e.target.value !== valueOnFocusRef.current) {
+      trackInteraction({
+        action: 'change'
+      });
+    }
     if (typeof attrs.onBlur === 'function') {
       attrs.onBlur(e);
     }
-  }, [attrs, setHasActiveColor, setIsEditable, setIsEditing]);
+  }, [attrs, setHasActiveColor, setIsEditable, setIsEditing, trackInteraction]);
   var handleOnFocus = React__namespace.useCallback(e => {
     setHasActiveColor(true);
     setIsEditable(true);
     setIsEditing(true);
     setHasEdited(true);
+    valueOnFocusRef.current = e.target.value;
     if (typeof attrs.onFocus === 'function') {
       attrs.onFocus(e);
     }
@@ -146,10 +160,13 @@ var MrlEditableTextarea = /*#__PURE__*/React__namespace.forwardRef(function MrlE
     }
   }, [attrs, setHasActiveColor]);
   var onClickEdit = React__namespace.useCallback(() => {
+    trackInteraction({
+      action: 'edit'
+    });
     setIsEditable(true);
     setIsEditing(true);
     setHasEdited(true);
-  }, [setIsEditable, setIsEditing, setHasEdited]);
+  }, [setIsEditable, setIsEditing, setHasEdited, trackInteraction]);
   var hasCounter = typeof maxLength !== 'undefined' && Number(maxLength) > 0 && state !== 'read-only';
   if (hasCounter && isNaN(Number(maxLength))) {
     throw new Error('maxLength should have type number');

package/dist/cjs/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlEditableTextarea.js","sources":["../../../../../../src/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { edit, error as errorIcon } from '@muraldevkit/ds-icons';\n\nimport styles from './MrlEditableTextarea.module.scss';\nimport './MrlEditableTextarea.global.scss';\nimport { useIsEditable } from '../../hooks/useIsEditable';\nimport { useActiveColor } from '../../hooks/useActiveColor';\nimport { InputStates, MrlFormInputError, MrlSvg } from '../../..';\nimport { MrlEditableTextareaRightButton } from './MrlEditableTextareaRightButton';\n\ninterface MrlEditableTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n\t/** The value of the textarea used to make it a controlled input /\n\tvalue: string;\n\t/\n\t \tValue of the label text assigned to the input.\n\t * This is used to describe to the user what field they will be editing when interacting with the edit buton.\n\t /\n\tinputLabelText: string;\n\t/\n\t The maximum number of characters that the user can enter.\n\t * If undefined or set to \"0\", removes the character counter from the textarea\n\t /\n\tmaxLength?: number;\n\t/\n\t Id of the text input.\n\t /\n\tinputId: string;\n\t/\n\t Text placeholder for the text input.\n\t /\n\tplaceholder?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: InputStates;\n\t/* Additional class to add to the textarea /\n\tclassName?: string;\n\t'data-qa': string;\n\terror?: MrlFormInputError;\n\t/ Expost isEditable and setIsEditable as optionally controlled state /\n\tisEditable?: boolean;\n\tsetIsEditable?: (isEditableUpdate: boolean) => void;\n\t/* Autoexpand will automatically adjust the height of the textarea based on the amount of text within it /\n\tautoExpand?: boolean;\n}\n\n/\n Allows the user to input plain text in a multi-line format\n * @param {MrlEditableTextareaProps} props - the component props\n * @returns a textarea element\n */\nexport const MrlEditableTextarea = React.forwardRef<HTMLButtonElement, MrlEditableTextareaProps>(\n\tfunction MrlEditableTextarea(\n\t\tprops: MrlEditableTextareaProps,\n\t\tref: React.Ref<HTMLButtonElement>\n\t): JSX.Element {\n\t\tconst {\n\t\t\tautoExpand = false,\n\t\t\tclassName,\n\t\t\tinputId,\n\t\t\tinputLabelText,\n\t\t\tmaxLength,\n\t\t\tplaceholder,\n\t\t\tstate,\n\t\t\tvalue,\n\t\t\terror,\n\t\t\tisEditable: controlledIsEditable,\n\t\t\tsetIsEditable: controlledIsEditableUpdate,\n\t\t\t...attrs\n\t\t} = props;\n\n\t\t// html id to be reference by input and error description to relay the error for a specific input\n\t\tconst describedById = `${inputId}-description`;\n\t\tconst textareaRef = React.useRef<HTMLTextAreaElement>(null);\n\t\tconst iconRef = React.useRef<HTMLButtonElement>(null);\n\n\t\tconst { hasActiveColor, setHasActiveColor } = useActiveColor(state);\n\t\tconst { isEditable, isEditing, setIsEditable, setIsEditing } = useIsEditable({\n\t\t\tchangeHandler: controlledIsEditableUpdate,\n\t\t\tinitialValue: false,\n\t\t\tstate,\n\t\t\tvalue: controlledIsEditable\n\t\t});\n\t\t// Allows us to track if the user has edited the input previously.\n\t\t// This helps conditionally focus the icon only when the user is done editing the input.\n\t\tconst [hasEdited, setHasEdited] = React.useState(false);\n\n\t\tReact.useImperativeHandle<HTMLButtonElement \| null, HTMLButtonElement \| null>(\n\t\t\tref,\n\t\t\t() => iconRef.current\n\t\t);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (iconRef.current && (attrs.autoFocus \|\| hasEdited)) {\n\t\t\t\ticonRef.current.focus();\n\t\t\t}\n\t\t}, [attrs, iconRef, hasEdited]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (textareaRef.current) {\n\t\t\t\tif (isEditable) {\n\t\t\t\t\ttextareaRef.current.focus();\n\t\t\t\t} else {\n\t\t\t\t\ttextareaRef.current.style.height = 'auto';\n\t\t\t\t\tif (!textareaRef.current.value \|\| textareaRef.current.value === '') {\n\t\t\t\t\t\ttextareaRef.current.style.height = '40px';\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttextareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}, [isEditable, isEditing]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!autoExpand \|\| !textareaRef.current) return;\n\n\t\t\ttextareaRef.current.style.height = 'auto';\n\t\t\tif (!textareaRef.current.value \|\| textareaRef.current.value === '') {\n\t\t\t\ttextareaRef.current.style.height = '40px';\n\t\t\t} else {\n\t\t\t\ttextareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\t\t\t}\n\t\t}, [autoExpand, value]);\n\n\t\tconst onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n\t\t\tconst { key } = event;\n\n\t\t\tif (key === 'Escape') {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetIsEditable(false);\n\t\t\t\tsetIsEditing(false);\n\t\t\t}\n\t\t};\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tsetIsEditable(false);\n\t\t\t\tsetIsEditing(false);\n\t\t\t\tsetHasEdited(false);\n\t\t\t\tif (typeof attrs.onBlur === 'function') {\n\t\t\t\t\tattrs.onBlur(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor, setIsEditable, setIsEditing]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tsetIsEditable(true);\n\t\t\t\tsetIsEditing(true);\n\t\t\t\tsetHasEdited(true);\n\t\t\t\tif (typeof attrs.onFocus === 'function') {\n\t\t\t\t\tattrs.onFocus(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor, setIsEditable, setIsEditing]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tif (typeof attrs.onMouseEnter === 'function') {\n\t\t\t\t\tattrs.onMouseEnter(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseLeave = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tif (typeof attrs.onMouseLeave === 'function') {\n\t\t\t\t\tattrs.onMouseLeave(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst onClickEdit = React.useCallback(() => {\n\t\t\tsetIsEditable(true);\n\t\t\tsetIsEditing(true);\n\t\t\tsetHasEdited(true);\n\t\t}, [setIsEditable, setIsEditing, setHasEdited]);\n\n\t\tconst hasCounter =\n\t\t\ttypeof maxLength !== 'undefined' && Number(maxLength) > 0 && state !== 'read-only';\n\n\t\tif (hasCounter && isNaN(Number(maxLength))) {\n\t\t\tthrow new Error('maxLength should have type number');\n\t\t}\n\n\t\tconst hasErrorMessage = state === 'error' && error?.message;\n\n\t\tconst inputClasses = classnames(\n\t\t\tclassName,\n\t\t\tstyles['MrlEditableTextarea'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextarea--readOnly']]: state === 'read-only'\n\t\t\t},\n\t\t\t'MrlEditableTextarea',\n\t\t\t'mrl-textarea'\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className={`${styles['MrlEditableTextarea--wrapper']} MrlEditableTextarea--wrapper`}>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\t{...attrs}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t\tdefaultValue={value}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\t\taria-describedby={hasErrorMessage ? describedById : undefined}\n\t\t\t\t\t\tonBlur={handleOnBlur}\n\t\t\t\t\t\tonFocus={handleOnFocus}\n\t\t\t\t\t\tonMouseEnter={handleOnMouseEnter}\n\t\t\t\t\t\tonMouseLeave={handleOnMouseLeave}\n\t\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\t\tmaxLength={hasCounter ? maxLength : undefined}\n\t\t\t\t\t\treadOnly={state === 'read-only' \|\| !isEditable}\n\t\t\t\t\t\tref={textareaRef}\n\t\t\t\t\t\ttabIndex={!isEditable ? -1 : 0}\n\t\t\t\t\t/>\n\t\t\t\t\t{state !== 'read-only' && state !== 'disabled' && !isEditable && (\n\t\t\t\t\t\t<MrlEditableTextareaRightButton\n\t\t\t\t\t\t\taction={onClickEdit}\n\t\t\t\t\t\t\ticon={edit}\n\t\t\t\t\t\t\tlabel={`Edit ${inputLabelText}`}\n\t\t\t\t\t\t\tdataQa={attrs['data-qa'] && `${attrs['data-qa']}-edit`}\n\t\t\t\t\t\t\thasActiveColor={hasActiveColor \|\| isEditable}\n\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\tref={iconRef}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCounter && isEditable && (\n\t\t\t\t\t<span className={styles['MrlForm-counter']}>\n\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t{value?.length \|\| 0}/{maxLength}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p style={{ display: 'none' }} aria-live=\"polite\" id={`${inputId}-counter`}>\n\t\t\t\t\t\t\t{`${maxLength - (value?.length \|\| 0)} of ${maxLength} characters remaining`}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{state === 'error' && error?.message && (\n\t\t\t\t\t<span className={styles['MrlEditableTextarea-errorMessage']}>\n\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\tclassName={styles['MrlEditableTextarea-errorIcon']}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tsvg={errorIcon}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span id={describedById}>{`${error?.message}`}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n);\n"],"names":["MrlEditableTextarea","React","forwardRef","props","ref","_props$autoExpand","autoExpand","className","inputId","inputLabelText","maxLength","placeholder","state","value","error","controlledIsEditable","isEditable","controlledIsEditableUpdate","setIsEditable","attrs","_objectWithoutProperties","_excluded","describedById","concat","textareaRef","useRef","iconRef","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","_useIsEditable","useIsEditable","changeHandler","initialValue","isEditing","setIsEditing","_React$useState","useState","_React$useState2","_slicedToArray","hasEdited","setHasEdited","useImperativeHandle","current","useEffect","autoFocus","focus","style","height","scrollHeight","onKeyDown","event","key","stopPropagation","preventDefault","handleOnBlur","useCallback","e","onBlur","handleOnFocus","onFocus","handleOnMouseEnter","onMouseEnter","handleOnMouseLeave","onMouseLeave","onClickEdit","hasCounter","Number","isNaN","Error","hasErrorMessage","message","inputClasses","classnames","styles","createElement","Fragment","_extends","id","defaultValue","disabled","undefined","readOnly","tabIndex","MrlEditableTextareaRightButton","action","icon","edit","label","dataQa","length","display","MrlSvg","svg","errorIcon","size"],"mappings":"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"}
1	+ {"version":3,"file":"MrlEditableTextarea.js","sources":["../../../../../../src/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { edit, error as errorIcon } from '@muraldevkit/ds-icons';\n\nimport styles from './MrlEditableTextarea.module.scss';\nimport './MrlEditableTextarea.global.scss';\nimport { useIsEditable } from '../../hooks/useIsEditable';\nimport { useActiveColor } from '../../hooks/useActiveColor';\nimport { InputStates, MrlFormInputError, MrlSvg } from '../../..';\nimport { MrlEditableTextareaRightButton } from './MrlEditableTextareaRightButton';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\ninterface MrlEditableTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n\t/** The value of the textarea used to make it a controlled input /\n\tvalue: string;\n\t/\n\t \tValue of the label text assigned to the input.\n\t * This is used to describe to the user what field they will be editing when interacting with the edit buton.\n\t /\n\tinputLabelText: string;\n\t/\n\t The maximum number of characters that the user can enter.\n\t * If undefined or set to \"0\", removes the character counter from the textarea\n\t /\n\tmaxLength?: number;\n\t/\n\t Id of the text input.\n\t /\n\tinputId: string;\n\t/\n\t Text placeholder for the text input.\n\t /\n\tplaceholder?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: InputStates;\n\t/* Additional class to add to the textarea /\n\tclassName?: string;\n\t'data-qa': string;\n\terror?: MrlFormInputError;\n\t/ Expost isEditable and setIsEditable as optionally controlled state /\n\tisEditable?: boolean;\n\tsetIsEditable?: (isEditableUpdate: boolean) => void;\n\t/* Autoexpand will automatically adjust the height of the textarea based on the amount of text within it /\n\tautoExpand?: boolean;\n\n\t/\n\t Enables interaction tracking for this textarea. Provide a stable, non-PII id\n\t * (e.g. 'mural-description'). When omitted, the textarea emits no analytics.\n\t \n\t Note: the textarea's value is never emitted, and `change` is emitted once per\n\t * editing session (on blur, when the value actually changed) rather than per keystroke.\n\t /\n\teventId?: string;\n}\n\n/\n Allows the user to input plain text in a multi-line format\n * @param {MrlEditableTextareaProps} props - the component props\n * @returns a textarea element\n */\nexport const MrlEditableTextarea = React.forwardRef<HTMLButtonElement, MrlEditableTextareaProps>(\n\tfunction MrlEditableTextarea(\n\t\tprops: MrlEditableTextareaProps,\n\t\tref: React.Ref<HTMLButtonElement>\n\t): JSX.Element {\n\t\tconst {\n\t\t\tautoExpand = false,\n\t\t\tclassName,\n\t\t\tinputId,\n\t\t\tinputLabelText,\n\t\t\tmaxLength,\n\t\t\tplaceholder,\n\t\t\tstate,\n\t\t\tvalue,\n\t\t\terror,\n\t\t\tisEditable: controlledIsEditable,\n\t\t\tsetIsEditable: controlledIsEditableUpdate,\n\t\t\teventId,\n\t\t\t...attrs\n\t\t} = props;\n\n\t\t// html id to be reference by input and error description to relay the error for a specific input\n\t\tconst describedById = `${inputId}-description`;\n\t\tconst textareaRef = React.useRef<HTMLTextAreaElement>(null);\n\t\tconst iconRef = React.useRef<HTMLButtonElement>(null);\n\t\t// the value when the field gained focus, so `change` can be emitted once per\n\t\t// editing session instead of once per keystroke.\n\t\tconst valueOnFocusRef = React.useRef<string>('');\n\n\t\tconst trackInteraction = useMrlTrackInteraction('MrlEditableTextarea', eventId);\n\n\t\tconst { hasActiveColor, setHasActiveColor } = useActiveColor(state);\n\t\tconst { isEditable, isEditing, setIsEditable, setIsEditing } = useIsEditable({\n\t\t\tchangeHandler: controlledIsEditableUpdate,\n\t\t\tinitialValue: false,\n\t\t\tstate,\n\t\t\tvalue: controlledIsEditable\n\t\t});\n\t\t// Allows us to track if the user has edited the input previously.\n\t\t// This helps conditionally focus the icon only when the user is done editing the input.\n\t\tconst [hasEdited, setHasEdited] = React.useState(false);\n\n\t\tReact.useImperativeHandle<HTMLButtonElement \| null, HTMLButtonElement \| null>(\n\t\t\tref,\n\t\t\t() => iconRef.current\n\t\t);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (iconRef.current && (attrs.autoFocus \|\| hasEdited)) {\n\t\t\t\ticonRef.current.focus();\n\t\t\t}\n\t\t}, [attrs, iconRef, hasEdited]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (textareaRef.current) {\n\t\t\t\tif (isEditable) {\n\t\t\t\t\ttextareaRef.current.focus();\n\t\t\t\t} else {\n\t\t\t\t\ttextareaRef.current.style.height = 'auto';\n\t\t\t\t\tif (!textareaRef.current.value \|\| textareaRef.current.value === '') {\n\t\t\t\t\t\ttextareaRef.current.style.height = '40px';\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttextareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}, [isEditable, isEditing]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!autoExpand \|\| !textareaRef.current) return;\n\n\t\t\ttextareaRef.current.style.height = 'auto';\n\t\t\tif (!textareaRef.current.value \|\| textareaRef.current.value === '') {\n\t\t\t\ttextareaRef.current.style.height = '40px';\n\t\t\t} else {\n\t\t\t\ttextareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\t\t\t}\n\t\t}, [autoExpand, value]);\n\n\t\tconst onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n\t\t\tconst { key } = event;\n\n\t\t\tif (key === 'Escape') {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetIsEditable(false);\n\t\t\t\tsetIsEditing(false);\n\t\t\t}\n\t\t};\n\n\t\tconst handleOnBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tsetIsEditable(false);\n\t\t\t\tsetIsEditing(false);\n\t\t\t\tsetHasEdited(false);\n\n\t\t\t\t// the value itself is never emitted — only the fact that it changed.\n\t\t\t\tif (e.target.value !== valueOnFocusRef.current) {\n\t\t\t\t\ttrackInteraction({ action: 'change' });\n\t\t\t\t}\n\n\t\t\t\tif (typeof attrs.onBlur === 'function') {\n\t\t\t\t\tattrs.onBlur(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor, setIsEditable, setIsEditing, trackInteraction]\n\t\t);\n\n\t\tconst handleOnFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tsetIsEditable(true);\n\t\t\t\tsetIsEditing(true);\n\t\t\t\tsetHasEdited(true);\n\t\t\t\tvalueOnFocusRef.current = e.target.value;\n\n\t\t\t\tif (typeof attrs.onFocus === 'function') {\n\t\t\t\t\tattrs.onFocus(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor, setIsEditable, setIsEditing]\n\t\t);\n\n\t\tconst handleOnMouseEnter = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(true);\n\t\t\t\tif (typeof attrs.onMouseEnter === 'function') {\n\t\t\t\t\tattrs.onMouseEnter(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst handleOnMouseLeave = React.useCallback(\n\t\t\t(e: React.MouseEvent<HTMLTextAreaElement>) => {\n\t\t\t\tsetHasActiveColor(false);\n\t\t\t\tif (typeof attrs.onMouseLeave === 'function') {\n\t\t\t\t\tattrs.onMouseLeave(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[attrs, setHasActiveColor]\n\t\t);\n\n\t\tconst onClickEdit = React.useCallback(() => {\n\t\t\ttrackInteraction({ action: 'edit' });\n\n\t\t\tsetIsEditable(true);\n\t\t\tsetIsEditing(true);\n\t\t\tsetHasEdited(true);\n\t\t}, [setIsEditable, setIsEditing, setHasEdited, trackInteraction]);\n\n\t\tconst hasCounter =\n\t\t\ttypeof maxLength !== 'undefined' && Number(maxLength) > 0 && state !== 'read-only';\n\n\t\tif (hasCounter && isNaN(Number(maxLength))) {\n\t\t\tthrow new Error('maxLength should have type number');\n\t\t}\n\n\t\tconst hasErrorMessage = state === 'error' && error?.message;\n\n\t\tconst inputClasses = classnames(\n\t\t\tclassName,\n\t\t\tstyles['MrlEditableTextarea'],\n\t\t\t{\n\t\t\t\t[styles['MrlEditableTextarea--readOnly']]: state === 'read-only'\n\t\t\t},\n\t\t\t'MrlEditableTextarea',\n\t\t\t'mrl-textarea'\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className={`${styles['MrlEditableTextarea--wrapper']} MrlEditableTextarea--wrapper`}>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\t{...attrs}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t\tdefaultValue={value}\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\t\taria-describedby={hasErrorMessage ? describedById : undefined}\n\t\t\t\t\t\tonBlur={handleOnBlur}\n\t\t\t\t\t\tonFocus={handleOnFocus}\n\t\t\t\t\t\tonMouseEnter={handleOnMouseEnter}\n\t\t\t\t\t\tonMouseLeave={handleOnMouseLeave}\n\t\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\t\tmaxLength={hasCounter ? maxLength : undefined}\n\t\t\t\t\t\treadOnly={state === 'read-only' \|\| !isEditable}\n\t\t\t\t\t\tref={textareaRef}\n\t\t\t\t\t\ttabIndex={!isEditable ? -1 : 0}\n\t\t\t\t\t/>\n\t\t\t\t\t{state !== 'read-only' && state !== 'disabled' && !isEditable && (\n\t\t\t\t\t\t<MrlEditableTextareaRightButton\n\t\t\t\t\t\t\taction={onClickEdit}\n\t\t\t\t\t\t\ticon={edit}\n\t\t\t\t\t\t\tlabel={`Edit ${inputLabelText}`}\n\t\t\t\t\t\t\tdataQa={attrs['data-qa'] && `${attrs['data-qa']}-edit`}\n\t\t\t\t\t\t\thasActiveColor={hasActiveColor \|\| isEditable}\n\t\t\t\t\t\t\tsetHasActiveColor={setHasActiveColor}\n\t\t\t\t\t\t\tref={iconRef}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCounter && isEditable && (\n\t\t\t\t\t<span className={styles['MrlForm-counter']}>\n\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t{value?.length \|\| 0}/{maxLength}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p style={{ display: 'none' }} aria-live=\"polite\" id={`${inputId}-counter`}>\n\t\t\t\t\t\t\t{`${maxLength - (value?.length \|\| 0)} of ${maxLength} characters remaining`}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{state === 'error' && error?.message && (\n\t\t\t\t\t<span className={styles['MrlEditableTextarea-errorMessage']}>\n\t\t\t\t\t\t<MrlSvg\n\t\t\t\t\t\t\tclassName={styles['MrlEditableTextarea-errorIcon']}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tsvg={errorIcon}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span id={describedById}>{`${error?.message}`}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n);\n"],"names":["MrlEditableTextarea","React","forwardRef","props","ref","_props$autoExpand","autoExpand","className","inputId","inputLabelText","maxLength","placeholder","state","value","error","controlledIsEditable","isEditable","controlledIsEditableUpdate","setIsEditable","eventId","attrs","_objectWithoutProperties","_excluded","describedById","concat","textareaRef","useRef","iconRef","valueOnFocusRef","trackInteraction","useMrlTrackInteraction","_useActiveColor","useActiveColor","hasActiveColor","setHasActiveColor","_useIsEditable","useIsEditable","changeHandler","initialValue","isEditing","setIsEditing","_React$useState","useState","_React$useState2","_slicedToArray","hasEdited","setHasEdited","useImperativeHandle","current","useEffect","autoFocus","focus","style","height","scrollHeight","onKeyDown","event","key","stopPropagation","preventDefault","handleOnBlur","useCallback","e","target","action","onBlur","handleOnFocus","onFocus","handleOnMouseEnter","onMouseEnter","handleOnMouseLeave","onMouseLeave","onClickEdit","hasCounter","Number","isNaN","Error","hasErrorMessage","message","inputClasses","classnames","styles","createElement","Fragment","_extends","id","defaultValue","disabled","undefined","readOnly","tabIndex","MrlEditableTextareaRightButton","icon","edit","label","dataQa","length","display","MrlSvg","svg","errorIcon","size"],"mappings":"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"}

package/dist/cjs/components/form/textarea/MrlTextarea/MrlTextarea.js CHANGED Viewed

@@ -4,6 +4,7 @@ var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabel
 var React = require('react');
 var classnames = require('classnames');
 var MrlTextarea_module = require('./MrlTextarea.module.scss.js');
+var useMrlAnalytics = require('../../../../hooks/useMrlAnalytics/useMrlAnalytics.js');
 var setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -29,7 +30,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var _excluded = ["attrs", "className", "inputId", "state", "maxLength", "placeholder", "value", "autoExpand"];
+var _excluded = ["attrs", "className", "inputId", "state", "maxLength", "placeholder", "eventId", "value", "autoExpand"];
 /**
  * Allows the user to input plain text in a multi-line format
  * @param {MrlTextareaProps} props - the component props
@@ -44,11 +45,16 @@ function MrlTextarea(_ref) {
     state = _ref$state === void 0 ? 'default' : _ref$state,
     maxLength = _ref.maxLength,
     placeholder = _ref.placeholder,
+    eventId = _ref.eventId,
     value = _ref.value,
     _ref$autoExpand = _ref.autoExpand,
     autoExpand = _ref$autoExpand === void 0 ? false : _ref$autoExpand,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var textareaRef = React__namespace.useRef(null);
+  // the value when the field gained focus, so `change` can be emitted once per
+  // editing session instead of once per keystroke.
+  var valueOnFocusRef = React__namespace.useRef('');
+  var trackInteraction = useMrlAnalytics.useMrlTrackInteraction('MrlTextarea', eventId);
   React__namespace.useEffect(() => {
     if (textareaRef.current && attrs.autofocus) {
       textareaRef.current.focus();
@@ -83,6 +89,35 @@ function MrlTextarea(_ref) {
   delete attrs.class;
   delete attrs.className;
   var attributes = setAttributes.setAttributes(attrs);
+  /**
+   * Handle focus events
+   *
+   * @param {React.FocusEvent<HTMLTextAreaElement>} e - focus event
+   */
+  var handleOnFocus = e => {
+    valueOnFocusRef.current = e.target.value;
+    if (typeof attributes.onFocus === 'function') {
+      attributes.onFocus(e);
+    }
+  };
+  /**
+   * Handle blur events
+   *
+   * @param {React.FocusEvent<HTMLTextAreaElement>} e - blur event
+   */
+  var handleOnBlur = e => {
+    // the value itself is never emitted — only the fact that it changed.
+    if (e.target.value !== valueOnFocusRef.current) {
+      trackInteraction({
+        action: 'change'
+      });
+    }
+    if (typeof attributes.onBlur === 'function') {
+      attributes.onBlur(e);
+    }
+  };
   var renderCounter = () => {
     var displayedValue = dataMaxLength ? dataMaxLength : maxLength;
     var valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;
@@ -103,6 +138,8 @@ function MrlTextarea(_ref) {
     className: "MrlTextarea--wrapper"
   }, /*#__PURE__*/React__namespace.createElement("textarea", _rollupPluginBabelHelpers.extends({}, rest, attributes, {
     id: inputId,
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
     placeholder: placeholder,
     className: inputClasses
     // Force value if defined (controlled component) or pass

package/dist/cjs/components/form/textarea/MrlTextarea/MrlTextarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MrlTextarea.js","sources":["../../../../../../src/components/form/textarea/MrlTextarea/MrlTextarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, setAttributes } from '../../../../utils';\n\nimport styles from './MrlTextarea.module.scss';\nimport './MrlTextarea.global.scss';\n\ntype MrlTextareaState = 'default' \| 'disabled' \| 'error' \| 'read-only';\n\ninterface MrlTextareaProps {\n\t/** Applies additional HTML attributes to the textarea element /\n\tattrs?: AttrsObject;\n\t/* The value of the textarea used to make it a controlled input /\n\tvalue?: string;\n\t/\n\t The maximum number of characters that the user can enter.\n\t * If undefined or set to \"0\", removes the character counter from the textarea\n\t /\n\tmaxLength?: number;\n\t/\n\t Id of the text input.\n\t /\n\tinputId: string;\n\t/\n\t Text placeholder for the text input.\n\t /\n\tplaceholder?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: MrlTextareaState;\n\n\t/* Additional class to add to the textarea /\n\tclassName?: string;\n\n\t/* Autoexpand will automatically adjust the height of the textarea based on the amount of text within it /\n\tautoExpand?: boolean;\n}\n\n/\n Allows the user to input plain text in a multi-line format\n * @param {MrlTextareaProps} props - the component props\n * @returns a textarea element\n */\nexport function MrlTextarea({\n\tattrs = {},\n\tclassName,\n\tinputId,\n\tstate = 'default',\n\tmaxLength,\n\tplaceholder,\n\tvalue,\n\tautoExpand = false,\n\t...rest\n}: MrlTextareaProps): JSX.Element {\n\tconst textareaRef = React.useRef<HTMLTextAreaElement>(null);\n\n\tReact.useEffect(() => {\n\t\tif (textareaRef.current && attrs.autofocus) {\n\t\t\ttextareaRef.current.focus();\n\t\t}\n\t}, [attrs, textareaRef]);\n\n\tconst dataMaxLength = attrs['data-maxlength'];\n\n\t// Special use-case for AI Chat Input (AI-658)\n\tReact.useEffect(() => {\n\t\tif (autoExpand && textareaRef.current) {\n\t\t\ttextareaRef.current.style.height = '0px';\n\t\t\tconst scrollHeight = textareaRef.current.scrollHeight + 4;\n\t\t\ttextareaRef.current.style.height = scrollHeight + 'px';\n\t\t}\n\t}, [value, autoExpand]);\n\n\tconst hasMaxLength = typeof maxLength !== 'undefined' && Number(maxLength) > 0;\n\tconst hasDataMaxLength = typeof dataMaxLength !== 'undefined' && Number(dataMaxLength) > 0;\n\n\tconst displayCounter = hasMaxLength \|\| hasDataMaxLength;\n\n\tif (hasMaxLength && isNaN(Number(maxLength))) {\n\t\tthrow new Error('maxLength should have type number');\n\t}\n\n\tif (hasDataMaxLength && isNaN(Number(hasDataMaxLength))) {\n\t\tthrow new Error('data-maxlength should have type number');\n\t}\n\n\tif (hasMaxLength && hasDataMaxLength) {\n\t\tthrow new Error('maxLength and data-maxlength should not be used at the same time');\n\t}\n\n\tconst inputClasses = classnames(\n\t\tattrs.class \|\| attrs.className,\n\t\tclassName,\n\t\tstyles['MrlTextarea'],\n\t\t'MrlTextarea',\n\t\t'mrl-textarea',\n\t\t{\n\t\t\t[styles['MrlTextarea--auto-expand']]: autoExpand,\n\t\t\t[styles['MrlTextarea--read-only']]: state === 'read-only'\n\t\t}\n\t);\n\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs);\n\n\tconst renderCounter = () => {\n\t\tconst displayedValue = dataMaxLength ? dataMaxLength : maxLength;\n\t\tconst valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={classnames('MrlCounter', {\n\t\t\t\t\t\t'MrlCounter-overMaxLength': valueExceedsDataMaxLength\n\t\t\t\t\t})}\n\t\t\t\t\tid={`${inputId}-visible-counter`}\n\t\t\t\t>\n\t\t\t\t\t{value?.length \|\| 0}/{displayedValue}\n\t\t\t\t</span>\n\t\t\t\t<p style={{ display: 'none' }} id={`${inputId}-counter`}>\n\t\t\t\t\t{`${displayedValue - (value?.length \|\| 0)} of ${displayedValue} characters remaining`}\n\t\t\t\t</p>\n\t\t\t</>\n\t\t);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"MrlTextarea--wrapper\">\n\t\t\t\t<textarea\n\t\t\t\t\t{...rest}\n\t\t\t\t\t{...attributes}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t// Force value if defined (controlled component) or pass\n\t\t\t\t\t// undefined and fallback to the default (uncontrolled)\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\taria-describedby={`${inputId}-counter`}\n\t\t\t\t\tmaxLength={hasMaxLength ? maxLength : undefined}\n\t\t\t\t\tref={textareaRef}\n\t\t\t\t\treadOnly={state === 'read-only'}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{displayCounter && state !== 'read-only' && (\n\t\t\t\t<span className={classnames(styles['MrlForm-counter'], 'MrlForm-counter')}>\n\t\t\t\t\t{renderCounter()}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"],"names":["MrlTextarea","_ref","_ref$attrs","attrs","className","inputId","_ref$state","state","maxLength","placeholder","value","_ref$autoExpand","autoExpand","rest","_objectWithoutProperties","_excluded","textareaRef","React","useRef","useEffect","current","autofocus","focus","dataMaxLength","style","height","scrollHeight","hasMaxLength","Number","hasDataMaxLength","displayCounter","isNaN","Error","inputClasses","classnames","class","styles","attributes","setAttributes","renderCounter","displayedValue","valueExceedsDataMaxLength","length","createElement","Fragment","id","concat","display","_extends","disabled","undefined","ref","readOnly"],"mappings":"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"}
1	+ {"version":3,"file":"MrlTextarea.js","sources":["../../../../../../src/components/form/textarea/MrlTextarea/MrlTextarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { AttrsObject, setAttributes } from '../../../../utils';\nimport { useMrlTrackInteraction } from '../../../../hooks/useMrlAnalytics';\n\nimport styles from './MrlTextarea.module.scss';\nimport './MrlTextarea.global.scss';\n\ntype MrlTextareaState = 'default' \| 'disabled' \| 'error' \| 'read-only';\n\ninterface MrlTextareaProps {\n\t/** Applies additional HTML attributes to the textarea element /\n\tattrs?: AttrsObject;\n\t/* The value of the textarea used to make it a controlled input /\n\tvalue?: string;\n\t/\n\t The maximum number of characters that the user can enter.\n\t * If undefined or set to \"0\", removes the character counter from the textarea\n\t /\n\tmaxLength?: number;\n\t/\n\t Id of the text input.\n\t /\n\tinputId: string;\n\t/\n\t Text placeholder for the text input.\n\t /\n\tplaceholder?: string;\n\t/\n\t Changes the state of the input based on user permissions or actions.\n\t /\n\tstate?: MrlTextareaState;\n\n\t/* Additional class to add to the textarea /\n\tclassName?: string;\n\n\t/* Autoexpand will automatically adjust the height of the textarea based on the amount of text within it /\n\tautoExpand?: boolean;\n\n\t/\n\t Enables interaction tracking for this textarea. Provide a stable, non-PII id\n\t * (e.g. 'template-description'). When omitted, the textarea emits no analytics.\n\t \n\t Note: the textarea's value is never emitted, and `change` is emitted once per\n\t * editing session (on blur, when the value actually changed) rather than per keystroke.\n\t /\n\teventId?: string;\n}\n\n/\n Allows the user to input plain text in a multi-line format\n * @param {MrlTextareaProps} props - the component props\n * @returns a textarea element\n /\nexport function MrlTextarea({\n\tattrs = {},\n\tclassName,\n\tinputId,\n\tstate = 'default',\n\tmaxLength,\n\tplaceholder,\n\teventId,\n\tvalue,\n\tautoExpand = false,\n\t...rest\n}: MrlTextareaProps): JSX.Element {\n\tconst textareaRef = React.useRef<HTMLTextAreaElement>(null);\n\t// the value when the field gained focus, so `change` can be emitted once per\n\t// editing session instead of once per keystroke.\n\tconst valueOnFocusRef = React.useRef<string>('');\n\n\tconst trackInteraction = useMrlTrackInteraction('MrlTextarea', eventId);\n\n\tReact.useEffect(() => {\n\t\tif (textareaRef.current && attrs.autofocus) {\n\t\t\ttextareaRef.current.focus();\n\t\t}\n\t}, [attrs, textareaRef]);\n\n\tconst dataMaxLength = attrs['data-maxlength'];\n\n\t// Special use-case for AI Chat Input (AI-658)\n\tReact.useEffect(() => {\n\t\tif (autoExpand && textareaRef.current) {\n\t\t\ttextareaRef.current.style.height = '0px';\n\t\t\tconst scrollHeight = textareaRef.current.scrollHeight + 4;\n\t\t\ttextareaRef.current.style.height = scrollHeight + 'px';\n\t\t}\n\t}, [value, autoExpand]);\n\n\tconst hasMaxLength = typeof maxLength !== 'undefined' && Number(maxLength) > 0;\n\tconst hasDataMaxLength = typeof dataMaxLength !== 'undefined' && Number(dataMaxLength) > 0;\n\n\tconst displayCounter = hasMaxLength \|\| hasDataMaxLength;\n\n\tif (hasMaxLength && isNaN(Number(maxLength))) {\n\t\tthrow new Error('maxLength should have type number');\n\t}\n\n\tif (hasDataMaxLength && isNaN(Number(hasDataMaxLength))) {\n\t\tthrow new Error('data-maxlength should have type number');\n\t}\n\n\tif (hasMaxLength && hasDataMaxLength) {\n\t\tthrow new Error('maxLength and data-maxlength should not be used at the same time');\n\t}\n\n\tconst inputClasses = classnames(\n\t\tattrs.class \|\| attrs.className,\n\t\tclassName,\n\t\tstyles['MrlTextarea'],\n\t\t'MrlTextarea',\n\t\t'mrl-textarea',\n\t\t{\n\t\t\t[styles['MrlTextarea--auto-expand']]: autoExpand,\n\t\t\t[styles['MrlTextarea--read-only']]: state === 'read-only'\n\t\t}\n\t);\n\n\tdelete attrs.class;\n\tdelete attrs.className;\n\n\tconst attributes = setAttributes(attrs);\n\n\t/\n\t Handle focus events\n\t \n\t @param {React.FocusEvent<HTMLTextAreaElement>} e - focus event\n\t /\n\tconst handleOnFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\tvalueOnFocusRef.current = e.target.value;\n\n\t\tif (typeof attributes.onFocus === 'function') {\n\t\t\tattributes.onFocus(e);\n\t\t}\n\t};\n\n\t/\n\t Handle blur events\n\t \n\t @param {React.FocusEvent<HTMLTextAreaElement>} e - blur event\n\t */\n\tconst handleOnBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n\t\t// the value itself is never emitted — only the fact that it changed.\n\t\tif (e.target.value !== valueOnFocusRef.current) {\n\t\t\ttrackInteraction({ action: 'change' });\n\t\t}\n\n\t\tif (typeof attributes.onBlur === 'function') {\n\t\t\tattributes.onBlur(e);\n\t\t}\n\t};\n\n\tconst renderCounter = () => {\n\t\tconst displayedValue = dataMaxLength ? dataMaxLength : maxLength;\n\t\tconst valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={classnames('MrlCounter', {\n\t\t\t\t\t\t'MrlCounter-overMaxLength': valueExceedsDataMaxLength\n\t\t\t\t\t})}\n\t\t\t\t\tid={`${inputId}-visible-counter`}\n\t\t\t\t>\n\t\t\t\t\t{value?.length \|\| 0}/{displayedValue}\n\t\t\t\t</span>\n\t\t\t\t<p style={{ display: 'none' }} id={`${inputId}-counter`}>\n\t\t\t\t\t{`${displayedValue - (value?.length \|\| 0)} of ${displayedValue} characters remaining`}\n\t\t\t\t</p>\n\t\t\t</>\n\t\t);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"MrlTextarea--wrapper\">\n\t\t\t\t<textarea\n\t\t\t\t\t{...rest}\n\t\t\t\t\t{...attributes}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tonBlur={handleOnBlur}\n\t\t\t\t\tonFocus={handleOnFocus}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tclassName={inputClasses}\n\t\t\t\t\t// Force value if defined (controlled component) or pass\n\t\t\t\t\t// undefined and fallback to the default (uncontrolled)\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdisabled={state === 'disabled'}\n\t\t\t\t\taria-invalid={state === 'error'}\n\t\t\t\t\taria-describedby={`${inputId}-counter`}\n\t\t\t\t\tmaxLength={hasMaxLength ? maxLength : undefined}\n\t\t\t\t\tref={textareaRef}\n\t\t\t\t\treadOnly={state === 'read-only'}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{displayCounter && state !== 'read-only' && (\n\t\t\t\t<span className={classnames(styles['MrlForm-counter'], 'MrlForm-counter')}>\n\t\t\t\t\t{renderCounter()}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"],"names":["MrlTextarea","_ref","_ref$attrs","attrs","className","inputId","_ref$state","state","maxLength","placeholder","eventId","value","_ref$autoExpand","autoExpand","rest","_objectWithoutProperties","_excluded","textareaRef","React","useRef","valueOnFocusRef","trackInteraction","useMrlTrackInteraction","useEffect","current","autofocus","focus","dataMaxLength","style","height","scrollHeight","hasMaxLength","Number","hasDataMaxLength","displayCounter","isNaN","Error","inputClasses","classnames","class","styles","attributes","setAttributes","handleOnFocus","e","target","onFocus","handleOnBlur","action","onBlur","renderCounter","displayedValue","valueExceedsDataMaxLength","length","createElement","Fragment","id","concat","display","_extends","disabled","undefined","ref","readOnly"],"mappings":"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"}