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

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

@@ -0,0 +1,215 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+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 setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
+var MrlSvg = require('../../../svg/MrlSvg/MrlSvg.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+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"],
+  _excluded2 = ["aria-describedby"];
+/**
+ * @todo - we need to add static icon support for right
+ */
+
+/**
+ * Allows the user to input plain text
+ * @param {MrlTextInputProps} props - the component props
+ * @param {HTMLInputElement} ref - a ref to the input element in the DOM
+ * @returns a text input element
+ */
+var MrlTextInput = /*#__PURE__*/React__namespace.forwardRef(function MrlTextInput(_ref, ref) {
+  var _ref$attrs = _ref.attrs,
+    attrs = _ref$attrs === void 0 ? {} : _ref$attrs,
+    inputId = _ref.inputId,
+    isClearable = _ref.isClearable,
+    dynamicIcon = _ref.dynamicIcon,
+    hookClear = _ref.hookClear,
+    maxLength = _ref.maxLength,
+    persistIcon = _ref.persistIcon,
+    placeholder = _ref.placeholder,
+    state = _ref.state,
+    value = _ref.value,
+    ariaDescribedByProp = _ref['aria-describedby'],
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var textInputRef = React__namespace.useRef(null);
+  var _useActiveColor = useActiveColor.useActiveColor(state),
+    hasActiveColor = _useActiveColor.hasActiveColor,
+    setHasActiveColor = _useActiveColor.setHasActiveColor;
+  React__namespace.useImperativeHandle(ref, () => textInputRef.current);
+  var clearInput = React__namespace.useCallback(() => {
+    if (textInputRef.current) {
+      textInputRef.current.value = '';
+      textInputRef.current.focus();
+    }
+    if (hookClear && typeof hookClear === 'function') {
+      hookClear();
+    }
+  }, [hookClear]);
+  var hasValue = () => {
+    var _textInputRef$current;
+    return ((_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.value) !== '' || value !== '';
+  };
+  var initialAttributes = setAttributes.setAttributes(attrs);
+  var ariaDescribedByAttrs = initialAttributes['aria-describedby'],
+    attributes = _rollupPluginBabelHelpers.objectWithoutProperties(initialAttributes, _excluded2);
+  var ariaDescribedBy = ariaDescribedByProp || ariaDescribedByAttrs;
+  var handleOnBlur = React__namespace.useCallback(e => {
+    setHasActiveColor(false);
+    if (typeof rest.onBlur === 'function') {
+      rest.onBlur(e);
+    }
+    if (typeof attributes.onBlur === 'function') {
+      attributes.onBlur(e);
+    }
+  }, [attributes, rest, setHasActiveColor]);
+  var handleOnFocus = React__namespace.useCallback(e => {
+    setHasActiveColor(true);
+    if (typeof rest.onFocus === 'function') {
+      rest.onFocus(e);
+    }
+    if (typeof attributes.onFocus === 'function') {
+      attributes.onFocus(e);
+    }
+  }, [attributes, rest, setHasActiveColor]);
+  var handleOnMouseEnter = React__namespace.useCallback(e => {
+    setHasActiveColor(true);
+    if (typeof rest.onMouseEnter === 'function') {
+      rest.onMouseEnter(e);
+    }
+    if (typeof attributes.onMouseEnter === 'function') {
+      attributes.onMouseEnter(e);
+    }
+  }, [attributes, rest, setHasActiveColor]);
+  var handleOnMouseLeave = React__namespace.useCallback(e => {
+    setHasActiveColor(false);
+    if (typeof rest.onMouseLeave === 'function') {
+      rest.onMouseLeave(e);
+    }
+    if (typeof attributes.onMouseLeave === 'function') {
+      attributes.onMouseLeave(e);
+    }
+  }, [attributes, rest, setHasActiveColor]);
+  React__namespace.useEffect(() => {
+    if (textInputRef.current) {
+      if (attributes.autofocus) {
+        textInputRef.current.focus();
+      }
+    }
+    // it should only run on the first render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var stateAllowsClearing = state !== 'disabled' && state !== 'read-only';
+  var inputClasses = classnames__default.default('MrlTextInput', MrlTextInput_module.default['MrlTextInput'], MrlTextInput_module.default['mrl-textInput'], {
+    [MrlTextInput_module.default['MrlTextInput--dynamicIcon']]: isClearable && stateAllowsClearing,
+    [MrlTextInput_module.default['MrlTextInput--persistIcon']]: persistIcon !== undefined,
+    [MrlTextInput_module.default['MrlTextInput--active']]: hasActiveColor
+  }, attributes.class, attributes.className);
+  var hasDynamicIcon = stateAllowsClearing && !isClearable && typeof dynamicIcon !== 'undefined';
+  var dataMaxLength = attrs['data-maxlength'];
+  var hasMaxLength = typeof maxLength !== 'undefined' && Number(maxLength) > 0;
+  var hasDataMaxLength = typeof dataMaxLength !== 'undefined' && Number(dataMaxLength) > 0;
+  if (hasMaxLength && isNaN(Number(maxLength))) {
+    throw new Error('maxLength should have type number');
+  }
+  if (hasDataMaxLength && isNaN(Number(dataMaxLength))) {
+    throw new Error('data-maxlength should have type number');
+  }
+  if (hasMaxLength && hasDataMaxLength) {
+    throw new Error('maxLength and data-maxlength should not be used at the same time');
+  }
+  var displayCounter = hasMaxLength || hasDataMaxLength;
+  var counterDisplayValue = hasDataMaxLength ? dataMaxLength : maxLength;
+  var valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;
+
+  // @todo - 2563 - move to setAttributes
+  delete attributes.class;
+  delete attributes.className;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
+    className: MrlTextInput_module.default['mrl-u-focus-wrapper']
+  }, /*#__PURE__*/React__namespace.createElement("input", _rollupPluginBabelHelpers.extends({
+    type: "text"
+  }, rest, attributes, {
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": state === 'error',
+    className: inputClasses,
+    disabled: state === 'disabled',
+    maxLength: hasMaxLength ? maxLength : undefined,
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
+    onMouseEnter: handleOnMouseEnter,
+    onMouseLeave: handleOnMouseLeave,
+    id: inputId,
+    placeholder: placeholder,
+    readOnly: state === 'read-only',
+    ref: textInputRef,
+    value: value
+  })), /*#__PURE__*/React__namespace.createElement("span", {
+    className: MrlTextInput_module.default['mrl-u-focus-indicator']
+  }), persistIcon && /*#__PURE__*/React__namespace.createElement(MrlSvg.MrlSvg, {
+    "aria-hidden": "true",
+    className: classnames__default.default(MrlTextInput_module.default['MrlTextInput-persistIcon'], {
+      [MrlTextInput_module.default['MrlTextInput-persistIcon--active']]: hasActiveColor,
+      [MrlTextInput_module.default['MrlTextInput-persistIcon--disabled']]: state === 'disabled'
+    }),
+    svg: persistIcon,
+    size: "small",
+    onMouseEnter: () => setHasActiveColor(true),
+    onMouseLeave: () => setHasActiveColor(false)
+  }), stateAllowsClearing && hasValue() && isClearable && /*#__PURE__*/React__namespace.createElement(MrlTextInputRightIcon.MrlTextInputRightIcon, {
+    action: clearInput,
+    icon: dsIcons.closeAlt,
+    label: "Clear input",
+    dataQa: attributes['data-qa'] && "".concat(attributes['data-qa'], "-clear"),
+    hasActiveColor: hasActiveColor,
+    setHasActiveColor: setHasActiveColor,
+    value: value
+  }), hasDynamicIcon && /*#__PURE__*/React__namespace.createElement(MrlTextInputRightIcon.MrlTextInputRightIcon, _rollupPluginBabelHelpers.extends({
+    hasActiveColor: hasActiveColor,
+    setHasActiveColor: setHasActiveColor,
+    value: value
+  }, dynamicIcon))), displayCounter && /*#__PURE__*/React__namespace.createElement("span", {
+    className: classnames__default.default(MrlTextInput_module.default['MrlForm-counter'], 'MrlForm-counter')
+  }, /*#__PURE__*/React__namespace.createElement("span", {
+    className: classnames__default.default('MrlCounter', {
+      'MrlCounter-overMaxLength': valueExceedsDataMaxLength
+    }),
+    "aria-hidden": "true",
+    id: "".concat(inputId, "-visible-counter")
+  }, (value === null || value === void 0 ? void 0 : value.length) || 0, "/", counterDisplayValue), /*#__PURE__*/React__namespace.createElement("p", {
+    style: {
+      display: 'none'
+    },
+    id: "".concat(inputId, "-counter")
+  }, "".concat(counterDisplayValue - ((value === null || value === void 0 ? void 0 : value.length) || 0), " of ").concat(counterDisplayValue, " characters remaining"))));
+});
+
+exports.MrlTextInput = MrlTextInput;
+//# sourceMappingURL=MrlTextInput.js.map

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

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

package/dist/cjs/components/form/text-input/MrlTextInput/MrlTextInput.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"mrl-u-focus-wrapper":"mrl-u-focus-wrapper--grPf4","MrlForm-counter":"MrlForm-counter--sF9rr","MrlTextInput":"MrlTextInput--uKstl","MrlTextInput--dynamicIcon":"MrlTextInput--dynamicIcon--J1WZi","MrlTextInput--persistIcon":"MrlTextInput--persistIcon--gv4Sc","MrlTextInput--active":"MrlTextInput--active--KJ2yW","MrlTextInput-dynamicIcon":"MrlTextInput-dynamicIcon--dnVKz","MrlTextInput-persistIcon":"MrlTextInput-persistIcon--zbx9t","MrlTextInput-persistIcon--disabled":"MrlTextInput-persistIcon--disabled--QbdBd","MrlTextInput-persistIcon--active":"MrlTextInput-persistIcon--active--rZL_v","MrlTextInput-dynamicIcon--active":"MrlTextInput-dynamicIcon--active--VwsGx"};
+
+exports.default = styles;
+//# sourceMappingURL=MrlTextInput.module.scss.js.map

