@muraldevkit/ui-toolkit 4.67.0-dev-Vc0V.1 → 4.68.0-dev-NFbt.1

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

@@ -0,0 +1,208 @@
+'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 _interopNamespaceDefault(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__*/_interopNamespaceDefault(React);
+
+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: 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, function () {
+    return iconRef.current;
+  });
+  React__namespace.useEffect(function () {
+    if (iconRef.current && (attrs.autoFocus || hasEdited)) {
+      iconRef.current.focus();
+    }
+  }, [attrs, iconRef, hasEdited]);
+  React__namespace.useEffect(function () {
+    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(function () {
+    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 = function onKeyDown(event) {
+    var key = event.key;
+    if (key === 'Escape') {
+      event.stopPropagation();
+      event.preventDefault();
+      setIsEditable(false);
+      setIsEditing(false);
+    }
+  };
+  var handleOnBlur = React__namespace.useCallback(function (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(function (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(function (e) {
+    setHasActiveColor(true);
+    if (typeof attrs.onMouseEnter === 'function') {
+      attrs.onMouseEnter(e);
+    }
+  }, [attrs, setHasActiveColor]);
+  var handleOnMouseLeave = React__namespace.useCallback(function (e) {
+    setHasActiveColor(false);
+    if (typeof attrs.onMouseLeave === 'function') {
+      attrs.onMouseLeave(e);
+    }
+  }, [attrs, setHasActiveColor]);
+  var onClickEdit = React__namespace.useCallback(function () {
+    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(className, MrlEditableTextarea_module.default['MrlEditableTextarea'], _rollupPluginBabelHelpers.defineProperty({}, 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","_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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"}

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":";;;;;;;;"}

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

@@ -0,0 +1,75 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+var MrlEditableTextarea_module = require('./MrlEditableTextarea.module.scss.js');
+var MrlSvg = require('../../../svg/MrlSvg/MrlSvg.js');
+
+function _interopNamespaceDefault(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__*/_interopNamespaceDefault(React);
+
+/**
+ * Renders the right icon in the text input
+ *
+ * @param {MrlEditableTextareaRightButtonProps} props - the component props
+ * @returns a button element with an icon
+ */
+var MrlEditableTextareaRightButton = /*#__PURE__*/React__namespace.forwardRef(function MrlTextInputRightButton(_ref, ref) {
+  var action = _ref.action,
+    dataQa = _ref.dataQa,
+    hasActiveColor = _ref.hasActiveColor,
+    icon = _ref.icon,
+    label = _ref.label,
+    setHasActiveColor = _ref.setHasActiveColor;
+  var handleKeyUp = React__namespace.useCallback(function (e) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      action(e);
+    }
+  }, [action]);
+  return /*#__PURE__*/React__namespace.createElement("span", {
+    className: classnames(MrlEditableTextarea_module.default['MrlEditableTextarea-dynamicIcon'], _rollupPluginBabelHelpers.defineProperty({}, MrlEditableTextarea_module.default['MrlEditableTextarea-dynamicIcon--active'], hasActiveColor))
+  }, /*#__PURE__*/React__namespace.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);
+    },
+    ref: ref
+  }, /*#__PURE__*/React__namespace.createElement(MrlSvg.MrlSvg, {
+    "aria-hidden": "true",
+    svg: icon,
+    size: "small"
+  })));
+});
+
+exports.MrlEditableTextareaRightButton = MrlEditableTextareaRightButton;
+//# sourceMappingURL=MrlEditableTextareaRightButton.js.map

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

@@ -0,0 +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,gBAAK,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,gBAAK,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,gBAAA,CAAAe,aAAA,CAAA,MAAA,EAAA;AACCC,IAAAA,SAAS,EAAEC,UAAU,CAACC,kCAAM,CAAC,iCAAiC,CAAC,EAAAC,wCAAA,CAAA,EAAA,EAC7DD,kCAAM,CAAC,yCAAyC,CAAC,EAAGX,cAAc,CACnE;GAAE,eAEHP,gBAAA,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,gBAAA,CAAAe,aAAA,CAACY,aAAM,EAAA;AAAC,IAAA,aAAA,EAAY,MAAM;AAACC,IAAAA,GAAG,EAAEpB,IAAK;AAACqB,IAAAA,IAAI,EAAC;GAAS,CAC7C,CACH,CAAC;AAET,CAAC;;;;"}

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

@@ -0,0 +1,117 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+var MrlTextarea_module = require('./MrlTextarea.module.scss.js');
+var setAttributes = require('../../../../utils/setAttributes/setAttributes.js');
+
+function _interopNamespaceDefault(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__*/_interopNamespaceDefault(React);
+
+var _excluded = ["attrs", "className", "inputId", "state", "maxLength", "placeholder", "value", "autoExpand"];
+/**
+ * Allows the user to input plain text in a multi-line format
+ * @param {MrlTextareaProps} props - the component props
+ * @returns a textarea element
+ */
+function MrlTextarea(_ref) {
+  var _ref$attrs = _ref.attrs,
+    attrs = _ref$attrs === void 0 ? {} : _ref$attrs,
+    className = _ref.className,
+    inputId = _ref.inputId,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? 'default' : _ref$state,
+    maxLength = _ref.maxLength,
+    placeholder = _ref.placeholder,
+    value = _ref.value,
+    _ref$autoExpand = _ref.autoExpand,
+    autoExpand = _ref$autoExpand === void 0 ? false : _ref$autoExpand,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var textareaRef = React__namespace.useRef(null);
+  React__namespace.useEffect(function () {
+    if (textareaRef.current && attrs.autofocus) {
+      textareaRef.current.focus();
+    }
+  }, [attrs, textareaRef]);
+  var dataMaxLength = attrs['data-maxlength'];
+
+  // Special use-case for AI Chat Input (AI-658)
+  React__namespace.useEffect(function () {
+    if (autoExpand && textareaRef.current) {
+      textareaRef.current.style.height = '0px';
+      var scrollHeight = textareaRef.current.scrollHeight + 4;
+      textareaRef.current.style.height = scrollHeight + 'px';
+    }
+  }, [value, autoExpand]);
+  var hasMaxLength = typeof maxLength !== 'undefined' && Number(maxLength) > 0;
+  var hasDataMaxLength = typeof dataMaxLength !== 'undefined' && Number(dataMaxLength) > 0;
+  var displayCounter = hasMaxLength || hasDataMaxLength;
+  if (hasMaxLength && isNaN(Number(maxLength))) {
+    throw new Error('maxLength should have type number');
+  }
+  if (hasDataMaxLength && isNaN(Number(hasDataMaxLength))) {
+    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 inputClasses = classnames(attrs["class"] || attrs.className, className, MrlTextarea_module.default['MrlTextarea'], 'MrlTextarea', 'mrl-textarea', _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, MrlTextarea_module.default['MrlTextarea--auto-expand'], autoExpand), MrlTextarea_module.default['MrlTextarea--read-only'], state === 'read-only'));
+  delete attrs["class"];
+  delete attrs.className;
+  var attributes = setAttributes.setAttributes(attrs);
+  var renderCounter = function renderCounter() {
+    var displayedValue = dataMaxLength ? dataMaxLength : maxLength;
+    var valueExceedsDataMaxLength = dataMaxLength && value ? value.length > dataMaxLength : false;
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("span", {
+      "aria-hidden": "true",
+      className: classnames('MrlCounter', {
+        'MrlCounter-overMaxLength': valueExceedsDataMaxLength
+      }),
+      id: "".concat(inputId, "-visible-counter")
+    }, (value === null || value === void 0 ? void 0 : value.length) || 0, "/", displayedValue), /*#__PURE__*/React__namespace.createElement("p", {
+      style: {
+        display: 'none'
+      },
+      id: "".concat(inputId, "-counter")
+    }, "".concat(displayedValue - ((value === null || value === void 0 ? void 0 : value.length) || 0), " of ").concat(displayedValue, " characters remaining")));
+  };
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
+    className: "MrlTextarea--wrapper"
+  }, /*#__PURE__*/React__namespace.createElement("textarea", _rollupPluginBabelHelpers.extends({}, rest, attributes, {
+    id: inputId,
+    placeholder: placeholder,
+    className: inputClasses
+    // Force value if defined (controlled component) or pass
+    // undefined and fallback to the default (uncontrolled)
+    ,
+    value: value,
+    disabled: state === 'disabled',
+    "aria-invalid": state === 'error',
+    "aria-describedby": "".concat(inputId, "-counter"),
+    maxLength: hasMaxLength ? maxLength : undefined,
+    ref: textareaRef,
+    readOnly: state === 'read-only'
+  }))), displayCounter && state !== 'read-only' && /*#__PURE__*/React__namespace.createElement("span", {
+    className: classnames(MrlTextarea_module.default['MrlForm-counter'], 'MrlForm-counter')
+  }, renderCounter()));
+}
+
+exports.MrlTextarea = MrlTextarea;
+//# sourceMappingURL=MrlTextarea.js.map

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

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

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

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"MrlForm-counter":"MrlForm-counter--eeE6B","MrlTextarea":"MrlTextarea--ikG_t","MrlTextarea--auto-expand":"MrlTextarea--auto-expand--IIgp0","MrlTextarea--read-only":"MrlTextarea--read-only--mQLr3"};
+
+exports.default = styles;
+//# sourceMappingURL=MrlTextarea.module.scss.js.map

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

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

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

@@ -0,0 +1,137 @@
+'use strict';
+
+/**
+ * Defines all of the possible actions a user can take with their keyboard in a select.
+ * This is used to create a more human-friendly connection between the actions and
+ * keyboard short cuts since multiple keys may perform the same action.
+ * See getActionFromKey for more details.
+ *
+ * @todo - need to verify what the pageDown/Up keys do differently. They have a
+ * 		different action in the getUpdatedIndex function but need to understand
+ * 		a bit more.  This is not merge blocking for MVP
+ */
+var actions = {
+  // Closes the menu without changing the value
+  Close: 0,
+  // Selects an item and closes the menu in one key press
+  CloseSelect: 1,
+  // Opens the menu and moves focus to the first item in the the menu
+  First: 2,
+  // Opens the menu and moves focus to the last item in the menu
+  Last: 3,
+  // Moves focus to the next item in the list
+  Next: 4,
+  // Displays the menu and moves focus to the selected item
+  Open: 5,
+  PageDown: 6,
+  PageUp: 7,
+  // Moves focus to the previous item in the list
+  Previous: 8,
+  // Selects the item without closing the list??
+  // I don't think this is used anywhere
+  // Select: 9,
+  // The user is free-form typing to find an item in the menu
+  Type: 10
+};
+
+/**
+ * Map a key press to an action (see the )
+ *
+ * @param {KeyboardEvent} event - keyboard event
+ * @param {boolean} isMenuOpen - dropdown menu state
+ * @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 key = event.key,
+    altKey = event.altKey,
+    ctrlKey = event.ctrlKey,
+    metaKey = event.metaKey;
+
+  // all keys that will do the default open action
+  var openKeys = ['ArrowDown', 'ArrowUp', ' '];
+
+  // handle opening when closed
+  if (!isMenuOpen && openKeys.includes(key)) return actions.Open;
+
+  // home and end move the selected option when open or closed
+  if (key === 'Home') return actions.First;
+  if (key === 'End') return actions.Last;
+
+  // handle typing characters when open or closed
+  if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey || key === ' ') {
+    return actions.Type;
+  }
+
+  // handle shortcuts only allowed when the menu is open
+  if (isMenuOpen) {
+    switch (key) {
+      case 'ArrowUp':
+        return altKey ? actions.CloseSelect : actions.Previous;
+      case 'ArrowDown':
+        return !altKey ? actions.Next : undefined;
+      case 'PageUp':
+        return actions.PageUp;
+      case 'PageDown':
+        return actions.PageDown;
+      case 'Escape':
+        return actions.Close;
+      case 'Enter':
+      case ' ':
+        return actions.CloseSelect;
+    }
+  }
+};
+
+/**
+ * Get an updated item index based on the action
+ *
+ * @param {number} currentIndex - index of the active menu item
+ * @param {number} maxIndex - last menu item's index
+ * @param {action} action - keyboard key action
+ * @returns {number} - returns updated index
+ */
+var getUpdatedIndex = function getUpdatedIndex(currentIndex) {
+  var maxIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var action = arguments.length > 2 ? arguments[2] : undefined;
+  switch (action) {
+    case actions.First:
+      return 0;
+    case actions.Last:
+      return maxIndex;
+    case actions.Previous:
+      return Math.max(0, currentIndex === null ? 0 : currentIndex - 1);
+    case actions.Next:
+      return Math.min(maxIndex, currentIndex === null ? 0 : currentIndex + 1);
+    case actions.PageUp:
+      return Math.max(0, currentIndex === null ? 0 : currentIndex - maxIndex);
+    case actions.PageDown:
+      return Math.min(maxIndex, currentIndex === null ? 0 : currentIndex + maxIndex);
+    default:
+      return currentIndex;
+  }
+};
+/**
+ * Generates the 'aria-describedby' attribute from multiple ids
+ *
+ * @param {Array<string | undefined>} args ids
+ * @returns {GetAriaDescribedByReturn} an object with aria-describedby
+ */
+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(' ');
+  if (describedby === '') return {};
+  return {
+    'aria-describedby': describedby
+  };
+}
+
+exports.actions = actions;
+exports.getActionFromKey = getActionFromKey;
+exports.getDescribedby = getDescribedby;
+exports.getUpdatedIndex = getUpdatedIndex;
+//# sourceMappingURL=utils.js.map