@rh-support/components 2.5.231 → 2.6.10

package/lib/esm/RichTextEditor/autoLinkModule.d.ts

@@ -0,0 +1,18 @@
+import type { default as Quill } from 'quill';
+/**
+ * Registers auto-link behaviour on a Quill instance:
+ *
+ * 1. **Type** — after a delimiter character, checks the preceding token
+ *    for URL / case-ID / BZ patterns.
+ * 2. **Paste** — when the insert is longer than one character, scans the
+ *    full inserted range.
+ * 3. **Blur** — a full-document scan so trailing tokens without a
+ *    delimiter still get linked before submit.
+ */
+export declare function registerAutoLinkModule(quill: Quill): void;
+/**
+ * Scans the entire document for unlinkified tokens.
+ * Call this on blur so trailing URLs / IDs without a delimiter are caught.
+ */
+export declare function linkifyFullDocument(quill: Quill): void;
+//# sourceMappingURL=autoLinkModule.d.ts.map

package/lib/esm/RichTextEditor/autoLinkModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoLinkModule.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditor/autoLinkModule.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,IAAI,KAAK,EAA8B,MAAM,OAAO,CAAC;AAyE1E;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CA0EzD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAItD"}

package/lib/esm/RichTextEditor/autoLinkModule.js

