@rh-support/components 2.4.10-beta.6 → 2.5.0

package/lib/esm/MarkdownEditor/MarkdownEditor.js

@@ -11,8 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import './markdownEditor.css';
 import { parseCommentMarkdown } from '@cee-eng/ui-toolkit';
-import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, Flex, FlexItem, Spinner, Text, TextVariants, Toolbar, ToolbarGroup, ToolbarItem, } from '@patternfly/react-core';
+import { Button, ButtonVariant, DrilldownMenu, Flex, FlexItem, Menu, MenuContainer, MenuContent, MenuItem, MenuList, MenuToggle, Spinner, Text, TextVariants, Toolbar, ToolbarGroup, ToolbarItem, } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownSeparator, DropdownToggle } from '@patternfly/react-core/deprecated';
 import CodeIcon from '@patternfly/react-icons/dist/js/icons/code-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/js/icons/ellipsis-v-icon';
 import ImageIcon from '@patternfly/react-icons/dist/js/icons/image-icon';
 import LinkIcon from '@patternfly/react-icons/dist/js/icons/link-icon';
 import ListUlIcon from '@patternfly/react-icons/dist/js/icons/list-ul-icon';
@@ -52,9 +54,9 @@ const defaultProps = {
 };
 function MarkdownEditor(props) {
     const { t } = 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 { hidePreviewText, showPreviewText, mdPlaceholder, plainTextPlaceholder, textAreaClassName, bindTextArea, markedownOptions, allowEmoji, hideHeadingOptions, rows, showMarkdownPlainTextToggle, editorMode, className, charLimit, minCharsForCounter, id, value, 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", "value", "onCommentExceedCharsLimit", "fileSelectorProps"]);
     const [isPreview, setIsPreview] = useState(false);
-    const [mdValue, setMdValue] = useState(props.value);
+    const [mdValue, setMdValue] = useState(props.value || '');
     const previousFileList = usePrevious(filesList);
     const [isPlainModeEnabled, setIsPlainModeEnabled] = useState(showMarkdownPlainTextToggle && props.editorMode === EditorMode.PLAIN ? true : false);
     const textareaRef = useRef(null);
@@ -114,27 +116,34 @@ function MarkdownEditor(props) {
         event.preventDefault();
         onClipboardPaste(files);
     };
-    const getFileSelectorList = () => {
+    const getFileSelectorList = (isMobile = false) => {
         const filesAsDropdownItems = filesList.map((file) => {
-            return (React.createElement(DropdownItem, { key: file.id, onClick: () => {
-                    onFileInsert(file);
-                } },
-                React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
-                    React.createElement(FlexItem, null,
-                        React.createElement(Text, { component: TextVariants.small }, file.fileName)),
-                    onFileDelete && (React.createElement(FlexItem, { className: "pf-u-ml-auto" },
-                        React.createElement(Button, { variant: ButtonVariant.plain, onClick: (event) => {
-                                onFileSelectToggle(false);
-                                onFileDelete(file);
-                                event.stopPropagation();
-                            } },
-                            React.createElement(TrashIcon, { color: "#c9190b" })))))));
+            return (React.createElement(React.Fragment, null,
+                React.createElement(DropdownItem, { key: file.id, onClick: () => {
+                        onFileInsert(file);
+                    } },
+                    React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
+                        React.createElement(FlexItem, null,
+                            React.createElement(Text, { component: TextVariants.small }, file.fileName)),
+                        onFileDelete && (React.createElement(FlexItem, { className: "pf-v5-u-ml-auto" },
+                            React.createElement(Button, { variant: ButtonVariant.plain, onClick: (event) => {
+                                    onFileSelectToggle(false);
+                                    onFileDelete(file);
+                                    event.stopPropagation();
+                                } },
+                                React.createElement(TrashIcon, { color: "#c9190b" }))))))));
         });
-        return [
-            ...filesAsDropdownItems,
-            ...(filesAsDropdownItems.length > 0 ? [React.createElement(DropdownSeparator, { key: "separator" })] : []),
-            React.createElement(DropdownItem, { key: "separated link", component: attachFileBtn }),
-        ];
+        return isMobile
+            ? [
+                React.createElement(DropdownItem, { key: "separated link", component: attachFileBtn }),
+                ...(filesAsDropdownItems.length > 0 ? [React.createElement(DropdownSeparator, { key: "separator" })] : []),
+                ...filesAsDropdownItems,
+            ]
+            : [
+                ...filesAsDropdownItems,
+                ...(filesAsDropdownItems.length > 0 ? [React.createElement(DropdownSeparator, { key: "separator" })] : []),
+                React.createElement(DropdownItem, { key: "separated link", component: attachFileBtn }),
+            ];
     };
     const bindTextAreaRef = (ref) => {
         textareaRef.current = ref;
@@ -148,16 +157,26 @@ function MarkdownEditor(props) {
         const mode = isPlainMode ? EditorMode.PLAIN : EditorMode.MARKDOWN;
         props.onChange(mdValue, mode);
     };
+    // Add this useEffect to properly initialize the mdValue when component mounts
     useEffect(() => {
-        if (mdValue !== props.value) {
-            setMdValue(props.value);
+        setMdValue(props.value || '');
+    }, [props.value]);
+    // Update the existing useEffect to handle both value and editorMode changes
+    useEffect(() => {
+        if (value !== mdValue) {
+            setMdValue(value);
         }
-    }, [mdValue, props.value]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
     useEffect(() => {
-        const isPlainMode = props.editorMode === EditorMode.PLAIN ? true : false;
-        if (isPlainMode === isPlainModeEnabled)
-            return;
-        onModeChange(isPlainMode);
+        const isPlainMode = props.editorMode === EditorMode.PLAIN;
+        if (isPlainMode !== isPlainModeEnabled) {
+            setIsPlainModeEnabled(isPlainMode);
+            isPlainModeEnabledRef.current = isPlainMode;
+            if (isPlainMode && isPreview) {
+                setIsPreview(false);
+            }
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.editorMode]);
     useEffect(() => {
@@ -174,8 +193,8 @@ function MarkdownEditor(props) {
     }, [mdValue], 500);
     const onValueChangeLocal = (text) => {
         const mode = showMarkdownPlainTextToggle && isPlainModeEnabled ? EditorMode.PLAIN : EditorMode.MARKDOWN;
-        props.onChange(text, mode);
         setMdValue(text);
+        props.onChange(text, mode);
     };
     const textChanged = (event) => {
         let value = event.target.value;
@@ -183,7 +202,12 @@ function MarkdownEditor(props) {
             value = value.replace(emojiPattern, '').trim();
         }
         onValueChangeLocal(value);
-        charLimit - value.length < 0 ? props.onCommentExceedCharsLimit(true) : props.onCommentExceedCharsLimit(false);
+        // Add a null check before calling onCommentExceedCharsLimit
+        if (props.onCommentExceedCharsLimit) {
+            charLimit - value.length < 0
+                ? props.onCommentExceedCharsLimit(true)
+                : props.onCommentExceedCharsLimit(false);
+        }
     };
     const hasSelection = () => {
         return textareaRef.current.selectionStart !== textareaRef.current.selectionEnd;
@@ -203,11 +227,12 @@ function MarkdownEditor(props) {
             templateEnd +
             trailingWhitespace +
             currentText.substring(posEnd);
-        onValueChangeLocal(newText);
+        // Set the value in the textarea
         textareaRef.current.value = newText;
         textareaRef.current.selectionStart = posEnd + templateStart.length + templateEnd.length;
         textareaRef.current.selectionEnd = textareaRef.current.selectionStart;
         textareaRef.current.focus();
+        // Call onValueChangeLocal only once
         onValueChangeLocal(newText);
     };
     const wrapBasedOnNewLines = () => {
@@ -359,54 +384,117 @@ function MarkdownEditor(props) {
     // editor is disabled and preview is true -> set preview to false
     props.disabled && isPreview && setIsPreview(false);
     const disablePreviewButton = mdValue === '';
-    return (React.createElement("div", { className: `markdown-editor-container ${props.className}`, id: props.id, "data-tracking-id": "md-editor-container", onDrop: onDrop, onPaste: onPaste },
-        React.createElement("div", { className: "toolbar-container border-bottom" }, !isPlainModeEnabled && (React.createElement(Toolbar, { className: "pf-l-flex" },
-            React.createElement(ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
-                React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }, "B"),
-                React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "md-editor-toolbar-i", title: "Italic" }, "I"),
-                React.createElement("div", { className: "btn-group-separator" }),
-                !props.hideHeadingOptions && (React.createElement(React.Fragment, null,
-                    React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h1, title: "Heading 1", "data-tracking-id": "md-editor-toolbar-h1" }, "H1"),
-                    React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h2, title: "Heading 2", "data-tracking-id": "md-editor-toolbar-h2" }, "H2"),
-                    React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h3, title: "Heading 3", "data-tracking-id": "md-editor-toolbar-h3" }, "H3"),
-                    React.createElement("div", { className: "btn-group-separator" }))),
-                React.createElement(Button, { tabIndex: -1, isDisabled: props.disabled || isPreview, variant: ButtonVariant.plain, onClick: list, title: "Bullet List", "data-tracking-id": "md-editor-toolbar-bul-list" },
-                    React.createElement(ListUlIcon, null)),
-                React.createElement("div", { className: "btn-group-separator" }),
-                React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: link, title: "Link", "data-tracking-id": "md-editor-toolbar-link" },
-                    React.createElement(LinkIcon, null)),
-                React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: quote, title: "Quote", "data-tracking-id": "md-editor-toolbar-quote" },
-                    React.createElement(QuoteRightIcon, null)),
-                React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: code, title: "Code", "data-tracking-id": "md-editor-toolbar-code" },
-                    React.createElement(CodeIcon, null)),
-                showFileSelectorInToolbar && (React.createElement(Dropdown, { onSelect: onFileSelectLocal, id: "md-editor-toolbar-file-selector", toggle: React.createElement(DropdownToggle, { onToggle: onFileSelectToggle, isDisabled: props.disabled || isPreview },
-                        React.createElement(ImageIcon, null)), dropdownItems: getFileSelectorList(), tabIndex: -1, isPlain: true, menuAppendTo: document.body, isOpen: isFileSelectorOpen, "data-tracking-id": "md-editor-toolbar-file-selector" }))),
-            React.createElement(ToolbarItem, null,
-                React.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.createElement(Trans, null, "Markdown guidance")))))),
-        React.createElement("div", { className: "markdown-content" }, !isPreview ? (React.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: cx('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows, style: { height: '313px' } }))) : (React.createElement("div", { className: "markdown-preview-placeholder", style: { height: '313px' } },
-            React.createElement("div", { className: "markdown-preview", style: { maxHeight: '313px' } },
-                React.createElement("div", { dangerouslySetInnerHTML: {
-                        __html: DOMPurify.sanitize(previewMDText(mdValue)),
-                    } }))))),
-        React.createElement("div", null, props.showMarkdownPlainTextToggle && (React.createElement("div", { className: `markdown-toggle-toolbar pf-l-flex` },
-            React.createElement("span", { className: "markdown-toolbar-left-section" },
-                !isPlainModeEnabled && (React.createElement(Button, { className: "markdown-preview-btn", tabIndex: -1, variant: ButtonVariant.link, onClick: preview, title: "Show preview", "data-tracking-id": `md-preview-${isPreview ? 'hide' : 'show'}`, isDisabled: disablePreviewButton }, isPreview ? (React.createElement("span", null,
-                    " ",
-                    t(hidePreviewText))) : (React.createElement("span", null,
-                    " ",
-                    t(showPreviewText))))),
-                isUploadingFile && (React.createElement(React.Fragment, null,
-                    React.createElement(Trans, null,
-                        React.createElement("small", { className: "pf-u-pl-md" },
-                            React.createElement(Trans, null, "Uploading File"))),
-                    React.createElement(Spinner, { className: "pf-u-ml-sm", size: "md" }))),
-                mdValue.length > props.minCharsForCounter && getCharCountText(mdValue)),
-            React.createElement("span", null,
-                React.createElement(Button, { variant: "plain", className: isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: () => onModeChange(true), isDisabled: isPlainModeEnabled || isUploadingFile, "data-tracking-id": "md-editor-plaintext" },
-                    React.createElement(Trans, null, "Plain text")),
-                React.createElement(Button, { variant: "plain", className: !isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: () => onModeChange(false), isDisabled: !isPlainModeEnabled, "data-tracking-id": "md-editor-md" },
-                    React.createElement(Trans, null, "Markdown"))))))));
+    const [isHeadingDropdownOpen, setIsHeadingDropdownOpen] = React.useState(false);
+    const onToggle = (_event, isOpen) => {
+        setIsHeadingDropdownOpen(isOpen);
+    };
+    const onHeadingSelect = () => {
+        setIsHeadingDropdownOpen(false);
+    };
+    const [isDrillMenuOpen, setIsDrillMenuOpen] = React.useState(false);
+    const [activeMenu, setActiveMenu] = useState('toolsKebabMenu');
+    const [menuDrilledIn, setMenuDrilledIn] = useState([]);
+    const [drilldownPath, setDrilldownPath] = useState([]);
+    const [menuHeights, setMenuHeights] = useState({});
+    const toggleRef = useRef(null);
+    const drillMenuRef = useRef(null);
+    const onToggleClick = (e) => {
+        e.stopPropagation();
+        setIsDrillMenuOpen(!isDrillMenuOpen);
+        setMenuDrilledIn([]);
+        setDrilldownPath([]);
+        setActiveMenu('toolsKebabMenu');
+    };
+    const drillIn = (_event, fromMenuId, toMenuId, pathId) => {
+        setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
+        setDrilldownPath([...drilldownPath, pathId]);
+        setActiveMenu(toMenuId);
+    };
+    const drillOut = (_event, toMenuId) => {
+        setMenuDrilledIn(menuDrilledIn.slice(0, menuDrilledIn.length - 1));
+        setDrilldownPath(drilldownPath.slice(0, drilldownPath.length - 1));
+        setActiveMenu(toMenuId);
+    };
+    const setHeight = (menuId, height) => {
+        if (!menuHeights[menuId] || (menuId !== 'toolsKebabMenu' && menuHeights[menuId] !== height)) {
+            setMenuHeights(Object.assign(Object.assign({}, menuHeights), { [menuId]: height }));
+        }
+    };
+    const markdownGuidanceBtn = (React.createElement("a", { className: "pf-v5-c-button pf-m-link pf-m-inline markdown-guidance", rel: "noopener noreferrer", target: "_blank", href: "/articles/4729621", "data-tracking-id": "md-guidance" },
+        React.createElement(Trans, null, "Markdown guidance")));
+    return (React.createElement("div", { id: "markdown-editor" },
+        !isPlainModeEnabled && React.createElement("div", { className: "markdown-guidance-container" }, markdownGuidanceBtn),
+        React.createElement("div", { className: `markdown-editor-container ${props.className}`, id: props.id, "data-tracking-id": "md-editor-container", onDrop: onDrop, onPaste: onPaste },
+            React.createElement("div", { className: "toolbar-container border-bottom" }, !isPlainModeEnabled && (React.createElement(React.Fragment, null,
+                React.createElement(Toolbar, { className: "desktop-markdown-toolbar pf-v5-l-flex" },
+                    React.createElement(ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
+                        React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }, "B"),
+                        React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "md-editor-toolbar-i", title: "Italic" }, "I"),
+                        React.createElement("div", { className: "btn-group-separator" }),
+                        !props.hideHeadingOptions && (React.createElement(React.Fragment, null,
+                            React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h1, title: "Heading 1", "data-tracking-id": "md-editor-toolbar-h1" }, "H1"),
+                            React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h2, title: "Heading 2", "data-tracking-id": "md-editor-toolbar-h2" }, "H2"),
+                            React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h3, title: "Heading 3", "data-tracking-id": "md-editor-toolbar-h3" }, "H3"),
+                            React.createElement("div", { className: "btn-group-separator" }))),
+                        React.createElement(Button, { tabIndex: -1, isDisabled: props.disabled || isPreview, variant: ButtonVariant.plain, onClick: list, title: "Bullet List", "data-tracking-id": "md-editor-toolbar-bul-list" },
+                            React.createElement(ListUlIcon, null)),
+                        React.createElement("div", { className: "btn-group-separator" }),
+                        React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: link, title: "Link", "data-tracking-id": "md-editor-toolbar-link" },
+                            React.createElement(LinkIcon, null)),
+                        React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: quote, title: "Quote", "data-tracking-id": "md-editor-toolbar-quote" },
+                            React.createElement(QuoteRightIcon, null)),
+                        React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: code, title: "Code", "data-tracking-id": "md-editor-toolbar-code" },
+                            React.createElement(CodeIcon, null)),
+                        showFileSelectorInToolbar && (React.createElement(Dropdown, { onSelect: onFileSelectLocal, id: "md-editor-toolbar-file-selector", toggle: React.createElement(DropdownToggle, { "aria-label": "file selector", onToggle: (_event, isOpen) => onFileSelectToggle(isOpen), isDisabled: props.disabled || isPreview },
+                                React.createElement(ImageIcon, null)), dropdownItems: getFileSelectorList(), tabIndex: -1, isPlain: true, menuAppendTo: document.body, isOpen: isFileSelectorOpen, "data-tracking-id": "md-editor-toolbar-file-selector" }))),
+                    React.createElement(ToolbarItem, null, markdownGuidanceBtn)),
+                React.createElement(Toolbar, { className: "mobile-markdown-toolbar" },
+                    React.createElement("div", { className: "mobile-markdown-toolbar" },
+                        React.createElement(ToolbarGroup, { spaceItems: { default: 'spaceItemsNone' }, "data-tracking-id": "mobile-md-editor-toolbar", className: "markdown-toolbar-left-section" },
+                            !props.hideHeadingOptions && (React.createElement(Dropdown, { isText: true, isPlain: true, onSelect: onHeadingSelect, toggle: React.createElement(DropdownToggle, { id: "heading-selector", onToggle: onToggle }, "Heading"), isOpen: isHeadingDropdownOpen, dropdownItems: [
+                                    React.createElement(DropdownItem, { key: "heading-1", tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: h1, title: "Heading 1", "data-tracking-id": "mobile-md-editor-toolbar-h1" }, "Heading 1"),
+                                    React.createElement(DropdownItem, { tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: h2, title: "Heading 2", "data-tracking-id": "mobile-md-editor-toolbar-h2" }, "Heading 2"),
+                                    React.createElement(DropdownItem, { tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: h3, title: "Heading 3", "data-tracking-id": "mobile-md-editor-toolbar-h3" }, "Heading 3"),
+                                ] })),
+                            React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "mobile-md-editor-toolbar-b", title: "Bold", className: "mobile-markdown-tool-item" }, "B"),
+                            React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "mobile-md-editor-toolbar-i", title: "Italic", className: "mobile-markdown-tool-item" }, "I"),
+                            React.createElement(Button, { tabIndex: -1, isDisabled: props.disabled || isPreview, variant: ButtonVariant.plain, onClick: list, title: "Bullet List", "data-tracking-id": "mobile-md-editor-toolbar-bul-list", className: "mobile-markdown-tool-item" },
+                                React.createElement(ListUlIcon, null)),
+                            React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: code, title: "Code", "data-tracking-id": "mobile-md-editor-toolbar-code", className: "mobile-markdown-tool-item" },
+                                React.createElement(CodeIcon, null))),
+                        React.createElement(ToolbarItem, { id: "tools-kebab-menu-container", className: "mobile-markdown-tool-item", spacer: { default: 'spacerSm' } },
+                            React.createElement(MenuContainer, { isOpen: isDrillMenuOpen, onOpenChange: (isOpen) => setIsDrillMenuOpen(isOpen), popperProps: { position: 'left' }, menu: React.createElement(Menu, { id: "toolsKebabMenu", containsDrilldown: true, drilldownItemPath: drilldownPath, drilledInMenus: menuDrilledIn, activeMenu: activeMenu, onDrillIn: drillIn, onDrillOut: drillOut, onGetMenuHeight: setHeight, ref: drillMenuRef },
+                                    React.createElement(MenuContent, { menuHeight: `${menuHeights[activeMenu]}px` },
+                                        React.createElement(MenuList, null,
+                                            React.createElement(MenuItem, { itemId: "link-btn-menu-item", isDisabled: props.disabled || isPreview, onClick: link, "data-tracking-id": "mobile-md-editor-toolbar-link", icon: React.createElement(LinkIcon, { "aria-hidden": true }) }, "Link"),
+                                            React.createElement(MenuItem, { itemId: "code-btn-menu-item", isDisabled: props.disabled || isPreview, onClick: quote, "data-tracking-id": "mobile-md-editor-toolbar-quote", icon: React.createElement(QuoteRightIcon, { "aria-hidden": true }) }, "Quote"),
+                                            React.createElement(MenuItem, { itemId: "group:manage_attachments", direction: "down", icon: React.createElement(ImageIcon, { "aria-hidden": true }), drilldownMenu: React.createElement(DrilldownMenu, { id: "drilldownMenuStart" },
+                                                    React.createElement(MenuItem, { itemId: "group:manage_attachments_breadcrumb", direction: "up" }, "Manage attachments"),
+                                                    React.createElement("div", { className: "attachments-items" }, getFileSelectorList(true))) }, "Manage Attachments")))), menuRef: drillMenuRef, toggle: React.createElement(MenuToggle, { variant: "plain", ref: toggleRef, onClick: onToggleClick, isExpanded: isDrillMenuOpen },
+                                    React.createElement(EllipsisVIcon, null)), toggleRef: toggleRef }))))))),
+            React.createElement("div", { className: "markdown-content" }, !isPreview ? (React.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: cx('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows, style: { height: '313px' } }))) : (React.createElement("div", { className: "markdown-preview-placeholder", style: { height: '313px' } },
+                React.createElement("div", { className: "markdown-preview", style: { maxHeight: '313px' } },
+                    React.createElement("div", { dangerouslySetInnerHTML: {
+                            __html: DOMPurify.sanitize(previewMDText(mdValue)),
+                        } }))))),
+            React.createElement("div", null, props.showMarkdownPlainTextToggle && (React.createElement("div", { className: `markdown-toggle-toolbar pf-v5-l-flex` },
+                React.createElement("span", { className: "markdown-toolbar-left-section pf-m-wrap" },
+                    !isPlainModeEnabled && (React.createElement(Button, { className: "markdown-preview-btn", tabIndex: -1, variant: ButtonVariant.link, onClick: preview, title: "Show preview", "data-tracking-id": `md-preview-${isPreview ? 'hide' : 'show'}`, isDisabled: disablePreviewButton }, isPreview ? (React.createElement("span", null,
+                        " ",
+                        t(hidePreviewText))) : (React.createElement("span", null,
+                        " ",
+                        t(showPreviewText))))),
+                    isUploadingFile && (React.createElement(React.Fragment, null,
+                        React.createElement(Trans, null,
+                            React.createElement("small", { className: "pf-v5-u-pl-md uploading-spinner-text" },
+                                React.createElement(Trans, null, "Uploading File"))),
+                        React.createElement(Spinner, { className: "pf-v5-u-ml-sm", size: "sm" }))),
+                    mdValue.length > props.minCharsForCounter && getCharCountText(mdValue)),
+                React.createElement("span", null,
+                    React.createElement(Button, { variant: "plain", className: `${isPlainModeEnabled ? 'markdown-active-mode' : ''} plain-mode-btn`, onClick: () => onModeChange(true), isDisabled: isPlainModeEnabled || isUploadingFile, "data-tracking-id": "md-editor-plaintext" },
+                        React.createElement(Trans, null, "Plain text")),
+                    React.createElement(Button, { variant: "plain", className: `${!isPlainModeEnabled ? 'markdown-active-mode' : ''} markdown-mode-btn`, onClick: () => onModeChange(false), isDisabled: !isPlainModeEnabled, "data-tracking-id": "md-editor-md" },
+                        React.createElement(Trans, null, "Markdown")))))))));
 }
 MarkdownEditor.defaultProps = defaultProps;
 export { MarkdownEditor };

