@rh-support/components 2.5.214 → 2.5.222

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/lib/esm/ConfirmationModal/ConfirmationDialog.js +1 -1
  2. package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts +0 -2
  3. package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts.map +1 -1
  4. package/lib/esm/Functional/CaseContactsSelectorExternal.js +82 -156
  5. package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts +49 -0
  6. package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts.map +1 -0
  7. package/lib/esm/MarkdownEditor/MarkdownEditor.js +601 -0
  8. package/lib/esm/MarkdownEditor/index.d.ts +2 -0
  9. package/lib/esm/MarkdownEditor/index.d.ts.map +1 -0
  10. package/lib/esm/MarkdownEditor/index.js +1 -0
  11. package/lib/esm/MarkdownEditor/markdownEditor.css +223 -0
  12. package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.d.ts +0 -2
  13. package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.d.ts.map +1 -1
  14. package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.js +3 -8
  15. package/lib/esm/PhoneInput/PhoneInput.d.ts.map +1 -1
  16. package/lib/esm/PhoneInput/PhoneInput.js +1 -38
  17. package/lib/esm/Table/TablePagination.d.ts +0 -1
  18. package/lib/esm/Table/TablePagination.d.ts.map +1 -1
  19. package/lib/esm/Table/TablePagination.js +1 -1
  20. package/lib/esm/helperFunctions/errorMessage.d.ts +1 -2
  21. package/lib/esm/helperFunctions/errorMessage.d.ts.map +1 -1
  22. package/lib/esm/helperFunctions/errorMessage.js +5 -19
  23. package/lib/esm/hooks/useCopyToClipboard.d.ts +1 -1
  24. package/lib/esm/hooks/useCopyToClipboard.d.ts.map +1 -1
  25. package/lib/esm/hooks/useCopyToClipboard.js +1 -3
  26. package/lib/esm/index.d.ts +1 -2
  27. package/lib/esm/index.d.ts.map +1 -1
  28. package/lib/esm/index.js +1 -3
  29. package/package.json +7 -9
  30. package/lib/esm/CustomDatePicker/CustomDatePicker.d.ts +0 -18
  31. package/lib/esm/CustomDatePicker/CustomDatePicker.d.ts.map +0 -1
  32. package/lib/esm/CustomDatePicker/CustomDatePicker.js +0 -27
  33. package/lib/esm/CustomDatePicker/customDatePicker.css +0 -52
  34. package/lib/esm/CustomDatePicker/index.d.ts +0 -2
  35. package/lib/esm/CustomDatePicker/index.d.ts.map +0 -1
  36. package/lib/esm/CustomDatePicker/index.js +0 -1
  37. package/lib/esm/RichTextEditor/RichTextEditor.d.ts +0 -45
  38. package/lib/esm/RichTextEditor/RichTextEditor.d.ts.map +0 -1
  39. package/lib/esm/RichTextEditor/RichTextEditor.js +0 -463
  40. package/lib/esm/RichTextEditor/index.d.ts +0 -4
  41. package/lib/esm/RichTextEditor/index.d.ts.map +0 -1
  42. package/lib/esm/RichTextEditor/index.js +0 -2
  43. package/lib/esm/RichTextEditor/richTextEditor.css +0 -148
  44. package/lib/esm/RichTextEditor/useQuillEditor.d.ts +0 -20
  45. package/lib/esm/RichTextEditor/useQuillEditor.d.ts.map +0 -1
  46. package/lib/esm/RichTextEditor/useQuillEditor.js +0 -81