package/dist/cjs/components/form/text-input/MrlTextInput/MrlTextInput.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlTextInput.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

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

@@ -0,0 +1,72 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var MrlTextInput_module = require('./MrlTextInput.module.scss.js');
+var MrlSvg = require('../../../svg/MrlSvg/MrlSvg.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * Renders the right icon in the text input
+ *
+ * @param {MrlTextInputRightIconProps} props - the component props
+ * @returns a button element with an icon
+ */
+function MrlTextInputRightIcon(_ref) {
+  var action = _ref.action,
+    dataQa = _ref.dataQa,
+    hasActiveColor = _ref.hasActiveColor,
+    icon = _ref.icon,
+    label = _ref.label,
+    setHasActiveColor = _ref.setHasActiveColor,
+    value = _ref.value;
+  var handleKeyUp = React__namespace.useCallback(e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      action(e);
+    }
+  }, [action]);
+  return /*#__PURE__*/React__namespace.createElement("span", {
+    className: classnames__default.default(MrlTextInput_module.default['MrlTextInput-dynamicIcon'], {
+      [MrlTextInput_module.default['MrlTextInput-dynamicIcon--active']]: hasActiveColor || value !== ''
+    })
+  }, /*#__PURE__*/React__namespace.createElement("button", {
+    type: "button",
+    "aria-label": label,
+    onMouseUp: action,
+    onKeyUp: handleKeyUp,
+    "data-qa": dataQa,
+    onMouseEnter: () => setHasActiveColor(true),
+    onMouseLeave: () => setHasActiveColor(false),
+    onFocus: () => setHasActiveColor(true),
+    onBlur: () => setHasActiveColor(false)
+  }, /*#__PURE__*/React__namespace.createElement(MrlSvg.MrlSvg, {
+    "aria-hidden": "true",
+    svg: icon,
+    size: "small"
+  })));
+}
+
+exports.MrlTextInputRightIcon = MrlTextInputRightIcon;
+//# sourceMappingURL=MrlTextInputRightIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MrlTextInputRightIcon.js","sources":["../../../../../../src/components/form/text-input/MrlTextInput/MrlTextInputRightIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DSIconType, MrlSvg } from '../../../';\nimport classnames from 'classnames';\n\nimport styles from './MrlTextInput.module.scss';\n\nexport interface MrlTextInputRightIconProps {\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}\n\n/**\n * Renders the right icon in the text input\n *\n * @param {MrlTextInputRightIconProps} props - the component props\n * @returns a button element with an icon\n */\nexport function MrlTextInputRightIcon({\n\taction,\n\tdataQa,\n\thasActiveColor,\n\ticon,\n\tlabel,\n\tsetHasActiveColor,\n\tvalue\n}: MrlTextInputRightIconProps): 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['MrlTextInput-dynamicIcon'], {\n\t\t\t\t[styles['MrlTextInput-dynamicIcon--active']]: hasActiveColor || value !== ''\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>\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":["MrlTextInputRightIcon","_ref","action","dataQa","hasActiveColor","icon","label","setHasActiveColor","value","handleKeyUp","React","useCallback","e","key","createElement","className","classnames","styles","type","onMouseUp","onKeyUp","onMouseEnter","onMouseLeave","onFocus","onBlur","MrlSvg","svg","size"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,qBAAqBA,CAAAC,IAAA,EAQO;AAAA,EAAA,IAP3CC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,cAAc,GAAAH,IAAA,CAAdG,cAAc;IACdC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,iBAAiB,GAAAN,IAAA,CAAjBM,iBAAiB;IACjBC,KAAK,GAAAP,IAAA,CAALO,KAAK;AAEL,EAAA,IAAMC,WAAW,GAAGC,gBAAK,CAACC,WAAW,CACnCC,CAAyC,IAAK;IAC9C,IAAIA,CAAC,CAACC,GAAG,KAAK,GAAG,IAAID,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACvCX,MAAM,CAACU,CAAC,CAAC;AACV,IAAA;AACD,EAAA,CAAC,EACD,CAACV,MAAM,CACR,CAAC;EAED,oBACCQ,gBAAA,CAAAI,aAAA,CAAA,MAAA,EAAA;AACCC,IAAAA,SAAS,EAAEC,2BAAU,CAACC,2BAAM,CAAC,0BAA0B,CAAC,EAAE;MACzD,CAACA,2BAAM,CAAC,kCAAkC,CAAC,GAAGb,cAAc,IAAII,KAAK,KAAK;KAC1E;GAAE,eAEHE,gBAAA,CAAAI,aAAA,CAAA,QAAA,EAAA;AACCI,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYZ,KAAM;AAClBa,IAAAA,SAAS,EAAEjB,MAAO;AAClBkB,IAAAA,OAAO,EAAEX,WAAY;AACrB,IAAA,SAAA,EAASN,MAAO;AAChBkB,IAAAA,YAAY,EAAEA,MAAMd,iBAAiB,CAAC,IAAI,CAAE;AAC5Ce,IAAAA,YAAY,EAAEA,MAAMf,iBAAiB,CAAC,KAAK,CAAE;AAC7CgB,IAAAA,OAAO,EAAEA,MAAMhB,iBAAiB,CAAC,IAAI,CAAE;AACvCiB,IAAAA,MAAM,EAAEA,MAAMjB,iBAAiB,CAAC,KAAK;AAAE,GAAA,eAEvCG,gBAAA,CAAAI,aAAA,CAACW,aAAM,EAAA;AAAC,IAAA,aAAA,EAAY,MAAM;AAACC,IAAAA,GAAG,EAAErB,IAAK;AAACsB,IAAAA,IAAI,EAAC;GAAS,CAC7C,CACH,CAAC;AAET;;;;"}

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

