@rh-support/components 2.0.7 → 2.0.9

package/lib/cjs/LoginModal/LoginModal.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoginModal = void 0;
-var react_core_1 = require("@patternfly/react-core");
-var react_1 = __importDefault(require("react"));
-var defaultProps = {
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = __importDefault(require("react"));
+const defaultProps = {
     title: 'Welcome back',
     buttonText: 'Log back in',
     content: 'Log back in to view this content.',

package/lib/cjs/MarkdownEditor/MarkdownEditor.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -40,66 +29,34 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownEditor = exports.EditorMode = void 0;
 require("./markdownEditor.css");
-var ui_toolkit_1 = require("@cee-eng/ui-toolkit");
-var react_core_1 = require("@patternfly/react-core");
-var code_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/code-icon"));
-var image_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/image-icon"));
-var link_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/link-icon"));
-var list_ul_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/list-ul-icon"));
-var quote_right_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/quote-right-icon"));
-var trash_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/trash-icon"));
-var utils_1 = require("@rh-support/utils");
-var classnames_1 = __importDefault(require("classnames"));
-var isEmpty_1 = __importDefault(require("lodash/isEmpty"));
-var react_1 = __importStar(require("react"));
-var react_i18next_1 = require("react-i18next");
-var hooks_1 = require("../hooks");
+const ui_toolkit_1 = require("@cee-eng/ui-toolkit");
+const react_core_1 = require("@patternfly/react-core");
+const code_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/code-icon"));
+const image_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/image-icon"));
+const link_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/link-icon"));
+const list_ul_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/list-ul-icon"));
+const quote_right_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/quote-right-icon"));
+const trash_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/trash-icon"));
+const utils_1 = require("@rh-support/utils");
+const classnames_1 = __importDefault(require("classnames"));
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("../hooks");
 var EditorMode;
 (function (EditorMode) {
     EditorMode["PLAIN"] = "plaintext";
     EditorMode["MARKDOWN"] = "markdown";
 })(EditorMode = exports.EditorMode || (exports.EditorMode = {}));
-var defaultProps = {
+const defaultProps = {
     value: '',
-    onChange: function () { },
+    onChange: () => { },
     id: '',
     className: '',
     hidePreviewText: 'Hide preview',
@@ -118,161 +75,152 @@ var defaultProps = {
     },
 };
 function MarkdownEditor(props) {
-    var t = react_i18next_1.useTranslation().t;
-    var hidePreviewText = props.hidePreviewText, showPreviewText = props.showPreviewText, mdPlaceholder = props.mdPlaceholder, plainTextPlaceholder = props.plainTextPlaceholder, textAreaClassName = props.textAreaClassName, bindTextArea = props.bindTextArea, markedownOptions = props.markedownOptions, allowEmoji = props.allowEmoji, hideHeadingOptions = props.hideHeadingOptions, rows = props.rows, showMarkdownPlainTextToggle = props.showMarkdownPlainTextToggle, editorMode = props.editorMode, className = props.className, charLimit = props.charLimit, minCharsForCounter = props.minCharsForCounter, id = props.id, onCommentExceedCharsLimit = props.onCommentExceedCharsLimit, _a = props.fileSelectorProps, onClipboardPaste = _a.onClipboardPaste, onFileDelete = _a.onFileDelete, onFileSelect = _a.onFileSelect, isSupportedFile = _a.isSupportedFile, _b = _a.showFileSelectorInToolbar, showFileSelectorInToolbar = _b === void 0 ? false : _b, _c = _a.isUploadingFile, isUploadingFile = _c === void 0 ? false : _c, _d = _a.filesList, filesList = _d === void 0 ? [] : _d, attachFileBtn = _a.attachFileBtn, textAreaProps = __rest(props, ["hidePreviewText", "showPreviewText", "mdPlaceholder", "plainTextPlaceholder", "textAreaClassName", "bindTextArea", "markedownOptions", "allowEmoji", "hideHeadingOptions", "rows", "showMarkdownPlainTextToggle", "editorMode", "className", "charLimit", "minCharsForCounter", "id", "onCommentExceedCharsLimit", "fileSelectorProps"]);
-    var _e = __read(react_1.useState(false), 2), isPreview = _e[0], setIsPreview = _e[1];
-    var _f = __read(react_1.useState(props.value), 2), mdValue = _f[0], setMdValue = _f[1];
-    var previousFileList = hooks_1.usePrevious(filesList);
-    var _g = __read(react_1.useState(showMarkdownPlainTextToggle && props.editorMode === EditorMode.PLAIN ? true : false), 2), isPlainModeEnabled = _g[0], setIsPlainModeEnabled = _g[1];
-    var textareaRef = react_1.useRef(null);
-    var _h = hooks_1.useUndo(props.value), state = _h.state, setURValue = _h.setURValue, undo = _h.undo, redo = _h.redo, resetURValue = _h.resetURValue;
+    const { t } = react_i18next_1.useTranslation();
+    const { hidePreviewText, showPreviewText, mdPlaceholder, plainTextPlaceholder, textAreaClassName, bindTextArea, markedownOptions, allowEmoji, hideHeadingOptions, rows, showMarkdownPlainTextToggle, editorMode, className, charLimit, minCharsForCounter, id, onCommentExceedCharsLimit, fileSelectorProps: { onClipboardPaste, onFileDelete, onFileSelect, isSupportedFile, showFileSelectorInToolbar = false, isUploadingFile = false, filesList = [], attachFileBtn, } } = props, textAreaProps = __rest(props, ["hidePreviewText", "showPreviewText", "mdPlaceholder", "plainTextPlaceholder", "textAreaClassName", "bindTextArea", "markedownOptions", "allowEmoji", "hideHeadingOptions", "rows", "showMarkdownPlainTextToggle", "editorMode", "className", "charLimit", "minCharsForCounter", "id", "onCommentExceedCharsLimit", "fileSelectorProps"]);
+    const [isPreview, setIsPreview] = react_1.useState(false);
+    const [mdValue, setMdValue] = react_1.useState(props.value);
+    const previousFileList = hooks_1.usePrevious(filesList);
+    const [isPlainModeEnabled, setIsPlainModeEnabled] = react_1.useState(showMarkdownPlainTextToggle && props.editorMode === EditorMode.PLAIN ? true : false);
+    const textareaRef = react_1.useRef(null);
+    const { state, setURValue, undo, redo, resetURValue } = hooks_1.useUndo(props.value);
     // for access inside event handlers
-    var isPlainModeEnabledRef = react_1.useRef(isPlainModeEnabled);
-    var _j = __read(react_1.useState(false), 2), isFileSelectorOpen = _j[0], setIsFileSelectorOpen = _j[1];
-    var onFileSelectLocal = function () {
-        setIsFileSelectorOpen(function (open) { return !open; });
+    const isPlainModeEnabledRef = react_1.useRef(isPlainModeEnabled);
+    const [isFileSelectorOpen, setIsFileSelectorOpen] = react_1.useState(false);
+    const onFileSelectLocal = () => {
+        setIsFileSelectorOpen((open) => !open);
     };
-    var onFileSelectToggle = function (isOpen) {
+    const onFileSelectToggle = (isOpen) => {
         setIsFileSelectorOpen(isOpen);
     };
-    react_1.useEffect(function () {
+    react_1.useEffect(() => {
         if ((previousFileList || []).length < (filesList || []).length && isUploadingFile) {
             onFileInsert(filesList[0]);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filesList]);
-    var onFileInsert = function (file) {
-        var template = utils_1.isImageFile(file.fileType)
-            ? "![" + file.fileName + "](" + file.link + ")"
-            : "[" + file.fileName + "](" + file.link + ")";
+    const onFileInsert = (file) => {
+        const template = utils_1.isImageFile(file.fileType)
+            ? `![${file.fileName}](${file.link})`
+            : `[${file.fileName}](${file.link})`;
         insert(template, 0, 0);
-        var currentStart = textareaRef.current.selectionStart;
+        const currentStart = textareaRef.current.selectionStart;
         textareaRef.current.setSelectionRange(currentStart + template.length, currentStart + template.length);
         onFileSelect && onFileSelect(file);
     };
     function pastedFile(items) {
-        var e_1, _a;
-        try {
-            for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
-                var item = items_1_1.value;
-                if (isSupportedFile && isSupportedFile(item.type)) {
-                    return item.getAsFile();
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
+        for (const item of items) {
+            if (isSupportedFile && isSupportedFile(item.type)) {
+                return item.getAsFile();
             }
-            finally { if (e_1) throw e_1.error; }
         }
         return null;
     }
-    var onPaste = function (event) {
+    const onPaste = (event) => {
         if (!event.clipboardData || isPlainModeEnabledRef.current)
             return;
         if (!event.clipboardData.items)
             return;
-        var file = pastedFile(event.clipboardData.items);
+        const file = pastedFile(event.clipboardData.items);
         if (!file)
             return;
-        var files = [file];
+        const files = [file];
         event.preventDefault();
         onClipboardPaste(files);
     };
     // To handle dropped images
-    var onDrop = function (event) {
+    const onDrop = (event) => {
         if (!event.dataTransfer.files)
             return;
-        var file = event.dataTransfer.files[0];
+        const file = event.dataTransfer.files[0];
         if (!file)
             return;
-        var files = [file];
+        const files = [file];
         event.preventDefault();
         onClipboardPaste(files);
     };
-    var getFileSelectorList = function () {
-        var filesAsDropdownItems = filesList.map(function (file) {
-            return (react_1.default.createElement(react_core_1.DropdownItem, { key: file.id, onClick: function () {
+    const getFileSelectorList = () => {
+        const filesAsDropdownItems = filesList.map((file) => {
+            return (react_1.default.createElement(react_core_1.DropdownItem, { key: file.id, onClick: () => {
                     onFileInsert(file);
                 } },
                 react_1.default.createElement(react_core_1.Flex, { flexWrap: { default: 'nowrap' } },
                     react_1.default.createElement(react_core_1.FlexItem, null,
                         react_1.default.createElement(react_core_1.Text, { component: react_core_1.TextVariants.small }, file.fileName)),
                     onFileDelete && (react_1.default.createElement(react_core_1.FlexItem, { className: "pf-u-ml-auto" },
-                        react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, onClick: function (event) {
+                        react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, onClick: (event) => {
                                 onFileSelectToggle(false);
                                 onFileDelete(file);
                                 event.stopPropagation();
                             } },
                             react_1.default.createElement(trash_icon_1.default, { color: "#c9190b" })))))));
         });
-        return __spreadArray(__spreadArray(__spreadArray([], __read(filesAsDropdownItems)), __read((filesAsDropdownItems.length > 0 ? [react_1.default.createElement(react_core_1.DropdownSeparator, { key: "separator" })] : []))), [
+        return [
+            ...filesAsDropdownItems,
+            ...(filesAsDropdownItems.length > 0 ? [react_1.default.createElement(react_core_1.DropdownSeparator, { key: "separator" })] : []),
             react_1.default.createElement(react_core_1.DropdownItem, { key: "separated link", component: attachFileBtn }),
-        ]);
+        ];
     };
-    var bindTextAreaRef = function (ref) {
+    const bindTextAreaRef = (ref) => {
         textareaRef.current = ref;
         if (props.bindTextArea)
             props.bindTextArea(ref);
     };
-    var onModeChange = function (isPlainMode) {
+    const onModeChange = (isPlainMode) => {
         setIsPlainModeEnabled(isPlainMode);
         isPlainModeEnabledRef.current = isPlainMode;
         isPlainMode && isPreview && setIsPreview(false);
-        var mode = isPlainMode ? EditorMode.PLAIN : EditorMode.MARKDOWN;
+        const mode = isPlainMode ? EditorMode.PLAIN : EditorMode.MARKDOWN;
         props.onChange(mdValue, mode);
     };
-    react_1.useEffect(function () {
+    react_1.useEffect(() => {
         if (mdValue !== props.value) {
             setMdValue(props.value);
         }
     }, [mdValue, props.value]);
-    react_1.useEffect(function () {
-        var isPlainMode = props.editorMode === EditorMode.PLAIN ? true : false;
+    react_1.useEffect(() => {
+        const isPlainMode = props.editorMode === EditorMode.PLAIN ? true : false;
         if (isPlainMode === isPlainModeEnabled)
             return;
         onModeChange(isPlainMode);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.editorMode]);
-    react_1.useEffect(function () {
+    react_1.useEffect(() => {
         // update state on undo redo
         if (mdValue !== state.present) {
             onValueChangeLocal(state.present);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [state.present]);
-    hooks_1.useDebounce(function () {
+    hooks_1.useDebounce(() => {
         if (isEmpty_1.default(mdValue))
             return;
         !isPlainModeEnabled && setURValue(mdValue);
     }, [mdValue], 500);
-    var onValueChangeLocal = function (text) {
-        var mode = showMarkdownPlainTextToggle && isPlainModeEnabled ? EditorMode.PLAIN : EditorMode.MARKDOWN;
+    const onValueChangeLocal = (text) => {
+        const mode = showMarkdownPlainTextToggle && isPlainModeEnabled ? EditorMode.PLAIN : EditorMode.MARKDOWN;
         props.onChange(text, mode);
         setMdValue(text);
     };
-    var textChanged = function (event) {
-        var value = event.target.value;
+    const textChanged = (event) => {
+        let value = event.target.value;
         if (!props.allowEmoji && utils_1.isEmojiPattern(value)) {
             value = value.replace(utils_1.emojiPattern, '').trim();
         }
         onValueChangeLocal(value);
         charLimit - value.length < 0 ? props.onCommentExceedCharsLimit(true) : props.onCommentExceedCharsLimit(false);
     };
-    var hasSelection = function () {
+    const hasSelection = () => {
         return textareaRef.current.selectionStart !== textareaRef.current.selectionEnd;
     };
-    var wrapSelection = function (templateStart, templateEnd) {
-        var currentText = textareaRef.current.value;
-        var posStart = textareaRef.current.selectionStart;
-        var posEnd = textareaRef.current.selectionEnd;
-        var selectedText = currentText.substring(posStart, posEnd);
-        var whitespaceEdges = selectedText.match(/^\s*|\s*$/g) || [];
-        var leadingWhitespace = whitespaceEdges[0] || '';
-        var trailingWhitespace = whitespaceEdges[1] || '';
-        var newText = currentText.substring(0, posStart) +
+    const wrapSelection = (templateStart, templateEnd) => {
+        const currentText = textareaRef.current.value;
+        const posStart = textareaRef.current.selectionStart;
+        const posEnd = textareaRef.current.selectionEnd;
+        const selectedText = currentText.substring(posStart, posEnd);
+        const whitespaceEdges = selectedText.match(/^\s*|\s*$/g) || [];
+        const leadingWhitespace = whitespaceEdges[0] || '';
+        const trailingWhitespace = whitespaceEdges[1] || '';
+        const newText = currentText.substring(0, posStart) +
             leadingWhitespace +
             templateStart +
             selectedText.trim() +
@@ -286,21 +234,21 @@ function MarkdownEditor(props) {
         textareaRef.current.focus();
         onValueChangeLocal(newText);
     };
-    var wrapBasedOnNewLines = function () {
-        var currentText = textareaRef.current.value;
-        var posStart = textareaRef.current.selectionStart;
-        var posEnd = textareaRef.current.selectionEnd;
-        var selectedText = currentText.substring(posStart, posEnd);
-        var splitText = selectedText.split('\n');
-        var newText = currentText
+    const wrapBasedOnNewLines = () => {
+        const currentText = textareaRef.current.value;
+        const posStart = textareaRef.current.selectionStart;
+        const posEnd = textareaRef.current.selectionEnd;
+        const selectedText = currentText.substring(posStart, posEnd);
+        const splitText = selectedText.split('\n');
+        const newText = currentText
             .substring(0, posStart)
-            .concat(splitText.map(function (v) { return "- " + v; }).join('\n'), '\n', currentText.substring(posEnd));
+            .concat(splitText.map((v) => `- ${v}`).join('\n'), '\n', currentText.substring(posEnd));
         onValueChangeLocal(newText);
     };
-    var insert = function (template, selectionStart, selectionEnd) {
-        var currentText = textareaRef.current.value;
-        var pos = textareaRef.current.selectionStart;
-        var newText = currentText.substring(0, pos) + template + currentText.substring(pos);
+    const insert = (template, selectionStart, selectionEnd) => {
+        const currentText = textareaRef.current.value;
+        const pos = textareaRef.current.selectionStart;
+        const newText = currentText.substring(0, pos) + template + currentText.substring(pos);
         onValueChangeLocal(newText);
         textareaRef.current.value = newText;
         textareaRef.current.selectionStart = pos + selectionStart;
@@ -308,7 +256,7 @@ function MarkdownEditor(props) {
         textareaRef.current.focus();
         onValueChangeLocal(newText);
     };
-    var bold = function () {
+    const bold = () => {
         if (hasSelection()) {
             wrapSelection('**', '**');
         }
@@ -316,7 +264,7 @@ function MarkdownEditor(props) {
             insert('**TEXT**', 2, 6);
         }
     };
-    var italic = function () {
+    const italic = () => {
         if (hasSelection()) {
             wrapSelection('_', '_');
         }
@@ -324,7 +272,7 @@ function MarkdownEditor(props) {
             insert('_TEXT_', 1, 5);
         }
     };
-    var h1 = function () {
+    const h1 = () => {
         if (hasSelection()) {
             wrapSelection('# ', '');
         }
@@ -332,7 +280,7 @@ function MarkdownEditor(props) {
             insert('# HEADING', 2, 9);
         }
     };
-    var h2 = function () {
+    const h2 = () => {
         if (hasSelection()) {
             wrapSelection('## ', '');
         }
@@ -340,7 +288,7 @@ function MarkdownEditor(props) {
             insert('## HEADING', 3, 10);
         }
     };
-    var h3 = function () {
+    const h3 = () => {
         if (hasSelection()) {
             wrapSelection('### ', '');
         }
@@ -348,7 +296,7 @@ function MarkdownEditor(props) {
             insert('### HEADING', 4, 11);
         }
     };
-    var list = function () {
+    const list = () => {
         if (hasSelection()) {
             wrapBasedOnNewLines();
         }
@@ -356,7 +304,7 @@ function MarkdownEditor(props) {
             insert('- ITEM', 2, 6);
         }
     };
-    var link = function () {
+    const link = () => {
         if (hasSelection()) {
             wrapSelection('[', '](URL "TITLE")');
         }
@@ -364,7 +312,7 @@ function MarkdownEditor(props) {
             insert('[LINK TEXT](URL "TITLE")', 1, 10);
         }
     };
-    var quote = function () {
+    const quote = () => {
         if (hasSelection()) {
             wrapSelection('> ', '\n');
         }
@@ -372,7 +320,7 @@ function MarkdownEditor(props) {
             insert('> QUOTE', 2, 7);
         }
     };
-    var code = function () {
+    const code = () => {
         if (hasSelection()) {
             wrapSelection('~~~\n', '\n~~~\n');
         }
@@ -380,15 +328,15 @@ function MarkdownEditor(props) {
             insert('~~~\nCODE\n~~~\n', 4, 8);
         }
     };
-    var preview = function () {
-        setIsPreview(function (previewFlag) { return !previewFlag; });
+    const preview = () => {
+        setIsPreview((previewFlag) => !previewFlag);
     };
-    var previewMDText = function (mdText) {
-        var text = mdText;
-        var markeddownOptions = __assign(__assign({}, props.markedownOptions), { openLinksInNewTab: true, gfm: true, breaks: true });
+    const previewMDText = (mdText) => {
+        let text = mdText;
+        const markeddownOptions = Object.assign(Object.assign({}, props.markedownOptions), { openLinksInNewTab: true, gfm: true, breaks: true });
         return ui_toolkit_1.parseCommentMarkdown(text, { openImagesInNewTab: false, lazyLoadImages: false }, markeddownOptions);
     };
-    var keydown = function (event) {
+    const keydown = (event) => {
         if (event.ctrlKey) {
             switch (event.key) {
                 case 'b':
@@ -422,20 +370,20 @@ function MarkdownEditor(props) {
             }
         }
     };
-    var getCharCountText = function (comment) {
-        var charCountLeft = charLimit - comment.length;
-        return (react_1.default.createElement("span", { className: "character-count-wrapper " + (charCountLeft <= 0 ? 'red' : '') },
+    const getCharCountText = (comment) => {
+        const charCountLeft = charLimit - comment.length;
+        return (react_1.default.createElement("span", { className: `character-count-wrapper ${charCountLeft <= 0 ? 'red' : ''}` },
             "(",
-            t("{{charCountLeft}} characters left", { charCountLeft: charCountLeft }),
+            t(`{{charCountLeft}} characters left`, { charCountLeft }),
             ")"));
     };
-    var contentRows = (props.value && props.value.split('\n').length + 1) || 4;
+    const contentRows = (props.value && props.value.split('\n').length + 1) || 4;
     // reset undo redo value after post comment
     props.disabled && !isEmpty_1.default(state.present) && resetURValue('');
     // editor is disabled and preview is true -> set preview to false
     props.disabled && isPreview && setIsPreview(false);
-    var disablePreviewButton = mdValue === '';
-    return (react_1.default.createElement("div", { className: "markdown-editor-container " + props.className, id: props.id, "data-tracking-id": "md-editor-container", onDrop: onDrop, onPaste: onPaste },
+    const disablePreviewButton = mdValue === '';
+    return (react_1.default.createElement("div", { className: `markdown-editor-container ${props.className}`, id: props.id, "data-tracking-id": "md-editor-container", onDrop: onDrop, onPaste: onPaste },
         !isPlainModeEnabled && (react_1.default.createElement(react_core_1.Toolbar, { className: "pf-l-flex border-bottom" },
             react_1.default.createElement(react_core_1.ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
                 react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }, "B"),
@@ -460,13 +408,13 @@ function MarkdownEditor(props) {
             react_1.default.createElement(react_core_1.ToolbarItem, null,
                 react_1.default.createElement("a", { className: "pf-c-button pf-m-link pf-m-inline markdown-guidance", rel: "noopener noreferrer", target: "_blank", href: "/articles/4729621", "data-tracking-id": "md-guidance" },
                     react_1.default.createElement(react_i18next_1.Trans, null, "Markdown guidance"))))),
-        react_1.default.createElement("div", { className: "markdown-content" }, !isPreview ? (react_1.default.createElement("textarea", __assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: classnames_1.default('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows }))) : (react_1.default.createElement("div", { className: "markdown-preview", style: { maxHeight: mdValue ? 310 : 100 } },
+        react_1.default.createElement("div", { className: "markdown-content" }, !isPreview ? (react_1.default.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: classnames_1.default('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows }))) : (react_1.default.createElement("div", { className: "markdown-preview", style: { maxHeight: mdValue ? 310 : 100 } },
             react_1.default.createElement("div", { dangerouslySetInnerHTML: {
                     __html: previewMDText(mdValue),
                 } })))),
-        react_1.default.createElement("div", null, props.showMarkdownPlainTextToggle && (react_1.default.createElement("div", { className: "markdown-toggle-toolbar pf-l-flex" },
+        react_1.default.createElement("div", null, props.showMarkdownPlainTextToggle && (react_1.default.createElement("div", { className: `markdown-toggle-toolbar pf-l-flex` },
             react_1.default.createElement("span", { className: "markdown-toolbar-left-section" },
-                !isPlainModeEnabled && (react_1.default.createElement(react_core_1.Button, { className: "markdown-preview-btn", tabIndex: -1, variant: react_core_1.ButtonVariant.link, onClick: preview, title: "Show preview", "data-tracking-id": "md-preview-" + (isPreview ? 'hide' : 'show'), isDisabled: disablePreviewButton }, isPreview ? (react_1.default.createElement("span", null,
+                !isPlainModeEnabled && (react_1.default.createElement(react_core_1.Button, { className: "markdown-preview-btn", tabIndex: -1, variant: react_core_1.ButtonVariant.link, onClick: preview, title: "Show preview", "data-tracking-id": `md-preview-${isPreview ? 'hide' : 'show'}`, isDisabled: disablePreviewButton }, isPreview ? (react_1.default.createElement("span", null,
                     " ",
                     t(hidePreviewText))) : (react_1.default.createElement("span", null,
                     " ",
@@ -478,9 +426,9 @@ function MarkdownEditor(props) {
                     react_1.default.createElement(react_core_1.Spinner, { className: "pf-u-ml-sm", size: "md" }))),
                 mdValue.length > props.minCharsForCounter && getCharCountText(mdValue)),
             react_1.default.createElement("span", null,
-                react_1.default.createElement(react_core_1.Button, { variant: "plain", className: isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: function () { return onModeChange(true); }, isDisabled: isPlainModeEnabled || isUploadingFile, "data-tracking-id": "md-editor-plaintext" },
+                react_1.default.createElement(react_core_1.Button, { variant: "plain", className: isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: () => onModeChange(true), isDisabled: isPlainModeEnabled || isUploadingFile, "data-tracking-id": "md-editor-plaintext" },
                     react_1.default.createElement(react_i18next_1.Trans, null, "Plain text")),
-                react_1.default.createElement(react_core_1.Button, { variant: "plain", className: !isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: function () { return onModeChange(false); }, isDisabled: !isPlainModeEnabled, "data-tracking-id": "md-editor-md" },
+                react_1.default.createElement(react_core_1.Button, { variant: "plain", className: !isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: () => onModeChange(false), isDisabled: !isPlainModeEnabled, "data-tracking-id": "md-editor-md" },
                     react_1.default.createElement(react_i18next_1.Trans, null, "Markdown"))))))));
 }
 exports.MarkdownEditor = MarkdownEditor;

package/lib/cjs/MoreOrLess/MoreOrLess.js

@@ -18,59 +18,39 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MoreOrLess = void 0;
-var utils_1 = require("@rh-support/utils");
-var react_1 = __importStar(require("react"));
-var react_i18next_1 = require("react-i18next");
-var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
-var defaultProps = {
+const utils_1 = require("@rh-support/utils");
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+const defaultProps = {
     maxHeight: 500,
     className: '',
 };
 function MoreOrLess(props) {
-    var t = react_i18next_1.useTranslation().t;
-    var _a = __read(react_1.useState(false), 2), isVisible = _a[0], setVisibility = _a[1];
-    var _b = __read(react_1.useState(undefined), 2), y = _b[0], setY = _b[1];
-    var _c = __read(react_1.useState(null), 2), elem = _c[0], setElem = _c[1];
-    var sectionRef = react_1.useRef(null);
+    const { t } = react_i18next_1.useTranslation();
+    const [isVisible, setVisibility] = react_1.useState(false);
+    const [y, setY] = react_1.useState(undefined);
+    const [elem, setElem] = react_1.useState(null);
+    const sectionRef = react_1.useRef(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var resizeObserver = new resize_observer_polyfill_1.default(function () {
-        return elem.scrollHeight > props.maxHeight ? setVisibility(true) : setVisibility(false);
-    });
-    react_1.useEffect(function () {
-        return function () { return resizeObserver.disconnect(); };
+    const resizeObserver = new resize_observer_polyfill_1.default(() => elem.scrollHeight > props.maxHeight ? setVisibility(true) : setVisibility(false));
+    react_1.useEffect(() => {
+        return () => resizeObserver.disconnect();
     }, [resizeObserver]);
-    var ref = react_1.useCallback(function (node) {
+    const ref = react_1.useCallback((node) => {
         if (node !== null) {
             setElem(node);
             resizeObserver.observe(node);
         }
     }, [resizeObserver]);
-    var _d = __read(react_1.useState(false), 2), showLess = _d[0], setShowLess = _d[1];
-    var getClassAndText = function () {
-        return showLess ? { text: t('Show less'), class: 'Show less' } : { text: t('Show more'), class: 'Show more' };
-    };
-    var handleMoreOrLess = function (e) {
+    const [showLess, setShowLess] = react_1.useState(false);
+    const getClassAndText = () => showLess ? { text: t('Show less'), class: 'Show less' } : { text: t('Show more'), class: 'Show more' };
+    const handleMoreOrLess = (e) => {
         e.preventDefault();
         // save scroll y position after click on more and then
         // scroll to the saved y position after clicking on less
@@ -81,11 +61,11 @@ function MoreOrLess(props) {
             utils_1.scrollIntoView(sectionRef, { navBarRef: props.appStickyHeaderRef, timeout: 0, offset: 30 });
             setY(undefined);
         }
-        setShowLess(function (prevState) { return !prevState; });
+        setShowLess((prevState) => !prevState);
     };
-    return (react_1.default.createElement("div", { className: "" + props.className, ref: sectionRef },
+    return (react_1.default.createElement("div", { className: `${props.className}`, ref: sectionRef },
         react_1.default.createElement("div", { ref: ref, style: { maxHeight: props.maxHeight + 'px' }, className: 'more-less-wrapper ' + (showLess ? 'open' : '') }, props.children),
-        isVisible && (react_1.default.createElement("button", { onClick: handleMoreOrLess, className: "btn btn-app btn-link " + getClassAndText().class, type: "button" }, getClassAndText().text))));
+        isVisible && (react_1.default.createElement("button", { onClick: handleMoreOrLess, className: `btn btn-app btn-link ${getClassAndText().class}`, type: "button" }, getClassAndText().text))));
 }
 exports.MoreOrLess = MoreOrLess;
 MoreOrLess.defaultProps = defaultProps;