@@ -1,148 +0,0 @@
1
- .richtext-editor-container {
2
- background: var(--pf-t--global--background--color--primary--default, #fff);
3
- border: 1px solid var(--pf-t--global--border--color--default, #d2d2d2);
4
- border-radius: var(--pf-t--global--border--radius--small, 3px);
5
- display: block;
6
- min-height: 100px;
7
- }
8
-
9
- .richtext-editor-content {
10
- resize: vertical;
11
- overflow: auto;
12
- font-size: 15px;
13
- min-width: 100%;
14
- outline: none;
15
- border: none;
16
- min-height: 100px;
17
- }
18
-
19
- .richtext-editor-content.ql-container,
20
- .richtext-editor-container .ql-container.ql-container {
21
- border: none !important;
22
- outline: none !important;
23
- font-size: 15px;
24
- }
25
-
26
- .richtext-editor-content .ql-editor {
27
- padding: 0.8rem;
28
- outline: none;
29
- border: none;
30
- min-height: 100px;
31
- }
32
-
33
- .richtext-editor-content .ql-editor:focus {
34
- outline: none;
35
- border: none;
36
- box-shadow: none;
37
- }
38
-
39
- .richtext-editor-content:empty::before {
40
- content: attr(data-placeholder);
41
- color: var(--pf-t--global--text--color--placeholder, #6a6e73);
42
- pointer-events: none;
43
- }
44
-
45
- .richtext-editor-content ul,
46
- .richtext-editor-content ol {
47
- padding-left: 24px;
48
- }
49
-
50
- .richtext-editor-content li[data-list='bullet'] {
51
- list-style-type: disc;
52
- }
53
-
54
- .richtext-editor-content li[data-list='ordered'] {
55
- list-style-type: decimal;
56
- }
57
-
58
- .richtext-editor-content .ql-align-center {
59
- text-align: center;
60
- }
61
-
62
- .richtext-editor-content .ql-align-right {
63
- text-align: right;
64
- }
65
-
66
- .richtext-editor-content .ql-align-justify {
67
- text-align: justify;
68
- }
69
-
70
- .richtext-editor-content .ql-indent-1 {
71
- padding-left: 3em;
72
- }
73
-
74
- .richtext-editor-content .ql-indent-2 {
75
- padding-left: 6em;
76
- }
77
-
78
- .richtext-editor-content .ql-indent-3 {
79
- padding-left: 9em;
80
- }
81
-
82
- .richtext-editor-content .ql-indent-4 {
83
- padding-left: 12em;
84
- }
85
-
86
- .richtext-editor-content .ql-indent-5 {
87
- padding-left: 15em;
88
- }
89
-
90
- .richtext-editor-content a {
91
- color: var(--pf-t--global--text--color--link--default, #0066cc);
92
- text-decoration: underline;
93
- }
94
-
95
- .richtext-editor-content img {
96
- max-width: 100%;
97
- height: auto;
98
- display: block;
99
- margin: 8px 0;
100
- }
101
-
102
- .richtext-editor-container.is-private .richtext-editor-content {
103
- background-color: #f5eeee;
104
- }
105
-
106
- .richtext-toolbar {
107
- border-bottom: 1px solid var(--pf-t--global--border--color--default, #d2d2d2);
108
- padding: 4px 8px;
109
- }
110
-
111
- .richtext-toolbar-left-section {
112
- display: flex;
113
- align-items: center;
114
- flex-wrap: wrap;
115
- gap: 2px;
116
- }
117
-
118
- .btn-group-separator {
119
- display: inline-block;
120
- width: 1px;
121
- height: 24px;
122
- margin: 0 8px;
123
- background-color: var(--pf-t--global--border--color--default, #ccc);
124
- }
125
-
126
- .toggle-content {
127
- display: inline-flex;
128
- align-items: center;
129
- gap: 4px;
130
- font-size: 14px;
131
- }
132
-
133
- .dropdown-caret {
134
- font-size: 12px;
135
- }
136
-
137
- .richtext-char-counter {
138
- padding: 4px 8px;
139
- font-size: 12px;
140
- text-align: right;
141
- color: var(--pf-t--global--text--color--subtle, #6a6e73);
142
- border-top: 1px solid var(--pf-t--global--border--color--default, #d2d2d2);
143
- }
144
-
145
- .richtext-char-counter--exceeded {
146
- color: var(--pf-t--global--color--status--danger--default, #c9190b);
147
- font-weight: bold;
148
- }
@@ -1,20 +0,0 @@
1
- import Quill from 'quill';
2
- export interface UseQuillEditorOptions {
3
- placeholder?: string;
4
- readOnly?: boolean;
5
- onChange?: (html: string) => void;
6
- onChangePlainText?: (text: string) => void;
7
- onSelectionChange?: (format: Record<string, unknown>) => void;
8
- onFocus?: () => void;
9
- onBlur?: () => void;
10
- }
11
- export declare function useQuillEditor(options: UseQuillEditorOptions): {
12
- editorRef: import("react").MutableRefObject<HTMLDivElement>;
13
- quillRef: import("react").MutableRefObject<Quill>;
14
- activeFormat: Record<string, unknown>;
15
- setActiveFormat: import("react").Dispatch<import("react").SetStateAction<Record<string, unknown>>>;
16
- setContents: (html: string) => void;
17
- setReadOnly: (readOnly: boolean) => void;
18
- getPlainText: () => string;
19
- };
20
- //# sourceMappingURL=useQuillEditor.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useQuillEditor.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditor/useQuillEditor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,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;AAID,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB;;;;;wBAwDlB,MAAM;4BAgBF,OAAO;;EASrD"}
@@ -1,81 +0,0 @@
1
- import DOMPurify from 'dompurify';
2
- import Quill from 'quill';
3
- import { useCallback, useEffect, useRef, useState } from 'react';
4
- const ALLOWED_FORMATS = ['header', 'bold', 'italic', 'underline', 'strike', 'list', 'indent', 'align', 'link', 'image'];
5
- export function useQuillEditor(options) {
6
- const editorRef = useRef(null);
7
- const quillRef = useRef(null);
8
- const [activeFormat, setActiveFormat] = useState({});
9
- const optionsRef = useRef(options);
10
- optionsRef.current = options;
11
- // Track whether the last change was internal (from Quill) to avoid echo loops
12
- const isInternalChange = useRef(false);
13
- useEffect(() => {
14
- if (!editorRef.current || quillRef.current)
15
- return;
16
- const quill = new Quill(editorRef.current, {
17
- theme: false,
18
- modules: {
19
- toolbar: false,
20
- clipboard: { matchVisual: false },
21
- },
22
- formats: ALLOWED_FORMATS,
23
- placeholder: optionsRef.current.placeholder,
24
- readOnly: optionsRef.current.readOnly,
25
- });
26
- quill.on('text-change', () => {
27
- var _a, _b, _c, _d;
28
- isInternalChange.current = true;
29
- const html = DOMPurify.sanitize(quill.getSemanticHTML());
30
- (_b = (_a = optionsRef.current).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, html);
31
- (_d = (_c = optionsRef.current).onChangePlainText) === null || _d === void 0 ? void 0 : _d.call(_c, quill.getText().trim());
32
- const sel = quill.getSelection();
33
- if (sel) {
34
- setActiveFormat(quill.getFormat(sel));
35
- }
36
- isInternalChange.current = false;
37
- });
38
- quill.on('selection-change', (range) => {
39
- var _a, _b, _c, _d, _e, _f;
40
- if (range) {
41
- setActiveFormat(quill.getFormat(range));
42
- (_b = (_a = optionsRef.current).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, quill.getFormat(range));
43
- if (range.length === 0) {
44
- (_d = (_c = optionsRef.current).onFocus) === null || _d === void 0 ? void 0 : _d.call(_c);
45
- }
46
- }
47
- else {
48
- (_f = (_e = optionsRef.current).onBlur) === null || _f === void 0 ? void 0 : _f.call(_e);
49
- }
50
- });
51
- quillRef.current = quill;
52
- return () => {
53
- quillRef.current = null;
54
- };
55
- // eslint-disable-next-line react-hooks/exhaustive-deps
56
- }, []);
57
- const setContents = useCallback((html) => {
58
- const quill = quillRef.current;
59
- if (!quill || isInternalChange.current)
60
- return;
61
- const currentHtml = DOMPurify.sanitize(quill.getSemanticHTML());
62
- if (currentHtml === html)
63
- return;
64
- const selection = quill.getSelection();
65
- quill.clipboard.dangerouslyPasteHTML(html);
66
- if (selection) {
67
- const length = quill.getLength();
68
- const safeIndex = Math.min(selection.index, length - 1);
69
- quill.setSelection(safeIndex, 0, 'silent');
70
- }
71
- }, []);
72
- const setReadOnly = useCallback((readOnly) => {
73
- var _a;
74
- (_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.enable(!readOnly);
75
- }, []);
76
- const getPlainText = useCallback(() => {
77
- var _a, _b;
78
- return (_b = (_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.getText().trim()) !== null && _b !== void 0 ? _b : '';
79
- }, []);
80
- return { editorRef, quillRef, activeFormat, setActiveFormat, setContents, setReadOnly, getPlainText };
81
- }