@@ -0,0 +1,212 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+var dsIcons = require('@muraldevkit/ds-icons');
+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 MrlSvg = require('../../../svg/MrlSvg/MrlSvg.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+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"];
+/**
+ * Allows the user to input plain text in a multi-line format
+ * @param {MrlEditableTextareaProps} props - the component props
+ * @returns a textarea element
+ */
+var MrlEditableTextarea = /*#__PURE__*/React__namespace.forwardRef(function MrlEditableTextarea(props, ref) {
+  var _props$autoExpand = props.autoExpand,
+    autoExpand = _props$autoExpand === void 0 ? false : _props$autoExpand,
+    className = props.className,
+    inputId = props.inputId,
+    inputLabelText = props.inputLabelText,
+    maxLength = props.maxLength,
+    placeholder = props.placeholder,
+    state = props.state,
+    value = props.value,
+    error = props.error,
+    controlledIsEditable = props.isEditable,
+    controlledIsEditableUpdate = props.setIsEditable,
+    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);
+  var _useActiveColor = useActiveColor.useActiveColor(state),
+    hasActiveColor = _useActiveColor.hasActiveColor,
+    setHasActiveColor = _useActiveColor.setHasActiveColor;
+  var _useIsEditable = useIsEditable.useIsEditable({
+      changeHandler: controlledIsEditableUpdate,
+      initialValue: false,
+      state,
+      value: controlledIsEditable
+    }),
+    isEditable = _useIsEditable.isEditable,
+    isEditing = _useIsEditable.isEditing,
+    setIsEditable = _useIsEditable.setIsEditable,
+    setIsEditing = _useIsEditable.setIsEditing;
+  // Allows us to track if the user has edited the input previously.
+  // This helps conditionally focus the icon only when the user is done editing the input.
+  var _React$useState = React__namespace.useState(false),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    hasEdited = _React$useState2[0],
+    setHasEdited = _React$useState2[1];
+  React__namespace.useImperativeHandle(ref, () => iconRef.current);
+  React__namespace.useEffect(() => {
+    if (iconRef.current && (attrs.autoFocus || hasEdited)) {
+      iconRef.current.focus();
+    }
+  }, [attrs, iconRef, hasEdited]);
+  React__namespace.useEffect(() => {
+    if (textareaRef.current) {
+      if (isEditable) {
+        textareaRef.current.focus();
+      } else {
+        textareaRef.current.style.height = 'auto';
+        if (!textareaRef.current.value || textareaRef.current.value === '') {
+          textareaRef.current.style.height = '40px';
+        } else {
+          textareaRef.current.style.height = "".concat(textareaRef.current.scrollHeight, "px");
+        }
+      }
+    }
+  }, [isEditable, isEditing]);
+  React__namespace.useEffect(() => {
+    if (!autoExpand || !textareaRef.current) return;
+    textareaRef.current.style.height = 'auto';
+    if (!textareaRef.current.value || textareaRef.current.value === '') {
+      textareaRef.current.style.height = '40px';
+    } else {
+      textareaRef.current.style.height = "".concat(textareaRef.current.scrollHeight, "px");
+    }
+  }, [autoExpand, value]);
+  var onKeyDown = event => {
+    var key = event.key;
+    if (key === 'Escape') {
+      event.stopPropagation();
+      event.preventDefault();
+      setIsEditable(false);
+      setIsEditing(false);
+    }
+  };
+  var handleOnBlur = React__namespace.useCallback(e => {
+    setHasActiveColor(false);
+    setIsEditable(false);
+    setIsEditing(false);
+    setHasEdited(false);
+    if (typeof attrs.onBlur === 'function') {
+      attrs.onBlur(e);
+    }
+  }, [attrs, setHasActiveColor, setIsEditable, setIsEditing]);
+  var handleOnFocus = React__namespace.useCallback(e => {
+    setHasActiveColor(true);
+    setIsEditable(true);
+    setIsEditing(true);
+    setHasEdited(true);
+    if (typeof attrs.onFocus === 'function') {
+      attrs.onFocus(e);
+    }
+  }, [attrs, setHasActiveColor, setIsEditable, setIsEditing]);
+  var handleOnMouseEnter = React__namespace.useCallback(e => {
+    setHasActiveColor(true);
+    if (typeof attrs.onMouseEnter === 'function') {
+      attrs.onMouseEnter(e);
+    }
+  }, [attrs, setHasActiveColor]);
+  var handleOnMouseLeave = React__namespace.useCallback(e => {
+    setHasActiveColor(false);
+    if (typeof attrs.onMouseLeave === 'function') {
+      attrs.onMouseLeave(e);
+    }
+  }, [attrs, setHasActiveColor]);
+  var onClickEdit = React__namespace.useCallback(() => {
+    setIsEditable(true);
+    setIsEditing(true);
+    setHasEdited(true);
+  }, [setIsEditable, setIsEditing, setHasEdited]);
+  var hasCounter = typeof maxLength !== 'undefined' && Number(maxLength) > 0 && state !== 'read-only';
+  if (hasCounter && isNaN(Number(maxLength))) {
+    throw new Error('maxLength should have type number');
+  }
+  var hasErrorMessage = state === 'error' && (error === null || error === void 0 ? void 0 : error.message);
+  var inputClasses = classnames__default.default(className, MrlEditableTextarea_module.default['MrlEditableTextarea'], {
+    [MrlEditableTextarea_module.default['MrlEditableTextarea--readOnly']]: state === 'read-only'
+  }, 'MrlEditableTextarea', 'mrl-textarea');
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
+    className: "".concat(MrlEditableTextarea_module.default['MrlEditableTextarea--wrapper'], " MrlEditableTextarea--wrapper")
+  }, /*#__PURE__*/React__namespace.createElement("textarea", _rollupPluginBabelHelpers.extends({}, attrs, {
+    id: inputId,
+    placeholder: placeholder,
+    className: inputClasses,
+    defaultValue: value,
+    value: value,
+    disabled: state === 'disabled',
+    "aria-invalid": state === 'error',
+    "aria-describedby": hasErrorMessage ? describedById : undefined,
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
+    onMouseEnter: handleOnMouseEnter,
+    onMouseLeave: handleOnMouseLeave,
+    onKeyDown: onKeyDown,
+    maxLength: hasCounter ? maxLength : undefined,
+    readOnly: state === 'read-only' || !isEditable,
+    ref: textareaRef,
+    tabIndex: !isEditable ? -1 : 0
+  })), state !== 'read-only' && state !== 'disabled' && !isEditable && /*#__PURE__*/React__namespace.createElement(MrlEditableTextareaRightButton.MrlEditableTextareaRightButton, {
+    action: onClickEdit,
+    icon: dsIcons.edit,
+    label: "Edit ".concat(inputLabelText),
+    dataQa: attrs['data-qa'] && "".concat(attrs['data-qa'], "-edit"),
+    hasActiveColor: hasActiveColor || isEditable,
+    setHasActiveColor: setHasActiveColor,
+    ref: iconRef
+  })), hasCounter && isEditable && /*#__PURE__*/React__namespace.createElement("span", {
+    className: MrlEditableTextarea_module.default['MrlForm-counter']
+  }, /*#__PURE__*/React__namespace.createElement("span", {
+    "aria-hidden": "true"
+  }, (value === null || value === void 0 ? void 0 : value.length) || 0, "/", maxLength), /*#__PURE__*/React__namespace.createElement("p", {
+    style: {
+      display: 'none'
+    },
+    "aria-live": "polite",
+    id: "".concat(inputId, "-counter")
+  }, "".concat(maxLength - ((value === null || value === void 0 ? void 0 : value.length) || 0), " of ").concat(maxLength, " characters remaining"))), state === 'error' && (error === null || error === void 0 ? void 0 : error.message) && /*#__PURE__*/React__namespace.createElement("span", {
+    className: MrlEditableTextarea_module.default['MrlEditableTextarea-errorMessage']
+  }, /*#__PURE__*/React__namespace.createElement(MrlSvg.MrlSvg, {
+    className: MrlEditableTextarea_module.default['MrlEditableTextarea-errorIcon'],
+    "aria-hidden": "true",
+    svg: dsIcons.error,
+    size: "small"
+  }), /*#__PURE__*/React__namespace.createElement("span", {
+    id: describedById
+  }, "".concat(error === null || error === void 0 ? void 0 : error.message))));
+});
+
+exports.MrlEditableTextarea = MrlEditableTextarea;
+//# sourceMappingURL=MrlEditableTextarea.js.map

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

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

package/dist/cjs/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"MrlForm-counter":"MrlForm-counter--kFYcP","MrlEditableTextarea":"MrlEditableTextarea--AXbhU","MrlEditableTextarea--readOnly":"MrlEditableTextarea--readOnly--nlvYC","MrlEditableTextarea-dynamicIcon":"MrlEditableTextarea-dynamicIcon--oETvh","MrlEditableTextarea-dynamicIcon--active":"MrlEditableTextarea-dynamicIcon--active--M6baN","MrlEditableTextarea-errorMessage":"MrlEditableTextarea-errorMessage--YpckF","MrlEditableTextarea--wrapper":"MrlEditableTextarea--wrapper--h6z0w"};
+
+exports.default = styles;
+//# sourceMappingURL=MrlEditableTextarea.module.scss.js.map

package/dist/cjs/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlEditableTextarea.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}