package/lib/esm/MarkdownEditor/markdownEditor.css

@@ -22,10 +22,9 @@
     border: 1px solid #d2d2d2;
     display: block;
     min-height: 100px;
-    overflow: hidden;
 }
 
-.markdown-editor-container .pf-c-toolbar {
+.markdown-editor-container .pf-v5-c-toolbar {
     padding: 0.5rem;
 }
 
@@ -35,6 +34,7 @@
     margin-left: 10px;
     margin-right: 5px;
     width: 1px;
+    margin-top: 10px;
 }
 
 .markdown-content .markdown-text-area {
@@ -65,8 +65,12 @@
     color: #06c;
 }
 
-.markdown-editor-container .markdown-guidance {
-    padding-right: 12px;
+.markdown-editor-container .pf-v5-c-button.pf-m-link.pf-m-inline.markdown-guidance {
+    padding-block-start: 0.375rem;
+    padding-block-end: 0.375rem;
+    padding-inline-start: 0.375rem;
+    padding-inline-end: 0.375rem;
+    box-sizing: border-box;
 }
 
 .markdown-editor-container .character-count-wrapper {
@@ -91,7 +95,6 @@ a[href*='/attachments/']::before,
 button[data-link*='/attachments/']::before {
     margin-right: 4px;
     font-style: normal;
-    font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     content: '📎';
@@ -109,3 +112,108 @@ button[data-link*='/attachments/']::before {
 .markdown-preview {
     border-bottom: none !important;
 }
+
+.desktop-markdown-toolbar {
+    display: flex;
+}
+
+.markdown-toolbar-left-section {
+    display: flex;
+    align-items: center;
+}
+
+.btn-group-separator {
+    display: inline-block;
+    width: 1px;
+    height: 24px;
+    margin: 0 8px;
+    background-color: #ccc;
+}
+
+.markdown-guidance-container {
+    display: none;
+}
+
+.mobile-markdown-toolbar {
+    display: none;
+}
+
+#toolsKebabMenu {
+    overflow: hidden;
+    inset: 0px auto auto -12rem !important;
+
+    .pf-v5-c-menu__list {
+        padding-left: 0px !important;
+        padding-right: 0px !important;
+    }
+
+    .attachments-items li {
+        padding: 0px 10px !important;
+
+        .pf-v5-c-divider {
+            width: 15rem;
+            margin-left: -1rem;
+        }
+    }
+}
+
+/* Mobile toolbar styles */
+@media (max-width: 880px) {
+    .desktop-markdown-toolbar {
+        display: none;
+    }
+
+    .markdown-guidance-container {
+        display: flex;
+        justify-content: flex-end;
+        padding: 9px;
+    }
+
+    .mobile-markdown-toolbar {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        .mobile-markdown-tool-item {
+            width: 2.5rem !important;
+        }
+    }
+
+    .markdown-toolbar-left-section {
+        margin-inline-end: 0px !important;
+    }
+
+    .markdown-preview-btn,
+    .plain-mode-btn,
+    .markdown-mode-btn {
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+
+    .markdown-editor-container .markdown-toggle-toolbar button {
+        font-size: 14px;
+        padding: 10px 0.25rem;
+    }
+}
+
+@media (max-width: 475px) {
+    .markdown-editor-container .pf-v5-c-toolbar {
+        padding: 0.5rem 0rem;
+    }
+
+    .mobile-markdown-toolbar {
+        .mobile-markdown-tool-item {
+            width: 0.1rem !important;
+        }
+
+        #tools-kebab-menu-container {
+            position: relative;
+            right: 2rem;
+        }
+    }
+
+    .uploading-spinner-text {
+        display: none;
+    }
+}

package/lib/esm/MoreOrLess/MoreOrLess.d.ts

@@ -5,7 +5,7 @@ interface IProps {
     className?: string;
     appStickyHeaderRef?: React.MutableRefObject<HTMLElement>;
 }
-declare function MoreOrLess(props: IProps): JSX.Element;
+declare function MoreOrLess(props: IProps): React.JSX.Element;
 declare namespace MoreOrLess {
     var defaultProps: Partial<IProps>;
 }

package/lib/esm/MoreOrLess/MoreOrLess.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreOrLess.d.ts","sourceRoot":"","sources":["../../../src/MoreOrLess/MoreOrLess.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC5D;AAOD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAgEhC;kBAhEQ,UAAU;;;AAoEnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"MoreOrLess.d.ts","sourceRoot":"","sources":["../../../src/MoreOrLess/MoreOrLess.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC5D;AAOD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,qBAgEhC;kBAhEQ,UAAU;;;AAoEnB,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/lib/esm/PaginatedList/PaginatedList.d.ts

@@ -12,7 +12,8 @@ interface IProps {
     onPerPageSelect?: (pageSize: number) => void;
     perPageOptions?: PaginationProps['perPageOptions'];
     errorMessage?: string;
+    setPaginatedListLength?: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
-export declare function PaginatedList(props: IProps): JSX.Element;
+export declare function PaginatedList(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=PaginatedList.d.ts.map

package/lib/esm/PaginatedList/PaginatedList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatedList.d.ts","sourceRoot":"","sources":["../../../src/PaginatedList/PaginatedList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,eAAe,EAElB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,MAAM;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,eA4D1C"}
+{"version":3,"file":"PaginatedList.d.ts","sourceRoot":"","sources":["../../../src/PaginatedList/PaginatedList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,eAAe,EAElB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,MAAM;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CACrF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBAwE1C"}

package/lib/esm/PaginatedList/PaginatedList.js

@@ -14,6 +14,15 @@ export function PaginatedList(props) {
     if (!props.serverPaginated) {
         listItems = listItems.slice(indexOfFirstShownElement, indexOfFirstShownElement + pageSize);
     }
+    useEffect(() => {
+        // Only update the external state if the prop function is provided
+        if (props.setPaginatedListLength) {
+            // Calculate the length based on current page and perPage, or directly use listItems.length
+            listItems &&
+                props.setPaginatedListLength(listItems.slice(indexOfFirstShownElement, indexOfFirstShownElement + pageSize).length);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.listItems.length]);
     const onSetPage = (event, pageNumber) => {
         setCurrentPage(pageNumber);
         props.onSetPage && props.onSetPage(pageNumber);

package/lib/esm/PaginationCompact/PaginationCompact.d.ts

@@ -1,9 +1,10 @@
 import './paginationCompact.css';
+import React from 'react';
 interface IProps {
     maxPage: number;
     dataTrackingId: string;
     onPageChange: (currentPage: number) => void;
 }
-export declare function PaginationCompact({ maxPage, dataTrackingId, onPageChange }: IProps): JSX.Element;
+export declare function PaginationCompact({ maxPage, dataTrackingId, onPageChange }: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=PaginationCompact.d.ts.map

package/lib/esm/PaginationCompact/PaginationCompact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationCompact.d.ts","sourceRoot":"","sources":["../../../src/PaginationCompact/PaginationCompact.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAOjC,UAAU,MAAM;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,EAAE,MAAM,eA0DlF"}
+{"version":3,"file":"PaginationCompact.d.ts","sourceRoot":"","sources":["../../../src/PaginationCompact/PaginationCompact.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAKjC,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,UAAU,MAAM;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,EAAE,MAAM,qBA0DlF"}

package/lib/esm/PaginationCompact/PaginationCompact.js

@@ -20,9 +20,9 @@ export function PaginationCompact({ maxPage, dataTrackingId, onPageChange }) {
         onPageChange(currentPage);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentPage]);
-    return (React.createElement("div", { className: "pagination-compact pf-c-pagination pf-m-compact pf-m-bottom pf-u-ml-auto" },
-        React.createElement("nav", { className: "pf-c-pagination__nav" },
-            React.createElement("div", { className: "pf-c-pagination__nav-control pf-m-prev" },
+    return (React.createElement("div", { className: "pagination-compact pf-v5-c-pagination pf-m-compact pf-m-bottom pf-v5-u-ml-auto" },
+        React.createElement("nav", { className: "pf-v5-c-pagination__nav" },
+            React.createElement("div", { className: "pf-v5-c-pagination__nav-control pf-m-prev" },
                 React.createElement(Button, { variant: ButtonVariant.plain, type: "button", "data-tracking-id": `${dataTrackingId}-previous`, onClick: onPreviousClick, isDisabled: currentPage === 1, "aria-label": "Go to previous page" },
                     React.createElement(AngleLeftIcon, null))),
             React.createElement("div", { style: {
@@ -31,7 +31,7 @@ export function PaginationCompact({ maxPage, dataTrackingId, onPageChange }) {
                 currentPage,
                 " of ",
                 maxPage),
-            React.createElement("div", { className: "pf-c-pagination__nav-control pf-m-next" },
+            React.createElement("div", { className: "pf-v5-c-pagination__nav-control pf-m-next" },
                 React.createElement(Button, { variant: ButtonVariant.plain, onClick: onNextClick, "data-tracking-id": `${dataTrackingId}-next`, isDisabled: currentPage === maxPage, type: "button", "aria-label": "Go to next page" },
                     React.createElement(AngleRightIcon, null))))));
 }

package/lib/esm/PaginationCompact/paginationCompact.css

@@ -1,4 +1,4 @@
-.pagination-compact.pf-c-pagination.pf-m-bottom {
+.pagination-compact.pf-v5-c-pagination.pf-m-bottom {
     padding: 0px;
     background: none;
     box-shadow: none;

package/lib/esm/PhoneInput/CountryData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CountryData.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/CountryData.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,eAAe,UA2C3B,CAAC;AAEF,eAAO,MAAM,YAAY,kCAsgBxB,CAAC"}
+{"version":3,"file":"CountryData.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/CountryData.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,eAAe,UA2C3B,CAAC;AAEF,eAAO,MAAM,YAAY,kCAugBxB,CAAC"}

package/lib/esm/PhoneInput/CountryData.js

@@ -169,9 +169,10 @@ export const COUNTRY_DATA = [
     ['Gabon', ['africa'], 'ga', '241'],
     ['Gambia', ['africa'], 'gm', '220'],
     ['Georgia', ['asia', 'ex-ussr'], 'ge', '995'],
-    ['Germany', ['europe', 'eu-union', 'baltic'], 'de', '49', '.... ........'],
+    ['Germany', ['europe', 'eu-union', 'baltic'], 'de', '49'],
     ['Ghana', ['africa'], 'gh', '233'],
     ['Greece', ['europe', 'eu-union'], 'gr', '30'],
+    ['Greenland', ['america', 'north-america'], 'gl', '299'],
     ['Grenada', ['america', 'carribean'], 'gd', '1473'],
     ['Guadeloupe', ['america', 'carribean'], 'gp', '590', '', 0],
     ['Guam', ['oceania'], 'gu', '1671'],
@@ -201,7 +202,7 @@ export const COUNTRY_DATA = [
         '7',
         '... ...-..-..',
         1,
-        ['310', '311', '312', '313', '315', '318', '321', '324', '325', '326', '327', '336', '7172', '73622'],
+        ['310', '311', '312', '313', '315', '318', '321', '324', '325', '326', '327', '336', '727', '7172', '73622'],
     ],
     ['Kenya', ['africa'], 'ke', '254'],
     ['Kiribati', ['oceania'], 'ki', '686'],

package/lib/esm/PhoneInput/FlagSvgs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const FlagSvgs: () => React.JSX.Element;
+//# sourceMappingURL=FlagSvgs.d.ts.map

package/lib/esm/PhoneInput/FlagSvgs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlagSvgs.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/FlagSvgs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,QAAQ,yBAyiIpB,CAAC"}