@muraldevkit/ui-toolkit 4.68.0-dev-NFbt.1 → 4.68.0-dev-5W5E.1

package/dist/esm/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.js.map

@@ -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","_defineProperty","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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"}
+{"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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"}

package/dist/esm/components/form/textarea/MrlEditableTextarea/MrlEditableTextareaRightButton.js

@@ -1,4 +1,3 @@
-import { defineProperty as _defineProperty } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlEditableTextarea.module.scss.js';
@@ -17,31 +16,25 @@ var MrlEditableTextareaRightButton = /*#__PURE__*/React.forwardRef(function MrlT
     icon = _ref.icon,
     label = _ref.label,
     setHasActiveColor = _ref.setHasActiveColor;
-  var handleKeyUp = React.useCallback(function (e) {
+  var handleKeyUp = React.useCallback(e => {
     if (e.key === ' ' || e.key === 'Enter') {
       action(e);
     }
   }, [action]);
   return /*#__PURE__*/React.createElement("span", {
-    className: classnames(styles['MrlEditableTextarea-dynamicIcon'], _defineProperty({}, styles['MrlEditableTextarea-dynamicIcon--active'], hasActiveColor))
+    className: classnames(styles['MrlEditableTextarea-dynamicIcon'], {
+      [styles['MrlEditableTextarea-dynamicIcon--active']]: hasActiveColor
+    })
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": label,
     onMouseUp: action,
     onKeyUp: handleKeyUp,
     "data-qa": dataQa,
-    onMouseEnter: function onMouseEnter() {
-      return setHasActiveColor(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHasActiveColor(false);
-    },
-    onFocus: function onFocus() {
-      return setHasActiveColor(true);
-    },
-    onBlur: function onBlur() {
-      return setHasActiveColor(false);
-    },
+    onMouseEnter: () => setHasActiveColor(true),
+    onMouseLeave: () => setHasActiveColor(false),
+    onFocus: () => setHasActiveColor(true),
+    onBlur: () => setHasActiveColor(false),
     ref: ref
   }, /*#__PURE__*/React.createElement(MrlSvg, {
     "aria-hidden": "true",

package/dist/esm/components/form/textarea/MrlEditableTextarea/MrlEditableTextareaRightButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlEditableTextareaRightButton.js","sources":["../../../../../../src/components/form/textarea/MrlEditableTextarea/MrlEditableTextareaRightButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DSIconType, MrlSvg } from '../../..';\nimport classnames from 'classnames';\n\nimport styles from './MrlEditableTextarea.module.scss';\n\nexport interface MrlEditableTextareaRightButtonProps {\n\t/** the action that should be executed when interacting with the icon */\n\taction: (event: React.MouseEvent | React.KeyboardEvent) => void;\n\t/** the icon that will be rendered */\n\ticon: DSIconType;\n\t/** data-qa attribute for the icon */\n\tdataQa?: string;\n\t/** describes the purpouse of the icon button */\n\tlabel: string;\n\t/** determines if the icon has active color or not */\n\thasActiveColor: boolean;\n\tsetHasActiveColor: (hasActiveColor: boolean) => void;\n\t/** the text input value used to calculate the active style */\n\tvalue?: string;\n\tref?: HTMLButtonElement;\n}\n\n/**\n * Renders the right icon in the text input\n *\n * @param {MrlEditableTextareaRightButtonProps} props - the component props\n * @returns a button element with an icon\n */\nexport const MrlEditableTextareaRightButton = React.forwardRef<\n\tHTMLButtonElement,\n\tMrlEditableTextareaRightButtonProps\n>(function MrlTextInputRightButton(\n\t{\n\t\taction,\n\t\tdataQa,\n\t\thasActiveColor,\n\t\ticon,\n\t\tlabel,\n\t\tsetHasActiveColor\n\t}: MrlEditableTextareaRightButtonProps,\n\tref\n): JSX.Element {\n\tconst handleKeyUp = React.useCallback(\n\t\t(e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tif (e.key === ' ' || e.key === 'Enter') {\n\t\t\t\taction(e);\n\t\t\t}\n\t\t},\n\t\t[action]\n\t);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={classnames(styles['MrlEditableTextarea-dynamicIcon'], {\n\t\t\t\t[styles['MrlEditableTextarea-dynamicIcon--active']]: hasActiveColor\n\t\t\t})}\n\t\t>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-label={label}\n\t\t\t\tonMouseUp={action}\n\t\t\t\tonKeyUp={handleKeyUp}\n\t\t\t\tdata-qa={dataQa}\n\t\t\t\tonMouseEnter={() => setHasActiveColor(true)}\n\t\t\t\tonMouseLeave={() => setHasActiveColor(false)}\n\t\t\t\tonFocus={() => setHasActiveColor(true)}\n\t\t\t\tonBlur={() => setHasActiveColor(false)}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<MrlSvg aria-hidden=\"true\" svg={icon} size=\"small\" />\n\t\t\t</button>\n\t\t</span>\n\t);\n});\n"],"names":["MrlEditableTextareaRightButton","React","forwardRef","MrlTextInputRightButton","_ref","ref","action","dataQa","hasActiveColor","icon","label","setHasActiveColor","handleKeyUp","useCallback","e","key","createElement","className","classnames","styles","_defineProperty","type","onMouseUp","onKeyUp","onMouseEnter","onMouseLeave","onFocus","onBlur","MrlSvg","svg","size"],"mappings":";;;;;;AAuBA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,8BAA8B,gBAAGC,KAAK,CAACC,UAAU,CAG5D,SAASC,uBAAuBA,CAAAC,IAAA,EASjCC,GAAG,EACW;AAAA,EAAA,IARbC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IACdC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,iBAAiB,GAAAP,IAAA,CAAjBO,iBAAiB;EAIlB,IAAMC,WAAW,GAAGX,KAAK,CAACY,WAAW,CACpC,UAACC,CAAyC,EAAK;IAC9C,IAAIA,CAAC,CAACC,GAAG,KAAK,GAAG,IAAID,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACvCT,MAAM,CAACQ,CAAC,CAAC;AACV,IAAA;AACD,EAAA,CAAC,EACD,CAACR,MAAM,CACR,CAAC;EAED,oBACCL,KAAA,CAAAe,aAAA,CAAA,MAAA,EAAA;AACCC,IAAAA,SAAS,EAAEC,UAAU,CAACC,MAAM,CAAC,iCAAiC,CAAC,EAAAC,eAAA,CAAA,EAAA,EAC7DD,MAAM,CAAC,yCAAyC,CAAC,EAAGX,cAAc,CACnE;GAAE,eAEHP,KAAA,CAAAe,aAAA,CAAA,QAAA,EAAA;AACCK,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYX,KAAM;AAClBY,IAAAA,SAAS,EAAEhB,MAAO;AAClBiB,IAAAA,OAAO,EAAEX,WAAY;AACrB,IAAA,SAAA,EAASL,MAAO;IAChBiB,YAAY,EAAE,SAAdA,YAAYA,GAAA;MAAA,OAAQb,iBAAiB,CAAC,IAAI,CAAC;IAAA,CAAC;IAC5Cc,YAAY,EAAE,SAAdA,YAAYA,GAAA;MAAA,OAAQd,iBAAiB,CAAC,KAAK,CAAC;IAAA,CAAC;IAC7Ce,OAAO,EAAE,SAATA,OAAOA,GAAA;MAAA,OAAQf,iBAAiB,CAAC,IAAI,CAAC;IAAA,CAAC;IACvCgB,MAAM,EAAE,SAARA,MAAMA,GAAA;MAAA,OAAQhB,iBAAiB,CAAC,KAAK,CAAC;IAAA,CAAC;AACvCN,IAAAA,GAAG,EAAEA;AAAI,GAAA,eAETJ,KAAA,CAAAe,aAAA,CAACY,MAAM,EAAA;AAAC,IAAA,aAAA,EAAY,MAAM;AAACC,IAAAA,GAAG,EAAEpB,IAAK;AAACqB,IAAAA,IAAI,EAAC;GAAS,CAC7C,CACH,CAAC;AAET,CAAC;;;;"}
+{"version":3,"file":"MrlEditableTextareaRightButton.js","sources":["../../../../../../src/components/form/textarea/MrlEditableTextarea/MrlEditableTextareaRightButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DSIconType, MrlSvg } from '../../..';\nimport classnames from 'classnames';\n\nimport styles from './MrlEditableTextarea.module.scss';\n\nexport interface MrlEditableTextareaRightButtonProps {\n\t/** the action that should be executed when interacting with the icon */\n\taction: (event: React.MouseEvent | React.KeyboardEvent) => void;\n\t/** the icon that will be rendered */\n\ticon: DSIconType;\n\t/** data-qa attribute for the icon */\n\tdataQa?: string;\n\t/** describes the purpouse of the icon button */\n\tlabel: string;\n\t/** determines if the icon has active color or not */\n\thasActiveColor: boolean;\n\tsetHasActiveColor: (hasActiveColor: boolean) => void;\n\t/** the text input value used to calculate the active style */\n\tvalue?: string;\n\tref?: HTMLButtonElement;\n}\n\n/**\n * Renders the right icon in the text input\n *\n * @param {MrlEditableTextareaRightButtonProps} props - the component props\n * @returns a button element with an icon\n */\nexport const MrlEditableTextareaRightButton = React.forwardRef<\n\tHTMLButtonElement,\n\tMrlEditableTextareaRightButtonProps\n>(function MrlTextInputRightButton(\n\t{\n\t\taction,\n\t\tdataQa,\n\t\thasActiveColor,\n\t\ticon,\n\t\tlabel,\n\t\tsetHasActiveColor\n\t}: MrlEditableTextareaRightButtonProps,\n\tref\n): JSX.Element {\n\tconst handleKeyUp = React.useCallback(\n\t\t(e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tif (e.key === ' ' || e.key === 'Enter') {\n\t\t\t\taction(e);\n\t\t\t}\n\t\t},\n\t\t[action]\n\t);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={classnames(styles['MrlEditableTextarea-dynamicIcon'], {\n\t\t\t\t[styles['MrlEditableTextarea-dynamicIcon--active']]: hasActiveColor\n\t\t\t})}\n\t\t>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-label={label}\n\t\t\t\tonMouseUp={action}\n\t\t\t\tonKeyUp={handleKeyUp}\n\t\t\t\tdata-qa={dataQa}\n\t\t\t\tonMouseEnter={() => setHasActiveColor(true)}\n\t\t\t\tonMouseLeave={() => setHasActiveColor(false)}\n\t\t\t\tonFocus={() => setHasActiveColor(true)}\n\t\t\t\tonBlur={() => setHasActiveColor(false)}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<MrlSvg aria-hidden=\"true\" svg={icon} size=\"small\" />\n\t\t\t</button>\n\t\t</span>\n\t);\n});\n"],"names":["MrlEditableTextareaRightButton","React","forwardRef","MrlTextInputRightButton","_ref","ref","action","dataQa","hasActiveColor","icon","label","setHasActiveColor","handleKeyUp","useCallback","e","key","createElement","className","classnames","styles","type","onMouseUp","onKeyUp","onMouseEnter","onMouseLeave","onFocus","onBlur","MrlSvg","svg","size"],"mappings":";;;;;AAuBA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,8BAA8B,gBAAGC,KAAK,CAACC,UAAU,CAG5D,SAASC,uBAAuBA,CAAAC,IAAA,EASjCC,GAAG,EACW;AAAA,EAAA,IARbC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IACdC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,iBAAiB,GAAAP,IAAA,CAAjBO,iBAAiB;AAIlB,EAAA,IAAMC,WAAW,GAAGX,KAAK,CAACY,WAAW,CACnCC,CAAyC,IAAK;IAC9C,IAAIA,CAAC,CAACC,GAAG,KAAK,GAAG,IAAID,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACvCT,MAAM,CAACQ,CAAC,CAAC;AACV,IAAA;AACD,EAAA,CAAC,EACD,CAACR,MAAM,CACR,CAAC;EAED,oBACCL,KAAA,CAAAe,aAAA,CAAA,MAAA,EAAA;AACCC,IAAAA,SAAS,EAAEC,UAAU,CAACC,MAAM,CAAC,iCAAiC,CAAC,EAAE;AAChE,MAAA,CAACA,MAAM,CAAC,yCAAyC,CAAC,GAAGX;KACrD;GAAE,eAEHP,KAAA,CAAAe,aAAA,CAAA,QAAA,EAAA;AACCI,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYV,KAAM;AAClBW,IAAAA,SAAS,EAAEf,MAAO;AAClBgB,IAAAA,OAAO,EAAEV,WAAY;AACrB,IAAA,SAAA,EAASL,MAAO;AAChBgB,IAAAA,YAAY,EAAEA,MAAMZ,iBAAiB,CAAC,IAAI,CAAE;AAC5Ca,IAAAA,YAAY,EAAEA,MAAMb,iBAAiB,CAAC,KAAK,CAAE;AAC7Cc,IAAAA,OAAO,EAAEA,MAAMd,iBAAiB,CAAC,IAAI,CAAE;AACvCe,IAAAA,MAAM,EAAEA,MAAMf,iBAAiB,CAAC,KAAK,CAAE;AACvCN,IAAAA,GAAG,EAAEA;AAAI,GAAA,eAETJ,KAAA,CAAAe,aAAA,CAACW,MAAM,EAAA;AAAC,IAAA,aAAA,EAAY,MAAM;AAACC,IAAAA,GAAG,EAAEnB,IAAK;AAACoB,IAAAA,IAAI,EAAC;GAAS,CAC7C,CACH,CAAC;AAET,CAAC;;;;"}

package/dist/esm/components/form/textarea/MrlTextarea/MrlTextarea.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlTextarea.module.scss.js';
@@ -24,7 +24,7 @@ function MrlTextarea(_ref) {
     autoExpand = _ref$autoExpand === void 0 ? false : _ref$autoExpand,
     rest = _objectWithoutProperties(_ref, _excluded);
   var textareaRef = React.useRef(null);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (textareaRef.current && attrs.autofocus) {
       textareaRef.current.focus();
     }
@@ -32,7 +32,7 @@ function MrlTextarea(_ref) {
   var dataMaxLength = attrs['data-maxlength'];
 
   // Special use-case for AI Chat Input (AI-658)
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (autoExpand && textareaRef.current) {
       textareaRef.current.style.height = '0px';
       var scrollHeight = textareaRef.current.scrollHeight + 4;
@@ -51,11 +51,14 @@ function MrlTextarea(_ref) {
   if (hasMaxLength && hasDataMaxLength) {
     throw new Error('maxLength and data-maxlength should not be used at the same time');
   }
-  var inputClasses = classnames(attrs["class"] || attrs.className, className, styles['MrlTextarea'], 'MrlTextarea', 'mrl-textarea', _defineProperty(_defineProperty({}, styles['MrlTextarea--auto-expand'], autoExpand), styles['MrlTextarea--read-only'], state === 'read-only'));
-  delete attrs["class"];
+  var inputClasses = classnames(attrs.class || attrs.className, className, styles['MrlTextarea'], 'MrlTextarea', 'mrl-textarea', {
+    [styles['MrlTextarea--auto-expand']]: autoExpand,
+    [styles['MrlTextarea--read-only']]: state === 'read-only'
+  });
+  delete attrs.class;
   delete attrs.className;
   var attributes = setAttributes(attrs);
-  var renderCounter = function renderCounter() {
+  var renderCounter = () => {
     var displayedValue = dataMaxLength ? dataMaxLength : maxLength;
     var valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {

package/dist/esm/components/form/textarea/MrlTextarea/MrlTextarea.js.map

@@ -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","styles","_defineProperty","attributes","setAttributes","renderCounter","displayedValue","valueExceedsDataMaxLength","length","createElement","Fragment","id","concat","display","_extends","disabled","undefined","ref","readOnly"],"mappings":"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"}
+{"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":";;;;;;;AAuCA;AACA;AACA;AACA;AACA;AACO,SAASA,WAAWA,CAAAC,IAAA,EAUO;AAAA,EAAA,IAAAC,UAAA,GAAAD,IAAA,CATjCE,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,UAAA;IACVE,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,UAAA,GAAAL,IAAA,CACPM,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAA,MAAA,GAAG,SAAS,GAAAA,UAAA;IACjBE,SAAS,GAAAP,IAAA,CAATO,SAAS;IACTC,WAAW,GAAAR,IAAA,CAAXQ,WAAW;IACXC,KAAK,GAAAT,IAAA,CAALS,KAAK;IAAAC,eAAA,GAAAV,IAAA,CACLW,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,eAAA;AACfE,IAAAA,IAAI,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA,CAAA;AAEP,EAAA,IAAMC,WAAW,GAAGC,KAAK,CAACC,MAAM,CAAsB,IAAI,CAAC;EAE3DD,KAAK,CAACE,SAAS,CAAC,MAAM;AACrB,IAAA,IAAIH,WAAW,CAACI,OAAO,IAAIjB,KAAK,CAACkB,SAAS,EAAE;AAC3CL,MAAAA,WAAW,CAACI,OAAO,CAACE,KAAK,EAAE;AAC5B,IAAA;AACD,EAAA,CAAC,EAAE,CAACnB,KAAK,EAAEa,WAAW,CAAC,CAAC;AAExB,EAAA,IAAMO,aAAa,GAAGpB,KAAK,CAAC,gBAAgB,CAAC;;AAE7C;EACAc,KAAK,CAACE,SAAS,CAAC,MAAM;AACrB,IAAA,IAAIP,UAAU,IAAII,WAAW,CAACI,OAAO,EAAE;AACtCJ,MAAAA,WAAW,CAACI,OAAO,CAACI,KAAK,CAACC,MAAM,GAAG,KAAK;MACxC,IAAMC,YAAY,GAAGV,WAAW,CAACI,OAAO,CAACM,YAAY,GAAG,CAAC;MACzDV,WAAW,CAACI,OAAO,CAACI,KAAK,CAACC,MAAM,GAAGC,YAAY,GAAG,IAAI;AACvD,IAAA;AACD,EAAA,CAAC,EAAE,CAAChB,KAAK,EAAEE,UAAU,CAAC,CAAC;AAEvB,EAAA,IAAMe,YAAY,GAAG,OAAOnB,SAAS,KAAK,WAAW,IAAIoB,MAAM,CAACpB,SAAS,CAAC,GAAG,CAAC;AAC9E,EAAA,IAAMqB,gBAAgB,GAAG,OAAON,aAAa,KAAK,WAAW,IAAIK,MAAM,CAACL,aAAa,CAAC,GAAG,CAAC;AAE1F,EAAA,IAAMO,cAAc,GAAGH,YAAY,IAAIE,gBAAgB;EAEvD,IAAIF,YAAY,IAAII,KAAK,CAACH,MAAM,CAACpB,SAAS,CAAC,CAAC,EAAE;AAC7C,IAAA,MAAM,IAAIwB,KAAK,CAAC,mCAAmC,CAAC;AACrD,EAAA;EAEA,IAAIH,gBAAgB,IAAIE,KAAK,CAACH,MAAM,CAACC,gBAAgB,CAAC,CAAC,EAAE;AACxD,IAAA,MAAM,IAAIG,KAAK,CAAC,wCAAwC,CAAC;AAC1D,EAAA;EAEA,IAAIL,YAAY,IAAIE,gBAAgB,EAAE;AACrC,IAAA,MAAM,IAAIG,KAAK,CAAC,kEAAkE,CAAC;AACpF,EAAA;EAEA,IAAMC,YAAY,GAAGC,UAAU,CAC9B/B,KAAK,CAACgC,KAAK,IAAIhC,KAAK,CAACC,SAAS,EAC9BA,SAAS,EACTgC,MAAM,CAAC,aAAa,CAAC,EACrB,aAAa,EACb,cAAc,EACd;AACC,IAAA,CAACA,MAAM,CAAC,0BAA0B,CAAC,GAAGxB,UAAU;AAChD,IAAA,CAACwB,MAAM,CAAC,wBAAwB,CAAC,GAAG7B,KAAK,KAAK;AAC/C,GACD,CAAC;EAED,OAAOJ,KAAK,CAACgC,KAAK;EAClB,OAAOhC,KAAK,CAACC,SAAS;AAEtB,EAAA,IAAMiC,UAAU,GAAGC,aAAa,CAACnC,KAAK,CAAC;EAEvC,IAAMoC,aAAa,GAAGA,MAAM;AAC3B,IAAA,IAAMC,cAAc,GAAGjB,aAAa,GAAGA,aAAa,GAAGf,SAAS;AAChE,IAAA,IAAMiC,yBAAyB,GAAGlB,aAAa,IAAIb,KAAK,GAAGA,KAAK,CAACgC,MAAM,GAAGnB,aAAa,GAAG,KAAK;IAC/F,oBACCN,KAAA,CAAA0B,aAAA,CAAA1B,KAAA,CAAA2B,QAAA,EAAA,IAAA,eACC3B,KAAA,CAAA0B,aAAA,CAAA,MAAA,EAAA;AACC,MAAA,aAAA,EAAY,MAAM;AAClBvC,MAAAA,SAAS,EAAE8B,UAAU,CAAC,YAAY,EAAE;AACnC,QAAA,0BAA0B,EAAEO;AAC7B,OAAC,CAAE;MACHI,EAAE,EAAA,EAAA,CAAAC,MAAA,CAAKzC,OAAO,EAAA,kBAAA;AAAmB,KAAA,EAEhC,CAAAK,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAEgC,MAAM,KAAI,CAAC,EAAC,GAAC,EAACF,cACjB,CAAC,eACPvB,KAAA,CAAA0B,aAAA,CAAA,GAAA,EAAA;AAAGnB,MAAAA,KAAK,EAAE;AAAEuB,QAAAA,OAAO,EAAE;OAAS;MAACF,EAAE,EAAA,EAAA,CAAAC,MAAA,CAAKzC,OAAO,EAAA,UAAA;KAAW,EAAA,EAAA,CAAAyC,MAAA,CACnDN,cAAc,IAAI,CAAA9B,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAEgC,MAAM,KAAI,CAAC,CAAC,EAAA,MAAA,CAAA,CAAAI,MAAA,CAAON,cAAc,EAAA,uBAAA,CAC5D,CACF,CAAC;EAEL,CAAC;EAED,oBACCvB,KAAA,CAAA0B,aAAA,CAAA1B,KAAA,CAAA2B,QAAA,EAAA,IAAA,eACC3B,KAAA,CAAA0B,aAAA,CAAA,KAAA,EAAA;AAAKvC,IAAAA,SAAS,EAAC;GAAsB,eACpCa,KAAA,CAAA0B,aAAA,CAAA,UAAA,EAAAK,QAAA,CAAA,EAAA,EACKnC,IAAI,EACJwB,UAAU,EAAA;AACdQ,IAAAA,EAAE,EAAExC,OAAQ;AACZI,IAAAA,WAAW,EAAEA,WAAY;AACzBL,IAAAA,SAAS,EAAE6B;AACX;AACA;AAAA;AACAvB,IAAAA,KAAK,EAAEA,KAAM;IACbuC,QAAQ,EAAE1C,KAAK,KAAK,UAAW;IAC/B,cAAA,EAAcA,KAAK,KAAK,OAAQ;IAChC,kBAAA,EAAA,EAAA,CAAAuC,MAAA,CAAqBzC,OAAO,EAAA,UAAA,CAAW;AACvCG,IAAAA,SAAS,EAAEmB,YAAY,GAAGnB,SAAS,GAAG0C,SAAU;AAChDC,IAAAA,GAAG,EAAEnC,WAAY;IACjBoC,QAAQ,EAAE7C,KAAK,KAAK;GAAY,CAChC,CACG,CAAC,EACLuB,cAAc,IAAIvB,KAAK,KAAK,WAAW,iBACvCU,KAAA,CAAA0B,aAAA,CAAA,MAAA,EAAA;IAAMvC,SAAS,EAAE8B,UAAU,CAACE,MAAM,CAAC,iBAAiB,CAAC,EAAE,iBAAiB;AAAE,GAAA,EACxEG,aAAa,EACT,CAEN,CAAC;AAEL;;;;"}

package/dist/esm/components/form/utils.js

@@ -40,7 +40,7 @@ var actions = {
  * @param {string | undefined} search - current searchstring to determine how to handle space presses
  * @returns {number | undefined} - returns action number or quits from function execution
  */
-var getActionFromKey = function getActionFromKey(event, isMenuOpen, search) {
+var getActionFromKey = (event, isMenuOpen, search) => {
   var key = event.key,
     altKey = event.altKey,
     ctrlKey = event.ctrlKey,
@@ -119,9 +119,7 @@ function getDescribedby() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-  var describedby = args.filter(function (str) {
-    return Boolean(str);
-  }).join(' ');
+  var describedby = args.filter(str => Boolean(str)).join(' ');
   if (describedby === '') return {};
   return {
     'aria-describedby': describedby

package/dist/esm/components/form/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from 'react';\n\n/**\n * Defines all of the possible actions a user can take with their keyboard in a select.\n * This is used to create a more human-friendly connection between the actions and\n * keyboard short cuts since multiple keys may perform the same action.\n * See getActionFromKey for more details.\n *\n * @todo - need to verify what the pageDown/Up keys do differently. They have a\n * \t\tdifferent action in the getUpdatedIndex function but need to understand\n * \t\ta bit more.  This is not merge blocking for MVP\n */\nexport const actions = {\n\t// Closes the menu without changing the value\n\tClose: 0,\n\t// Selects an item and closes the menu in one key press\n\tCloseSelect: 1,\n\t// Opens the menu and moves focus to the first item in the the menu\n\tFirst: 2,\n\t// Opens the menu and moves focus to the last item in the menu\n\tLast: 3,\n\t// Moves focus to the next item in the list\n\tNext: 4,\n\t// Displays the menu and moves focus to the selected item\n\tOpen: 5,\n\tPageDown: 6,\n\tPageUp: 7,\n\t// Moves focus to the previous item in the list\n\tPrevious: 8,\n\t// Selects the item without closing the list??\n\t// I don't think this is used anywhere\n\t// Select: 9,\n\t// The user is free-form typing to find an item in the menu\n\tType: 10\n};\n\n/**\n * Map a key press to an action (see the )\n *\n * @param {KeyboardEvent} event - keyboard event\n * @param {boolean} isMenuOpen - dropdown menu state\n * @param {string | undefined} search - current searchstring to determine how to handle space presses\n * @returns {number | undefined} - returns action number or quits from function execution\n */\nexport const getActionFromKey = (\n\tevent: KeyboardEvent,\n\tisMenuOpen: boolean,\n\tsearch?: string | undefined\n): number | undefined => {\n\tconst { key, altKey, ctrlKey, metaKey } = event;\n\n\t// all keys that will do the default open action\n\tconst openKeys = ['ArrowDown', 'ArrowUp', ' '];\n\n\t// handle opening when closed\n\tif (!isMenuOpen && openKeys.includes(key)) return actions.Open;\n\n\t// home and end move the selected option when open or closed\n\tif (key === 'Home') return actions.First;\n\tif (key === 'End') return actions.Last;\n\n\t// handle typing characters when open or closed\n\tif (\n\t\tkey === 'Backspace' ||\n\t\tkey === 'Clear' ||\n\t\t(key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey) ||\n\t\t(search !== '' && key === ' ')\n\t) {\n\t\treturn actions.Type;\n\t}\n\n\t// handle shortcuts only allowed when the menu is open\n\tif (isMenuOpen) {\n\t\tswitch (key) {\n\t\tcase 'ArrowUp':\n\t\t\treturn altKey ? actions.CloseSelect : actions.Previous;\n\t\tcase 'ArrowDown':\n\t\t\treturn !altKey ? actions.Next : undefined;\n\t\tcase 'PageUp':\n\t\t\treturn actions.PageUp;\n\t\tcase 'PageDown':\n\t\t\treturn actions.PageDown;\n\t\tcase 'Escape':\n\t\t\treturn actions.Close;\n\t\tcase 'Enter':\n\t\tcase ' ':\n\t\t\treturn actions.CloseSelect;\n\t\tdefault:\n\t\t\tbreak;\n\t\t}\n\t}\n};\n\n/**\n * Get an updated item index based on the action\n *\n * @param {number} currentIndex - index of the active menu item\n * @param {number} maxIndex - last menu item's index\n * @param {action} action - keyboard key action\n * @returns {number} - returns updated index\n */\nexport const getUpdatedIndex = (currentIndex: number, maxIndex = 0, action: number): number => {\n\tswitch (action) {\n\tcase actions.First:\n\t\treturn 0;\n\tcase actions.Last:\n\t\treturn maxIndex;\n\tcase actions.Previous:\n\t\treturn Math.max(0, currentIndex === null ? 0 : currentIndex - 1);\n\tcase actions.Next:\n\t\treturn Math.min(maxIndex, currentIndex === null ? 0 : currentIndex + 1);\n\tcase actions.PageUp:\n\t\treturn Math.max(0, currentIndex === null ? 0 : currentIndex - maxIndex);\n\tcase actions.PageDown:\n\t\treturn Math.min(maxIndex, currentIndex === null ? 0 : currentIndex + maxIndex);\n\tdefault:\n\t\treturn currentIndex;\n\t}\n};\n\n/**\n * Checks if the select menu items has scrollable overflow\n *\n * @param {HTMLElement} menu - select menu component\n * @returns {boolean} - true if the menu has overflow content\n */\nexport const isScrollable = (menu: HTMLElement): boolean =>\n\tmenu && menu.clientHeight < menu.scrollHeight;\n\n/**\n * Ensures a given child element is within the parents's visible scroll area.\n * If the child is not visible, it scrolls the parent element.\n *\n * @param {HTMLElement} childEl - clicked/focused select item\n * @param {HTMLElement} scrollParent - select menu component\n * @todo - POST MVP - this could be a more reusable util function for other components\n * @todo - POST MVP - the marginY should be more dynamic\n */\nexport const maintainScrollVisibility = (childEl: HTMLElement, scrollParent: HTMLElement): void => {\n\tconst { offsetHeight, offsetTop } = childEl;\n\tconst { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\n\n\tconst isAbove = offsetTop < scrollTop;\n\tconst isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n\t// total amount of select item's Y-axis spacing\n\tconst marginY = 4 + 4;\n\n\tif (isAbove) {\n\t\tscrollParent.scrollTo(0, offsetTop - marginY);\n\t} else if (isBelow) {\n\t\tscrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + marginY);\n\t}\n};\n\n/**\n * Filters an array of items against an input string\n * returns an array of options that begin with the filter string, case-independent\n *\n * @param {Element[]} options - menu items list\n * @param {string} filter - pressed letters combination\n * @returns {Element[]} - filtered options\n */\nconst filterOptions = (options: Element[], filter: string): Element[] => {\n\treturn options.filter((option) => {\n\t\tconst matches = option.textContent?.toLowerCase().indexOf(filter.toLowerCase()) === 0;\n\t\treturn matches;\n\t});\n};\n\n/**\n * Checks if the pressed letter is the same as previously pressed\n *\n * @param {string[]} array - filter string split by letters\n * @returns {boolean} - if the pressed letter is the same as previously pressed\n */\nconst allSameLetter = (array: Array<string>) =>\n\tarray.every((letter: string) => letter === array[0]);\n\n/**\n * Returns the index of an option from an array of options, based on a search string\n * if the filter is multiple iterations of the same letter (e.g \"aaa\"), then cycle through first-letter matches\n *\n * @param {Element[]} options - menu items list\n * @param {string} filter - pressed letters combination\n * @param {number} startIndex - start index\n * @returns {number} - menu item's index\n */\nexport const getIndexByLetter = (options: Element[], filter: string, startIndex = 0): number => {\n\tconst orderedOptions = [...options.slice(startIndex), ...options.slice(0, startIndex)];\n\tconst firstMatch = filterOptions(orderedOptions, filter)[0];\n\n\t// first check if there is an exact match for the typed string\n\tif (firstMatch) return options.indexOf(firstMatch);\n\t// if the same letter is being repeated, cycle through first-letter matches\n\telse if (allSameLetter(filter.split(''))) {\n\t\tconst matches = filterOptions(orderedOptions, filter[0]);\n\t\treturn options.indexOf(matches[0]);\n\t}\n\n\t// if no matches, return -1\n\telse return -1;\n};\n\ntype DebounceType = number | null | undefined;\ntype CallbackType = (_debounce: number) => void;\n\n/**\n * Waits a predetermined time before calling a function\n *\n * @param {Function} func - function to call after timeout\n * @param {number} timeout - time to wait before calling function\n * @param {number} debounce - existing debounce to clear\n * @param {Function} callback - callback function to update debounce\n * @returns {Function} - function to reset debounce and call callback\n * @todo - 4969 investigate combining this debounce function with the modal debounce function\n */\nexport const debounce = (\n\tfunc: () => void,\n\ttimeout = 500,\n\tdebounce: DebounceType,\n\tcallback: CallbackType\n): (() => void) => {\n\tif (debounce !== null) {\n\t\tclearTimeout(debounce);\n\t\tdebounce = null;\n\t}\n\treturn () => {\n\t\tdebounce = window.setTimeout(() => {\n\t\t\tfunc.apply(this);\n\t\t}, timeout);\n\t\tcallback(debounce);\n\t};\n};\n\ntype GetAriaDescribedByReturn =\n\t| { ['aria-describedby']?: string }\n\t| { ['aria-describedby']: string };\n\n/**\n * Generates the 'aria-describedby' attribute from multiple ids\n *\n * @param {Array<string | undefined>} args ids\n * @returns {GetAriaDescribedByReturn} an object with aria-describedby\n */\nexport function getDescribedby(...args: Array<string | undefined>): GetAriaDescribedByReturn {\n\tconst describedby = args.filter((str) => Boolean(str)).join(' ');\n\tif (describedby === '') return {};\n\treturn {\n\t\t'aria-describedby': describedby\n\t};\n}\n"],"names":["actions","Close","CloseSelect","First","Last","Next","Open","PageDown","PageUp","Previous","Type","getActionFromKey","event","isMenuOpen","search","key","altKey","ctrlKey","metaKey","openKeys","includes","length","undefined","getUpdatedIndex","currentIndex","maxIndex","arguments","action","Math","max","min","getDescribedby","_len","args","Array","_key","describedby","filter","str","Boolean","join"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from 'react';\n\n/**\n * Defines all of the possible actions a user can take with their keyboard in a select.\n * This is used to create a more human-friendly connection between the actions and\n * keyboard short cuts since multiple keys may perform the same action.\n * See getActionFromKey for more details.\n *\n * @todo - need to verify what the pageDown/Up keys do differently. They have a\n * \t\tdifferent action in the getUpdatedIndex function but need to understand\n * \t\ta bit more.  This is not merge blocking for MVP\n */\nexport const actions = {\n\t// Closes the menu without changing the value\n\tClose: 0,\n\t// Selects an item and closes the menu in one key press\n\tCloseSelect: 1,\n\t// Opens the menu and moves focus to the first item in the the menu\n\tFirst: 2,\n\t// Opens the menu and moves focus to the last item in the menu\n\tLast: 3,\n\t// Moves focus to the next item in the list\n\tNext: 4,\n\t// Displays the menu and moves focus to the selected item\n\tOpen: 5,\n\tPageDown: 6,\n\tPageUp: 7,\n\t// Moves focus to the previous item in the list\n\tPrevious: 8,\n\t// Selects the item without closing the list??\n\t// I don't think this is used anywhere\n\t// Select: 9,\n\t// The user is free-form typing to find an item in the menu\n\tType: 10\n};\n\n/**\n * Map a key press to an action (see the )\n *\n * @param {KeyboardEvent} event - keyboard event\n * @param {boolean} isMenuOpen - dropdown menu state\n * @param {string | undefined} search - current searchstring to determine how to handle space presses\n * @returns {number | undefined} - returns action number or quits from function execution\n */\nexport const getActionFromKey = (\n\tevent: KeyboardEvent,\n\tisMenuOpen: boolean,\n\tsearch?: string | undefined\n): number | undefined => {\n\tconst { key, altKey, ctrlKey, metaKey } = event;\n\n\t// all keys that will do the default open action\n\tconst openKeys = ['ArrowDown', 'ArrowUp', ' '];\n\n\t// handle opening when closed\n\tif (!isMenuOpen && openKeys.includes(key)) return actions.Open;\n\n\t// home and end move the selected option when open or closed\n\tif (key === 'Home') return actions.First;\n\tif (key === 'End') return actions.Last;\n\n\t// handle typing characters when open or closed\n\tif (\n\t\tkey === 'Backspace' ||\n\t\tkey === 'Clear' ||\n\t\t(key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey) ||\n\t\t(search !== '' && key === ' ')\n\t) {\n\t\treturn actions.Type;\n\t}\n\n\t// handle shortcuts only allowed when the menu is open\n\tif (isMenuOpen) {\n\t\tswitch (key) {\n\t\tcase 'ArrowUp':\n\t\t\treturn altKey ? actions.CloseSelect : actions.Previous;\n\t\tcase 'ArrowDown':\n\t\t\treturn !altKey ? actions.Next : undefined;\n\t\tcase 'PageUp':\n\t\t\treturn actions.PageUp;\n\t\tcase 'PageDown':\n\t\t\treturn actions.PageDown;\n\t\tcase 'Escape':\n\t\t\treturn actions.Close;\n\t\tcase 'Enter':\n\t\tcase ' ':\n\t\t\treturn actions.CloseSelect;\n\t\tdefault:\n\t\t\tbreak;\n\t\t}\n\t}\n};\n\n/**\n * Get an updated item index based on the action\n *\n * @param {number} currentIndex - index of the active menu item\n * @param {number} maxIndex - last menu item's index\n * @param {action} action - keyboard key action\n * @returns {number} - returns updated index\n */\nexport const getUpdatedIndex = (currentIndex: number, maxIndex = 0, action: number): number => {\n\tswitch (action) {\n\tcase actions.First:\n\t\treturn 0;\n\tcase actions.Last:\n\t\treturn maxIndex;\n\tcase actions.Previous:\n\t\treturn Math.max(0, currentIndex === null ? 0 : currentIndex - 1);\n\tcase actions.Next:\n\t\treturn Math.min(maxIndex, currentIndex === null ? 0 : currentIndex + 1);\n\tcase actions.PageUp:\n\t\treturn Math.max(0, currentIndex === null ? 0 : currentIndex - maxIndex);\n\tcase actions.PageDown:\n\t\treturn Math.min(maxIndex, currentIndex === null ? 0 : currentIndex + maxIndex);\n\tdefault:\n\t\treturn currentIndex;\n\t}\n};\n\n/**\n * Checks if the select menu items has scrollable overflow\n *\n * @param {HTMLElement} menu - select menu component\n * @returns {boolean} - true if the menu has overflow content\n */\nexport const isScrollable = (menu: HTMLElement): boolean =>\n\tmenu && menu.clientHeight < menu.scrollHeight;\n\n/**\n * Ensures a given child element is within the parents's visible scroll area.\n * If the child is not visible, it scrolls the parent element.\n *\n * @param {HTMLElement} childEl - clicked/focused select item\n * @param {HTMLElement} scrollParent - select menu component\n * @todo - POST MVP - this could be a more reusable util function for other components\n * @todo - POST MVP - the marginY should be more dynamic\n */\nexport const maintainScrollVisibility = (childEl: HTMLElement, scrollParent: HTMLElement): void => {\n\tconst { offsetHeight, offsetTop } = childEl;\n\tconst { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\n\n\tconst isAbove = offsetTop < scrollTop;\n\tconst isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n\t// total amount of select item's Y-axis spacing\n\tconst marginY = 4 + 4;\n\n\tif (isAbove) {\n\t\tscrollParent.scrollTo(0, offsetTop - marginY);\n\t} else if (isBelow) {\n\t\tscrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + marginY);\n\t}\n};\n\n/**\n * Filters an array of items against an input string\n * returns an array of options that begin with the filter string, case-independent\n *\n * @param {Element[]} options - menu items list\n * @param {string} filter - pressed letters combination\n * @returns {Element[]} - filtered options\n */\nconst filterOptions = (options: Element[], filter: string): Element[] => {\n\treturn options.filter((option) => {\n\t\tconst matches = option.textContent?.toLowerCase().indexOf(filter.toLowerCase()) === 0;\n\t\treturn matches;\n\t});\n};\n\n/**\n * Checks if the pressed letter is the same as previously pressed\n *\n * @param {string[]} array - filter string split by letters\n * @returns {boolean} - if the pressed letter is the same as previously pressed\n */\nconst allSameLetter = (array: Array<string>) =>\n\tarray.every((letter: string) => letter === array[0]);\n\n/**\n * Returns the index of an option from an array of options, based on a search string\n * if the filter is multiple iterations of the same letter (e.g \"aaa\"), then cycle through first-letter matches\n *\n * @param {Element[]} options - menu items list\n * @param {string} filter - pressed letters combination\n * @param {number} startIndex - start index\n * @returns {number} - menu item's index\n */\nexport const getIndexByLetter = (options: Element[], filter: string, startIndex = 0): number => {\n\tconst orderedOptions = [...options.slice(startIndex), ...options.slice(0, startIndex)];\n\tconst firstMatch = filterOptions(orderedOptions, filter)[0];\n\n\t// first check if there is an exact match for the typed string\n\tif (firstMatch) return options.indexOf(firstMatch);\n\t// if the same letter is being repeated, cycle through first-letter matches\n\telse if (allSameLetter(filter.split(''))) {\n\t\tconst matches = filterOptions(orderedOptions, filter[0]);\n\t\treturn options.indexOf(matches[0]);\n\t}\n\n\t// if no matches, return -1\n\telse return -1;\n};\n\ntype DebounceType = number | null | undefined;\ntype CallbackType = (_debounce: number) => void;\n\n/**\n * Waits a predetermined time before calling a function\n *\n * @param {Function} func - function to call after timeout\n * @param {number} timeout - time to wait before calling function\n * @param {number} debounce - existing debounce to clear\n * @param {Function} callback - callback function to update debounce\n * @returns {Function} - function to reset debounce and call callback\n * @todo - 4969 investigate combining this debounce function with the modal debounce function\n */\nexport const debounce = (\n\tfunc: () => void,\n\ttimeout = 500,\n\tdebounce: DebounceType,\n\tcallback: CallbackType\n): (() => void) => {\n\tif (debounce !== null) {\n\t\tclearTimeout(debounce);\n\t\tdebounce = null;\n\t}\n\treturn () => {\n\t\tdebounce = window.setTimeout(() => {\n\t\t\tfunc.apply(this);\n\t\t}, timeout);\n\t\tcallback(debounce);\n\t};\n};\n\ntype GetAriaDescribedByReturn =\n\t| { ['aria-describedby']?: string }\n\t| { ['aria-describedby']: string };\n\n/**\n * Generates the 'aria-describedby' attribute from multiple ids\n *\n * @param {Array<string | undefined>} args ids\n * @returns {GetAriaDescribedByReturn} an object with aria-describedby\n */\nexport function getDescribedby(...args: Array<string | undefined>): GetAriaDescribedByReturn {\n\tconst describedby = args.filter((str) => Boolean(str)).join(' ');\n\tif (describedby === '') return {};\n\treturn {\n\t\t'aria-describedby': describedby\n\t};\n}\n"],"names":["actions","Close","CloseSelect","First","Last","Next","Open","PageDown","PageUp","Previous","Type","getActionFromKey","event","isMenuOpen","search","key","altKey","ctrlKey","metaKey","openKeys","includes","length","undefined","getUpdatedIndex","currentIndex","maxIndex","arguments","action","Math","max","min","getDescribedby","_len","args","Array","_key","describedby","filter","str","Boolean","join"],"mappings":"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"}

package/dist/esm/components/grid/MrlCol/MrlCol.js

@@ -1,53 +1,42 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, createForOfIteratorHelper as _createForOfIteratorHelper, typeof as _typeof, slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import { GridSizes } from '../constants.js';
 
 var _excluded = ["children", "className"];
-var getBootstrapClass = function getBootstrapClass(size, type, val) {
-  return size === 'col' || size === 'xs' ? "".concat(type, "-").concat(val) : "".concat(type, "-").concat(size, "-").concat(val);
-};
+var getBootstrapClass = (size, type, val) => size === 'col' || size === 'xs' ? "".concat(type, "-").concat(val) : "".concat(type, "-").concat(size, "-").concat(val);
 
 /**
  * Creates the size classes for the grid.
  * @param props - component props
  * @returns an array of size classes based on bootstrap grid API
  */
-var createSizeClasses = function createSizeClasses(props) {
+var createSizeClasses = props => {
   var classes = [];
-  var _iterator = _createForOfIteratorHelper(GridSizes),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var size = _step.value;
-      // get the value based on the prop key from the component props
-      var value = props[size];
+  for (var size of GridSizes) {
+    // get the value based on the prop key from the component props
+    var value = props[size];
 
-      // create the size class based on the value using the bootstrap grid API
-      if (value) {
-        // if the value is a number, then it is a column size
-        if (typeof value === 'number') {
-          classes.push(getBootstrapClass(size, 'col', value));
-          continue;
-        }
+    // create the size class based on the value using the bootstrap grid API
+    if (value) {
+      // if the value is a number, then it is a column size
+      if (typeof value === 'number') {
+        classes.push(getBootstrapClass(size, 'col', value));
+        continue;
+      }
 
-        // if the value is an object, then we need to compose multiple classes
-        // based on the keyvalue pairings
-        if (value !== null && _typeof(value) === 'object') {
-          for (var _i = 0, _Object$entries = Object.entries(value); _i < _Object$entries.length; _i++) {
-            var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-              key = _Object$entries$_i[0],
-              val = _Object$entries$_i[1];
-            if (val === 0 || val === undefined) continue;
-            classes.push(getBootstrapClass(size, key, val));
-          }
+      // if the value is an object, then we need to compose multiple classes
+      // based on the keyvalue pairings
+      if (value !== null && typeof value === 'object') {
+        for (var _ref3 of Object.entries(value)) {
+          var _ref2 = _slicedToArray(_ref3, 2);
+          var key = _ref2[0];
+          var val = _ref2[1];
+          if (val === 0 || val === undefined) continue;
+          classes.push(getBootstrapClass(size, key, val));
         }
       }
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
   }
   if (classes.length === 0) classes.push('col');
   return classes;
@@ -58,7 +47,7 @@ var createSizeClasses = function createSizeClasses(props) {
  * @param props  - component props
  * @returns object of grid size props
  */
-var getGridProps = function getGridProps(props) {
+var getGridProps = props => {
   var col = props.col,
     xs = props.xs,
     sm = props.sm,
@@ -69,13 +58,13 @@ var getGridProps = function getGridProps(props) {
 
   // eslint-disable-next-line sort-keys
   return {
-    col: col,
-    xs: xs,
-    sm: sm,
-    md: md,
-    lg: lg,
-    xl: xl,
-    xxl: xxl
+    col,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl
   };
 };
 
@@ -90,9 +79,7 @@ function MrlCol(props) {
     className = _props$className === void 0 ? '' : _props$className,
     rest = _objectWithoutProperties(props, _excluded);
   var gridProps = getGridProps(props);
-  var columnClasses = React.useMemo(function () {
-    return createSizeClasses(gridProps);
-  }, [gridProps]);
+  var columnClasses = React.useMemo(() => createSizeClasses(gridProps), [gridProps]);
   var allClasses = classnames(className, columnClasses);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: allClasses

package/dist/esm/components/grid/MrlCol/MrlCol.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlCol.js","sources":["../../../../../src/components/grid/MrlCol/MrlCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../../layout/constants';\nimport { GridSizes, GridColumns } from '../constants';\n\ntype MrlCol = LayoutComponent & GridColumns;\n\nconst getBootstrapClass = (size: string, type: string, val: number | string): string =>\n\tsize === 'col' || size === 'xs' ? `${type}-${val}` : `${type}-${size}-${val}`;\n\n/**\n * Creates the size classes for the grid.\n * @param props - component props\n * @returns an array of size classes based on bootstrap grid API\n */\nconst createSizeClasses = (props: GridColumns): string[] => {\n\tconst classes: string[] = [];\n\n\tfor (const size of GridSizes) {\n\t\t// get the value based on the prop key from the component props\n\t\tconst value = props[size as keyof GridColumns];\n\n\t\t// create the size class based on the value using the bootstrap grid API\n\t\tif (value) {\n\t\t\t// if the value is a number, then it is a column size\n\t\t\tif (typeof value === 'number') {\n\t\t\t\tclasses.push(getBootstrapClass(size, 'col', value));\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// if the value is an object, then we need to compose multiple classes\n\t\t\t// based on the keyvalue pairings\n\t\t\tif (value !== null && typeof value === 'object') {\n\t\t\t\tfor (const [key, val] of Object.entries(value)) {\n\t\t\t\t\tif (val === 0 || val === undefined) continue;\n\t\t\t\t\tclasses.push(getBootstrapClass(size, key, val as number));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tif (classes.length === 0) classes.push('col');\n\n\treturn classes;\n};\n\n/**\n * Gets the grid size props from the component props.\n * @param props  - component props\n * @returns object of grid size props\n */\nconst getGridProps = (props: MrlCol): GridColumns => {\n\tconst { col, xs, sm, md, lg, xl, xxl } = props;\n\n\t// eslint-disable-next-line sort-keys\n\treturn { col, xs, sm, md, lg, xl, xxl };\n};\n\n/**\n * MrlCol React component.\n * @param props - component props\n * @returns a MrlCol React component.\n */\nexport function MrlCol(props: MrlCol): JSX.Element {\n\tconst { children, className = '', ...rest } = props;\n\tconst gridProps = getGridProps(props);\n\n\tconst columnClasses = React.useMemo(() => createSizeClasses(gridProps), [gridProps]);\n\tconst allClasses = classnames(className, columnClasses);\n\n\treturn (\n\t\t<div {...rest} className={allClasses}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"names":["getBootstrapClass","size","type","val","concat","createSizeClasses","props","classes","_iterator","_createForOfIteratorHelper","GridSizes","_step","s","n","done","value","push","_typeof","_i","_Object$entries","Object","entries","length","_Object$entries$_i","_slicedToArray","key","undefined","err","e","f","getGridProps","col","xs","sm","md","lg","xl","xxl","MrlCol","children","_props$className","className","rest","_objectWithoutProperties","_excluded","gridProps","columnClasses","React","useMemo","allClasses","classnames","createElement","_extends"],"mappings":"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"}
+{"version":3,"file":"MrlCol.js","sources":["../../../../../src/components/grid/MrlCol/MrlCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../../layout/constants';\nimport { GridSizes, GridColumns } from '../constants';\n\ntype MrlCol = LayoutComponent & GridColumns;\n\nconst getBootstrapClass = (size: string, type: string, val: number | string): string =>\n\tsize === 'col' || size === 'xs' ? `${type}-${val}` : `${type}-${size}-${val}`;\n\n/**\n * Creates the size classes for the grid.\n * @param props - component props\n * @returns an array of size classes based on bootstrap grid API\n */\nconst createSizeClasses = (props: GridColumns): string[] => {\n\tconst classes: string[] = [];\n\n\tfor (const size of GridSizes) {\n\t\t// get the value based on the prop key from the component props\n\t\tconst value = props[size as keyof GridColumns];\n\n\t\t// create the size class based on the value using the bootstrap grid API\n\t\tif (value) {\n\t\t\t// if the value is a number, then it is a column size\n\t\t\tif (typeof value === 'number') {\n\t\t\t\tclasses.push(getBootstrapClass(size, 'col', value));\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// if the value is an object, then we need to compose multiple classes\n\t\t\t// based on the keyvalue pairings\n\t\t\tif (value !== null && typeof value === 'object') {\n\t\t\t\tfor (const [key, val] of Object.entries(value)) {\n\t\t\t\t\tif (val === 0 || val === undefined) continue;\n\t\t\t\t\tclasses.push(getBootstrapClass(size, key, val as number));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tif (classes.length === 0) classes.push('col');\n\n\treturn classes;\n};\n\n/**\n * Gets the grid size props from the component props.\n * @param props  - component props\n * @returns object of grid size props\n */\nconst getGridProps = (props: MrlCol): GridColumns => {\n\tconst { col, xs, sm, md, lg, xl, xxl } = props;\n\n\t// eslint-disable-next-line sort-keys\n\treturn { col, xs, sm, md, lg, xl, xxl };\n};\n\n/**\n * MrlCol React component.\n * @param props - component props\n * @returns a MrlCol React component.\n */\nexport function MrlCol(props: MrlCol): JSX.Element {\n\tconst { children, className = '', ...rest } = props;\n\tconst gridProps = getGridProps(props);\n\n\tconst columnClasses = React.useMemo(() => createSizeClasses(gridProps), [gridProps]);\n\tconst allClasses = classnames(className, columnClasses);\n\n\treturn (\n\t\t<div {...rest} className={allClasses}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"names":["getBootstrapClass","size","type","val","concat","createSizeClasses","props","classes","GridSizes","value","push","_ref3","Object","entries","_ref2","_slicedToArray","key","undefined","length","getGridProps","col","xs","sm","md","lg","xl","xxl","MrlCol","children","_props$className","className","rest","_objectWithoutProperties","_excluded","gridProps","columnClasses","React","useMemo","allClasses","classnames","createElement","_extends"],"mappings":"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"}

package/dist/esm/components/layout/MrlMain/MrlMain.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import { useLayoutContext } from '../context/LayoutContext.js';
@@ -18,7 +18,9 @@ function MrlMain(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useLayoutContext = useLayoutContext(),
     isTopbarRendered = _useLayoutContext.isTopbarRendered;
-  var allClasses = classnames(styles['MrlMain'], 'mrl-main', className, _defineProperty({}, styles['MrlMain--noTopbar'], !isTopbarRendered));
+  var allClasses = classnames(styles['MrlMain'], 'mrl-main', className, {
+    [styles['MrlMain--noTopbar']]: !isTopbarRendered
+  });
   return /*#__PURE__*/React.createElement("main", _extends({}, rest, {
     className: allClasses
   }), children);

package/dist/esm/components/layout/MrlMain/MrlMain.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlMain.js","sources":["../../../../../src/components/layout/MrlMain/MrlMain.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../constants';\nimport { useLayoutContext } from '../context/LayoutContext';\n\nimport styles from './MrlMain.module.scss';\n\n/**\n * MrlMain React component.\n * @param props - component props\n * @returns a MrlMain React component.\n */\nexport function MrlMain({ children, className = '', ...rest }: LayoutComponent): JSX.Element {\n\tconst { isTopbarRendered } = useLayoutContext();\n\tconst allClasses = classnames(styles['MrlMain'], 'mrl-main', className, {\n\t\t[styles['MrlMain--noTopbar']]: !isTopbarRendered\n\t});\n\n\treturn (\n\t\t<main {...rest} className={allClasses}>\n\t\t\t{children}\n\t\t</main>\n\t);\n}\n"],"names":["MrlMain","_ref","children","_ref$className","className","rest","_objectWithoutProperties","_excluded","_useLayoutContext","useLayoutContext","isTopbarRendered","allClasses","classnames","styles","_defineProperty","React","createElement","_extends"],"mappings":";;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAAsE;AAAA,EAAA,IAAnEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;AAAKE,IAAAA,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AAC1D,EAAA,IAAAC,iBAAA,GAA6BC,gBAAgB,EAAE;IAAvCC,gBAAgB,GAAAF,iBAAA,CAAhBE,gBAAgB;EACxB,IAAMC,UAAU,GAAGC,UAAU,CAACC,MAAM,CAAC,SAAS,CAAC,EAAE,UAAU,EAAET,SAAS,EAAAU,eAAA,CAAA,EAAA,EACpED,MAAM,CAAC,mBAAmB,CAAC,EAAG,CAACH,gBAAgB,CAChD,CAAC;AAEF,EAAA,oBACCK,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAAC,QAAA,KAAUZ,IAAI,EAAA;AAAED,IAAAA,SAAS,EAAEO;AAAW,GAAA,CAAA,EACpCT,QACI,CAAC;AAET;;;;"}
+{"version":3,"file":"MrlMain.js","sources":["../../../../../src/components/layout/MrlMain/MrlMain.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { LayoutComponent } from '../constants';\nimport { useLayoutContext } from '../context/LayoutContext';\n\nimport styles from './MrlMain.module.scss';\n\n/**\n * MrlMain React component.\n * @param props - component props\n * @returns a MrlMain React component.\n */\nexport function MrlMain({ children, className = '', ...rest }: LayoutComponent): JSX.Element {\n\tconst { isTopbarRendered } = useLayoutContext();\n\tconst allClasses = classnames(styles['MrlMain'], 'mrl-main', className, {\n\t\t[styles['MrlMain--noTopbar']]: !isTopbarRendered\n\t});\n\n\treturn (\n\t\t<main {...rest} className={allClasses}>\n\t\t\t{children}\n\t\t</main>\n\t);\n}\n"],"names":["MrlMain","_ref","children","_ref$className","className","rest","_objectWithoutProperties","_excluded","_useLayoutContext","useLayoutContext","isTopbarRendered","allClasses","classnames","styles","React","createElement","_extends"],"mappings":";;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAAsE;AAAA,EAAA,IAAnEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;AAAKE,IAAAA,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AAC1D,EAAA,IAAAC,iBAAA,GAA6BC,gBAAgB,EAAE;IAAvCC,gBAAgB,GAAAF,iBAAA,CAAhBE,gBAAgB;AACxB,EAAA,IAAMC,UAAU,GAAGC,UAAU,CAACC,MAAM,CAAC,SAAS,CAAC,EAAE,UAAU,EAAET,SAAS,EAAE;AACvE,IAAA,CAACS,MAAM,CAAC,mBAAmB,CAAC,GAAG,CAACH;AACjC,GAAC,CAAC;AAEF,EAAA,oBACCI,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAAC,QAAA,KAAUX,IAAI,EAAA;AAAED,IAAAA,SAAS,EAAEO;AAAW,GAAA,CAAA,EACpCT,QACI,CAAC;AAET;;;;"}

package/dist/esm/components/layout/MrlPage/MrlPage.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import { useLayoutContext } from '../context/LayoutContext.js';
@@ -17,7 +17,9 @@ function MrlPage(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useLayoutContext = useLayoutContext(),
     isTopbarRendered = _useLayoutContext.isTopbarRendered;
-  var allClasses = classnames(styles['MrlPage'], 'mrl-page', className, _defineProperty({}, styles['MrlPage--no-topbar'], !isTopbarRendered));
+  var allClasses = classnames(styles['MrlPage'], 'mrl-page', className, {
+    [styles['MrlPage--no-topbar']]: !isTopbarRendered
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: allClasses
   }), children));

package/dist/esm/components/layout/MrlPage/MrlPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlPage.js","sources":["../../../../../src/components/layout/MrlPage/MrlPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { useLayoutContext } from '../context/LayoutContext';\nimport { LayoutComponent } from '../constants';\n\nimport styles from './MrlPage.module.scss';\n\ntype MrlPage = LayoutComponent;\n\n/**\n * MrlPage React component.\n * @param props - component props\n * @returns a MrlPage React component.\n */\nexport function MrlPage({ children, className = '', ...rest }: MrlPage): JSX.Element {\n\tconst { isTopbarRendered } = useLayoutContext();\n\n\tconst allClasses = classnames(styles['MrlPage'], 'mrl-page', className, {\n\t\t[styles['MrlPage--no-topbar']]: !isTopbarRendered\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<div {...rest} className={allClasses}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"names":["MrlPage","_ref","children","_ref$className","className","rest","_objectWithoutProperties","_excluded","_useLayoutContext","useLayoutContext","isTopbarRendered","allClasses","classnames","styles","_defineProperty","React","createElement","Fragment","_extends"],"mappings":";;;;;;;AASA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAA8D;AAAA,EAAA,IAA3DC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;AAAKE,IAAAA,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AAC1D,EAAA,IAAAC,iBAAA,GAA6BC,gBAAgB,EAAE;IAAvCC,gBAAgB,GAAAF,iBAAA,CAAhBE,gBAAgB;EAExB,IAAMC,UAAU,GAAGC,UAAU,CAACC,MAAM,CAAC,SAAS,CAAC,EAAE,UAAU,EAAET,SAAS,EAAAU,eAAA,CAAA,EAAA,EACpED,MAAM,CAAC,oBAAoB,CAAC,EAAG,CAACH,gBAAgB,CACjD,CAAC;AAEF,EAAA,oBACCK,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,eACCF,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAE,QAAA,KAASb,IAAI,EAAA;AAAED,IAAAA,SAAS,EAAEO;GAAW,CAAA,EACnCT,QACG,CACJ,CAAC;AAEL;;;;"}
+{"version":3,"file":"MrlPage.js","sources":["../../../../../src/components/layout/MrlPage/MrlPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { useLayoutContext } from '../context/LayoutContext';\nimport { LayoutComponent } from '../constants';\n\nimport styles from './MrlPage.module.scss';\n\ntype MrlPage = LayoutComponent;\n\n/**\n * MrlPage React component.\n * @param props - component props\n * @returns a MrlPage React component.\n */\nexport function MrlPage({ children, className = '', ...rest }: MrlPage): JSX.Element {\n\tconst { isTopbarRendered } = useLayoutContext();\n\n\tconst allClasses = classnames(styles['MrlPage'], 'mrl-page', className, {\n\t\t[styles['MrlPage--no-topbar']]: !isTopbarRendered\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<div {...rest} className={allClasses}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"names":["MrlPage","_ref","children","_ref$className","className","rest","_objectWithoutProperties","_excluded","_useLayoutContext","useLayoutContext","isTopbarRendered","allClasses","classnames","styles","React","createElement","Fragment","_extends"],"mappings":";;;;;;;AASA;AACA;AACA;AACA;AACA;AACO,SAASA,OAAOA,CAAAC,IAAA,EAA8D;AAAA,EAAA,IAA3DC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;AAAKE,IAAAA,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AAC1D,EAAA,IAAAC,iBAAA,GAA6BC,gBAAgB,EAAE;IAAvCC,gBAAgB,GAAAF,iBAAA,CAAhBE,gBAAgB;AAExB,EAAA,IAAMC,UAAU,GAAGC,UAAU,CAACC,MAAM,CAAC,SAAS,CAAC,EAAE,UAAU,EAAET,SAAS,EAAE;AACvE,IAAA,CAACS,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAACH;AAClC,GAAC,CAAC;AAEF,EAAA,oBACCI,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,eACCF,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAE,QAAA,KAASZ,IAAI,EAAA;AAAED,IAAAA,SAAS,EAAEO;GAAW,CAAA,EACnCT,QACG,CACJ,CAAC;AAEL;;;;"}