@@ -0,0 +1,156 @@
+function getCaseIdHref(caseId) {
+    const host = typeof window !== 'undefined' ? window.location.host : 'access.redhat.com';
+    return `https://${host}/support/cases/#/case/${caseId}`;
+}
+function getBugzillaHref(bugId) {
+    return `https://bugzilla.redhat.com/show_bug.cgi?id=${bugId}`;
+}
+const DELIMITER_RE = /[\s.,;:!?)}\]>]/;
+const CASE_ID_RE = /(?:^|[\s(])(\d{8})$/;
+const BZ_RE = /(?:^|[\s(])(?:BZ[\s-]*|Bug[#\s]?)(\d{7,})$/i;
+const URL_RE = /(?:^|[\s(])(https?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
+const URL_AT_END_RE = /(https?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])$/i;
+const WORD_CASE_ID_RE = /^(\d{8})$/;
+const WORD_BZ_RE = /^(?:BZ[\s-]*|Bug[#\s]?)(\d{7,})$/i;
+/**
+ * Scans a text range inside the Quill document and applies link formatting
+ * to all recognised URL, case-ID, and BZ patterns that aren't already linked.
+ *
+ * Used by the blur scan and paste scan to cover text that was not preceded
+ * by a delimiter character.
+ */
+function linkifyRange(quill, rangeStart, rangeLength) {
+    const text = quill.getText(rangeStart, rangeLength);
+    URL_RE.lastIndex = 0;
+    let urlMatch;
+    while ((urlMatch = URL_RE.exec(text)) !== null) {
+        const url = urlMatch[1];
+        const matchOffset = urlMatch.index + urlMatch[0].length - url.length;
+        const absStart = rangeStart + matchOffset;
+        const format = quill.getFormat(absStart, url.length);
+        if (!format.link) {
+            quill.formatText(absStart, url.length, 'link', url, 'api');
+        }
+    }
+    const lines = text.split('\n');
+    let offset = 0;
+    for (const line of lines) {
+        const words = line.split(/(\s+)/);
+        let wordOffset = offset;
+        for (const word of words) {
+            if (/\S/.test(word)) {
+                const caseMatch = WORD_CASE_ID_RE.exec(word);
+                if (caseMatch) {
+                    const absStart = rangeStart + wordOffset;
+                    const fmt = quill.getFormat(absStart, 8);
+                    if (!fmt.link) {
+                        quill.formatText(absStart, 8, 'link', getCaseIdHref(caseMatch[1]), 'api');
+                    }
+                }
+                else {
+                    const bzMatch = WORD_BZ_RE.exec(word);
+                    if (bzMatch) {
+                        const absStart = rangeStart + wordOffset;
+                        const fmt = quill.getFormat(absStart, word.length);
+                        if (!fmt.link) {
+                            quill.formatText(absStart, word.length, 'link', getBugzillaHref(bzMatch[1]), 'api');
+                        }
+                    }
+                }
+            }
+            wordOffset += word.length;
+        }
+        offset += line.length + 1;
+    }
+}
+/**
+ * Registers auto-link behaviour on a Quill instance:
+ *
+ * 1. **Type** — after a delimiter character, checks the preceding token
+ *    for URL / case-ID / BZ patterns.
+ * 2. **Paste** — when the insert is longer than one character, scans the
+ *    full inserted range.
+ * 3. **Blur** — a full-document scan so trailing tokens without a
+ *    delimiter still get linked before submit.
+ */
+export function registerAutoLinkModule(quill) {
+    quill.on('text-change', (delta, _oldDelta, source) => {
+        if (source !== 'user')
+            return;
+        const ops = delta.ops;
+        if (!ops || ops.length === 0)
+            return;
+        const lastOp = ops.at(-1);
+        if (!lastOp || typeof lastOp.insert !== 'string')
+            return;
+        const insertedText = lastOp.insert;
+        // Paste: multi-char insert — scan the full inserted range
+        if (insertedText.length > 1) {
+            let insertOffset = 0;
+            for (const op of ops) {
+                if (!op.retain)
+                    break;
+                insertOffset += op.retain;
+            }
+            setTimeout(() => linkifyRange(quill, insertOffset, insertedText.length), 0);
+            return;
+        }
+        // Type: single-char delimiter
+        if (!DELIMITER_RE.test(insertedText))
+            return;
+        const selection = quill.getSelection();
+        if (!selection)
+            return;
+        const cursorIndex = selection.index;
+        const text = quill.getText(0, cursorIndex);
+        let lineStart = text.lastIndexOf('\n', cursorIndex - 2);
+        if (lineStart === -1)
+            lineStart = 0;
+        else
+            lineStart += 1;
+        const lineText = text.slice(lineStart, cursorIndex - 1);
+        // URL — try first so 8-digit IDs inside URLs are not separately linked
+        const urlMatch = URL_AT_END_RE.exec(lineText);
+        if (urlMatch) {
+            const url = urlMatch[1];
+            const matchStart = lineStart + lineText.length - url.length;
+            const format = quill.getFormat(matchStart, url.length);
+            if (!format.link) {
+                quill.formatText(matchStart, url.length, 'link', url, 'api');
+            }
+            return;
+        }
+        // Case ID (8-digit number)
+        const caseMatch = CASE_ID_RE.exec(lineText);
+        if (caseMatch) {
+            const caseId = caseMatch[1];
+            const matchStart = lineStart + lineText.length - caseId.length;
+            const format = quill.getFormat(matchStart, caseId.length);
+            if (!format.link) {
+                quill.formatText(matchStart, caseId.length, 'link', getCaseIdHref(caseId), 'api');
+            }
+            return;
+        }
+        // Bugzilla
+        const bzMatch = BZ_RE.exec(lineText);
+        if (bzMatch) {
+            const bugId = bzMatch[1];
+            const fullMatch = bzMatch[0].trimStart();
+            const matchStart = lineStart + lineText.length - fullMatch.length;
+            const format = quill.getFormat(matchStart, fullMatch.length);
+            if (!format.link) {
+                quill.formatText(matchStart, fullMatch.length, 'link', getBugzillaHref(bugId), 'api');
+            }
+        }
+    });
+}
+/**
+ * Scans the entire document for unlinkified tokens.
+ * Call this on blur so trailing URLs / IDs without a delimiter are caught.
+ */
+export function linkifyFullDocument(quill) {
+    const length = quill.getLength();
+    if (length <= 1)
+        return;
+    linkifyRange(quill, 0, length - 1);
+}

package/lib/esm/RichTextEditor/index.d.ts

@@ -0,0 +1,4 @@
+export * from './RichTextEditor';
+export { useQuillEditor } from './useQuillEditor';
+export type { UseQuillEditorOptions } from './useQuillEditor';
+//# sourceMappingURL=index.d.ts.map

package/lib/esm/RichTextEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/esm/RichTextEditor/index.js

@@ -0,0 +1,2 @@
+export * from './RichTextEditor';
+export { useQuillEditor } from './useQuillEditor';

package/lib/esm/RichTextEditor/linkUrl.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns a normalized http(s)/mailto URL, or null if the value is not allowed.
+ * Protocol-less hosts (e.g. example.com) are treated as https.
+ */
+export declare function normalizeLinkUrl(url: string): string | null;
+export declare function isValidUrl(url: string): boolean;
+//# sourceMappingURL=linkUrl.d.ts.map

package/lib/esm/RichTextEditor/linkUrl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkUrl.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditor/linkUrl.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAa3D;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAE/C"}

package/lib/esm/RichTextEditor/linkUrl.js

@@ -0,0 +1,26 @@
+const ALLOWED_PROTOCOLS = new Set(['http:', 'https:', 'mailto:']);
+/**
+ * Returns a normalized http(s)/mailto URL, or null if the value is not allowed.
+ * Protocol-less hosts (e.g. example.com) are treated as https.
+ */
+export function normalizeLinkUrl(url) {
+    const trimmed = url.trim();
+    if (!trimmed)
+        return null;
+    try {
+        const hasAllowedPrefix = /^https?:\/\//i.test(trimmed) || /^mailto:/i.test(trimmed);
+        const candidate = hasAllowedPrefix ? trimmed : `https://${trimmed}`;
+        const parsed = new URL(candidate);
+        if (!ALLOWED_PROTOCOLS.has(parsed.protocol))
+            return null;
+        if (parsed.protocol !== 'mailto:' && !parsed.hostname.includes('.'))
+            return null;
+        return candidate;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+export function isValidUrl(url) {
+    return normalizeLinkUrl(url) !== null;
+}

package/lib/esm/RichTextEditor/richTextEditor.css

@@ -0,0 +1,182 @@
+.richtext-editor-container {
+    background: var(--pf-t--global--background--color--primary--default, #fff);
+    border: 1px solid var(--pf-t--global--border--color--default, #d2d2d2);
+    border-radius: var(--pf-t--global--border--radius--small, 3px);
+    display: block;
+    min-height: 100px;
+}
+
+.richtext-editor-container--disabled {
+    background: var(--pf-t--global--background--color--disabled--default, #f0f0f0);
+    pointer-events: none;
+}
+
+.richtext-editor-content {
+    resize: vertical;
+    overflow-y: auto;
+    overflow-x: hidden;
+    font-size: 15px;
+    min-width: 100%;
+    outline: none;
+    border: none;
+    min-height: 100px;
+}
+
+.richtext-editor-content.ql-container,
+.richtext-editor-container .ql-container.ql-container {
+    border: none !important;
+    outline: none !important;
+    font-size: 15px;
+}
+
+.richtext-editor-content .ql-editor {
+    padding: 0.8rem;
+    outline: none;
+    border: none;
+    min-height: 100px;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
+.richtext-editor-content .ql-editor:focus {
+    outline: none;
+    border: none;
+    box-shadow: none;
+}
+
+.richtext-editor-content .ql-editor.ql-blank::before {
+    content: attr(data-placeholder);
+    color: var(--pf-t--global--text--color--placeholder, #6a6e73);
+    pointer-events: none;
+    position: absolute;
+    font-style: normal;
+}
+
+.richtext-editor-content ul,
+.richtext-editor-content ol {
+    padding-left: 24px;
+}
+
+.richtext-editor-content li[data-list='bullet'] {
+    list-style-type: disc;
+}
+
+.richtext-editor-content li[data-list='bullet'].ql-indent-1 {
+    list-style-type: circle;
+}
+
+.richtext-editor-content li[data-list='bullet'].ql-indent-2 {
+    list-style-type: square;
+}
+
+.richtext-editor-content li[data-list='bullet'].ql-indent-3 {
+    list-style-type: disc;
+}
+
+.richtext-editor-content li[data-list='bullet'].ql-indent-4 {
+    list-style-type: circle;
+}
+
+.richtext-editor-content li[data-list='ordered'] {
+    list-style-type: decimal;
+}
+
+.richtext-editor-content li[data-list='ordered'].ql-indent-1 {
+    list-style-type: lower-alpha;
+}
+
+.richtext-editor-content li[data-list='ordered'].ql-indent-2 {
+    list-style-type: lower-roman;
+}
+
+.richtext-editor-content .ql-align-center {
+    text-align: center;
+}
+
+.richtext-editor-content .ql-align-right {
+    text-align: right;
+}
+
+.richtext-editor-content .ql-align-justify {
+    text-align: justify;
+}
+
+.richtext-editor-content .ql-indent-1 {
+    margin-left: 3em;
+}
+
+.richtext-editor-content .ql-indent-2 {
+    margin-left: 6em;
+}
+
+.richtext-editor-content .ql-indent-3 {
+    margin-left: 9em;
+}
+
+.richtext-editor-content .ql-indent-4 {
+    margin-left: 12em;
+}
+
+.richtext-editor-content .ql-indent-5 {
+    margin-left: 15em;
+}
+
+.richtext-editor-content a {
+    color: var(--pf-t--global--text--color--link--default, #0066cc);
+    text-decoration: underline;
+}
+
+.richtext-editor-content img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 8px 0;
+}
+
+.richtext-editor-container.is-private .richtext-editor-content {
+    background-color: #f5eeee;
+}
+
+.richtext-toolbar {
+    border-bottom: 1px solid var(--pf-t--global--border--color--default, #d2d2d2);
+    padding: 4px 8px;
+}
+
+.richtext-toolbar-left-section {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2px;
+}
+
+.btn-group-separator {
+    display: inline-block;
+    width: 1px;
+    height: 24px;
+    margin: 0 8px;
+    background-color: var(--pf-t--global--border--color--default, #ccc);
+}
+
+.toggle-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+}
+
+.dropdown-caret {
+    font-size: 12px;
+}
+
+.richtext-char-counter {
+    padding: 4px 8px;
+    font-size: 12px;
+    text-align: right;
+    color: var(--pf-t--global--text--color--subtle, #6a6e73);
+    border-top: 1px solid var(--pf-t--global--border--color--default, #d2d2d2);
+}
+
+.richtext-char-counter--exceeded {
+    color: var(--pf-t--global--color--status--danger--default, #c9190b);
+    font-weight: bold;
+}

package/lib/esm/RichTextEditor/useQuillEditor.d.ts

@@ -0,0 +1,20 @@
+import Quill from 'quill';
+export interface UseQuillEditorOptions {
+    placeholder?: string;
+    readOnly?: boolean;
+    onChange?: (html: string) => void;
+    onChangePlainText?: (text: string) => void;
+    onSelectionChange?: (format: Record<string, unknown>) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export declare function useQuillEditor(options: UseQuillEditorOptions): {
+    editorRef: import("react").MutableRefObject<HTMLDivElement>;
+    quillRef: import("react").MutableRefObject<Quill>;
+    activeFormat: Record<string, unknown>;
+    setActiveFormat: import("react").Dispatch<import("react").SetStateAction<Record<string, unknown>>>;
+    setContents: (html: string) => void;
+    setReadOnly: (readOnly: boolean) => void;
+    getPlainText: () => string;
+};
+//# sourceMappingURL=useQuillEditor.d.ts.map

package/lib/esm/RichTextEditor/useQuillEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuillEditor.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditor/useQuillEditor.ts"],"names":[],"mappings":"AACA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAKxD,MAAM,WAAW,qBAAqB;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAoFD,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB;;;;;wBA+ElB,MAAM;4BAgBF,OAAO;;EASrD"}

package/lib/esm/RichTextEditor/useQuillEditor.js

@@ -0,0 +1,180 @@
+import DOMPurify from 'dompurify';
+import Quill from 'quill';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { linkifyFullDocument, registerAutoLinkModule } from './autoLinkModule';
+const ALLOWED_FORMATS = ['header', 'bold', 'italic', 'underline', 'strike', 'list', 'indent', 'align', 'link', 'image'];
+/**
+ * Quill 2 internally represents ALL lists as <ol> and distinguishes bullet vs.
+ * ordered via data-list attributes on <li>. root.innerHTML preserves text-entity
+ * encoding (important for literal angle-brackets), but outputs this internal
+ * format. This helper converts it to semantic <ul>/<ol> and nests indented
+ * items before sanitization.
+ */
+function normalizeQuillListHtml(rawHtml) {
+    const tmp = document.createElement('div');
+    tmp.innerHTML = rawHtml;
+    tmp.querySelectorAll('.ql-ui').forEach((el) => el.remove());
+    tmp.querySelectorAll('ol').forEach((ol) => {
+        const items = Array.from(ol.querySelectorAll(':scope > li'));
+        const allBullet = items.length > 0 && items.every((li) => li instanceof HTMLElement && li.dataset.list === 'bullet');
+        if (allBullet) {
+            const ul = document.createElement('ul');
+            for (const attr of Array.from(ol.attributes)) {
+                ul.setAttribute(attr.name, attr.value);
+            }
+            while (ol.firstChild)
+                ul.appendChild(ol.firstChild);
+            ol.replaceWith(ul);
+        }
+        items.forEach((li) => {
+            if (li instanceof HTMLElement) {
+                delete li.dataset.list;
+            }
+        });
+    });
+    tmp.querySelectorAll('ul, ol').forEach((list) => {
+        if (list instanceof HTMLElement)
+            nestIndentedItems(list);
+    });
+    return tmp.innerHTML;
+}
+function tryNestIndentedItem(item, list) {
+    var _a;
+    const indentMatch = /ql-indent-(\d+)/.exec((_a = item.className) !== null && _a !== void 0 ? _a : '');
+    if (!indentMatch)
+        return false;
+    const level = Number.parseInt(indentMatch[1], 10);
+    item.classList.remove(`ql-indent-${level}`);
+    if (!item.className.trim())
+        item.removeAttribute('class');
+    let prev = item.previousElementSibling;
+    while (prev && prev.tagName !== 'LI')
+        prev = prev.previousElementSibling;
+    if (!prev)
+        return false;
+    let nested = prev.querySelector(':scope > ul, :scope > ol');
+    if (!(nested instanceof HTMLElement)) {
+        nested = document.createElement(list.tagName.toLowerCase());
+        prev.appendChild(nested);
+    }
+    nested.appendChild(item);
+    if (level > 1)
+        item.classList.add(`ql-indent-${level - 1}`);
+    return true;
+}
+function nestIndentedItems(list) {
+    let changed = true;
+    while (changed) {
+        changed = false;
+        const items = Array.from(list.querySelectorAll(':scope > li'));
+        for (const item of items) {
+            if (tryNestIndentedItem(item, list))
+                changed = true;
+        }
+    }
+    // Newly created nested lists are not in the original querySelectorAll snapshot.
+    // Recurse so indent 2+ items become true nested lists instead of leftover ql-indent-* siblings.
+    for (const nested of Array.from(list.querySelectorAll(':scope > li > ul, :scope > li > ol'))) {
+        if (nested instanceof HTMLElement)
+            nestIndentedItems(nested);
+    }
+}
+export function useQuillEditor(options) {
+    const editorRef = useRef(null);
+    const quillRef = useRef(null);
+    const [activeFormat, setActiveFormat] = useState({});
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    // Track whether the last change was internal (from Quill) to avoid echo loops
+    const isInternalChange = useRef(false);
+    useEffect(() => {
+        if (!editorRef.current || quillRef.current)
+            return;
+        const quill = new Quill(editorRef.current, {
+            modules: {
+                toolbar: false,
+                keyboard: {
+                    bindings: {
+                        indent: {
+                            key: 'Tab',
+                            format: ['list'],
+                            handler(_range, _context) {
+                                this.quill.format('indent', '+1', 'user');
+                                return false;
+                            },
+                        },
+                        outdent: {
+                            key: 'Tab',
+                            shiftKey: true,
+                            format: ['list'],
+                            handler(_range, _context) {
+                                this.quill.format('indent', '-1', 'user');
+                                return false;
+                            },
+                        },
+                    },
+                },
+                clipboard: { matchVisual: false },
+            },
+            formats: ALLOWED_FORMATS,
+            placeholder: optionsRef.current.placeholder,
+            readOnly: optionsRef.current.readOnly,
+        });
+        registerAutoLinkModule(quill);
+        quill.on('text-change', () => {
+            var _a, _b, _c, _d;
+            isInternalChange.current = true;
+            const html = DOMPurify.sanitize(normalizeQuillListHtml(quill.root.innerHTML));
+            (_b = (_a = optionsRef.current).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, html);
+            (_d = (_c = optionsRef.current).onChangePlainText) === null || _d === void 0 ? void 0 : _d.call(_c, quill.getText().trim());
+            const sel = quill.getSelection();
+            if (sel) {
+                setActiveFormat(quill.getFormat(sel));
+            }
+            isInternalChange.current = false;
+        });
+        quill.on('selection-change', (range) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (range) {
+                setActiveFormat(quill.getFormat(range));
+                (_b = (_a = optionsRef.current).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, quill.getFormat(range));
+                if (range.length === 0) {
+                    (_d = (_c = optionsRef.current).onFocus) === null || _d === void 0 ? void 0 : _d.call(_c);
+                }
+            }
+            else {
+                linkifyFullDocument(quill);
+                (_f = (_e = optionsRef.current).onBlur) === null || _f === void 0 ? void 0 : _f.call(_e);
+            }
+        });
+        quillRef.current = quill;
+        return () => {
+            quillRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const setContents = useCallback((html) => {
+        const quill = quillRef.current;
+        if (!quill || isInternalChange.current)
+            return;
+        const currentHtml = DOMPurify.sanitize(normalizeQuillListHtml(quill.root.innerHTML));
+        if (currentHtml === html)
+            return;
+        const selection = quill.getSelection();
+        quill.clipboard.dangerouslyPasteHTML(html);
+        if (selection) {
+            const length = quill.getLength();
+            const safeIndex = Math.min(selection.index, length - 1);
+            quill.setSelection(safeIndex, 0, 'silent');
+        }
+    }, []);
+    const setReadOnly = useCallback((readOnly) => {
+        var _a;
+        (_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.enable(!readOnly);
+    }, []);
+    const getPlainText = useCallback(() => {
+        var _a, _b;
+        return (_b = (_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.getText().trim()) !== null && _b !== void 0 ? _b : '';
+    }, []);
+    return { editorRef, quillRef, activeFormat, setActiveFormat, setContents, setReadOnly, getPlainText };
+}

package/lib/esm/SingleSelectDropdown/SingleSelectDropdown.d.ts

@@ -27,6 +27,8 @@ export interface SingleSelectDropdownProps extends Omit<SelectProps, 'toggle'> {
     isScrollable?: boolean;
     zIndex?: number;
     isModalOpen?: boolean;
+    /** When set, toggle opens this handler instead of the select menu (e.g. case-details severity modal). */
+    onMenuToggle?: () => void;
     hideToggleIcons?: boolean;
     onClear?: () => void;
     onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectDropdown.d.ts","sourceRoot":"","sources":["../../../src/SingleSelectDropdown/SingleSelectDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQH,WAAW,EAEd,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAInE,MAAM,WAAW,2BAA2B;IACxC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IAC1E,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,2BAA2B,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;CAChC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAsIpE"}
+{"version":3,"file":"SingleSelectDropdown.d.ts","sourceRoot":"","sources":["../../../src/SingleSelectDropdown/SingleSelectDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQH,WAAW,EAEd,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAInE,MAAM,WAAW,2BAA2B;IACxC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IAC1E,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,2BAA2B,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yGAAyG;IACzG,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;CAChC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBA0IpE"}

package/lib/esm/SingleSelectDropdown/SingleSelectDropdown.js

@@ -15,9 +15,13 @@ import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
 import { useSelectKeyboardNavigator } from '../hooks/useSelectKeyboardNavigator';
 export function SingleSelectDropdown(props) {
-    const { badge, selected, options, isDisabled, isLoading, id, placeholder, isInvalid, className, toggleClassName, dataTrackingId, toggleDataTrackingId, isScrollable, ariaLabel, zIndex, ariaLabelledBy, isModalOpen, hideToggleIcons, onClear, onBlur, onSelect } = props, restProps = __rest(props, ["badge", "selected", "options", "isDisabled", "isLoading", "id", "placeholder", "isInvalid", "className", "toggleClassName", "dataTrackingId", "toggleDataTrackingId", "isScrollable", "ariaLabel", "zIndex", "ariaLabelledBy", "isModalOpen", "hideToggleIcons", "onClear", "onBlur", "onSelect"]);
+    const { badge, selected, options, isDisabled, isLoading, id, placeholder, isInvalid, className, toggleClassName, dataTrackingId, toggleDataTrackingId, isScrollable, ariaLabel, zIndex, ariaLabelledBy, isModalOpen, onMenuToggle, hideToggleIcons, onClear, onBlur, onSelect } = props, restProps = __rest(props, ["badge", "selected", "options", "isDisabled", "isLoading", "id", "placeholder", "isInvalid", "className", "toggleClassName", "dataTrackingId", "toggleDataTrackingId", "isScrollable", "ariaLabel", "zIndex", "ariaLabelledBy", "isModalOpen", "onMenuToggle", "hideToggleIcons", "onClear", "onBlur", "onSelect"]);
     const [isOpen, setIsOpen] = useState(false);
     const onToggleClick = () => {
+        if (onMenuToggle) {
+            onMenuToggle();
+            return;
+        }
         setIsOpen(!isOpen);
     };
     const handleSelect = (selectedOption) => {
@@ -36,8 +40,7 @@ export function SingleSelectDropdown(props) {
         if (isModalOpen) {
             setIsOpen(false);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isOpen]);
+    }, [isModalOpen]);
     const toggle = (toggleRef) => (React.createElement(MenuToggle, { className: toggleClassName || 'single-select-toggle-text', ref: toggleRef, onClick: onToggleClick, onKeyDown: onInputKeyDown, isExpanded: isOpen, isDisabled: isDisabled, isFullWidth: true, status: isInvalid ? 'danger' : undefined, "data-tracking-id": toggleDataTrackingId || '', badge: badge },
         hideToggleIcons && ((selected === null || selected === void 0 ? void 0 : selected.label) || placeholder),
         !hideToggleIcons && (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
@@ -58,8 +61,6 @@ export function SingleSelectDropdown(props) {
     return (React.createElement(Select, Object.assign({ shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, id: id || '', className: className || '', "data-tracking-id": dataTrackingId, isOpen: isOpen, selected: selected, onSelect: onLocalSelect, onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: toggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: isScrollable, onBlur: onLocalBlur, "aria-label": ariaLabel, zIndex: zIndex, "aria-labelledby": ariaLabelledBy, maxMenuHeight: "20rem" }, restProps),
         React.createElement(SelectList, null, options.map((option, index) => {
             var _a;
-            return (React.createElement(SelectOption, { key: option.value, value: option, description: option.description || '', 
-                // Fix the comparison to compare the entire objects or at least their values
-                isSelected: isEqual(selected === null || selected === void 0 ? void 0 : selected.value, option.value), isDisabled: option.disabled, isFocused: focusedItemIndex === index, title: (option === null || option === void 0 ? void 0 : option.title) || option.label }, (_a = option === null || option === void 0 ? void 0 : option.element) !== null && _a !== void 0 ? _a : option.label));
+            return (React.createElement(SelectOption, { key: option.value, value: option, description: option.description || '', isSelected: isEqual(selected === null || selected === void 0 ? void 0 : selected.value, option.value), isDisabled: option.disabled, isFocused: focusedItemIndex === index, title: (option === null || option === void 0 ? void 0 : option.title) || option.label, "aria-label": option.label }, (_a = option === null || option === void 0 ? void 0 : option.element) !== null && _a !== void 0 ? _a : option.label));
         }))));
 }