@boomerang-io/carbon-addons-boomerang-react 4.6.11-beta.32 → 4.6.11-beta.34
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.
- package/README.md +162 -162
- package/dist/cjs/components/AboutPlatform/AboutPlatform.js +50 -50
- package/dist/cjs/components/AdvantageSideNav/AdvantageSideNav.js +225 -223
- package/dist/cjs/components/AutoSuggest/AutoSuggest.js +101 -101
- package/dist/cjs/components/Avatar/Avatar.js +18 -18
- package/dist/cjs/components/CheckboxList/CheckboxList.js +34 -34
- package/dist/cjs/components/ComboBox/ComboBox.js +103 -103
- package/dist/cjs/components/ComboBoxMultiSelect/ComboBoxMultiSelect.js +32 -32
- package/dist/cjs/components/ComboBoxMultiSelect/MultiSelect.js +208 -208
- package/dist/cjs/components/ComposedModal/ComposedModal.js +80 -80
- package/dist/cjs/components/ConfirmModal/ConfirmModal.js +43 -43
- package/dist/cjs/components/Creatable/Creatable.js +137 -137
- package/dist/cjs/components/DataDrivenInput/DataDrivenInput.js +226 -226
- package/dist/cjs/components/DateInput/DateInput.js +35 -35
- package/dist/cjs/components/DecisionButtons/DecisionButtons.js +61 -61
- package/dist/cjs/components/DelayedRender/DelayedRender.js +17 -17
- package/dist/cjs/components/DynamicFormik/DynamicFormik.js +578 -578
- package/dist/cjs/components/Error403/Error403.js +13 -13
- package/dist/cjs/components/Error403/ForbiddenErrorBackground.js +113 -113
- package/dist/cjs/components/Error403/GraphicWrangler/GraphicWrangler.js +62 -62
- package/dist/cjs/components/Error404/Error404.js +13 -13
- package/dist/cjs/components/Error404/GraphicLoch/GraphicLoch.js +17 -17
- package/dist/cjs/components/Error404/NotFoundErrorBackground.js +129 -129
- package/dist/cjs/components/ErrorBoundary/ErrorBoundary.js +32 -32
- package/dist/cjs/components/ErrorDragon/ErrorDragon.js +13 -13
- package/dist/cjs/components/ErrorDragon/assets/ErrorGraphic.js +35 -35
- package/dist/cjs/components/ErrorFullPage/ErrorFullPage.js +10 -10
- package/dist/cjs/components/ErrorMessage/ErrorMessage.js +22 -22
- package/dist/cjs/components/ErrorPage/ErrorPage.js +11 -11
- package/dist/cjs/components/ErrorPageCore/ErrorPageCore.js +15 -15
- package/dist/cjs/components/ErrorPageCore/GenericErrorBackground.js +124 -124
- package/dist/cjs/components/FeatureHeader/FeatureHeader.js +29 -29
- package/dist/cjs/components/FeatureNavTab/FeatureNavTab.js +12 -12
- package/dist/cjs/components/FeatureNavTabs/FeatureNavTabs.js +12 -12
- package/dist/cjs/components/FeatureSideNav/FeatureSideNav.js +12 -12
- package/dist/cjs/components/FeatureSideNav/FeatureSideNavFooter.js +8 -8
- package/dist/cjs/components/FeatureSideNav/FeatureSideNavHeader.js +8 -8
- package/dist/cjs/components/FeatureSideNav/FeatureSideNavLinks.js +14 -14
- package/dist/cjs/components/FeatureSideNavLink/FeatureSideNavLink.js +12 -12
- package/dist/cjs/components/Feedback/Feedback.js +37 -37
- package/dist/cjs/components/FlowModal/FlowModal.js +141 -141
- package/dist/cjs/components/FlowModal/FlowModalForm.js +12 -12
- package/dist/cjs/components/Header/Header.js +179 -179
- package/dist/cjs/components/Header/HeaderAppSwitcher.js +94 -94
- package/dist/cjs/components/Header/HeaderMenu.js +7 -7
- package/dist/cjs/components/Header/HeaderMenuItem.js +52 -52
- package/dist/cjs/components/Header/HeaderTeamSwitcher.js +304 -304
- package/dist/cjs/components/Header/UserRequests.js +29 -29
- package/dist/cjs/components/ImageModal/ImageModal.js +17 -17
- package/dist/cjs/components/Loading/Loading.js +8 -8
- package/dist/cjs/components/MemberBar/MemberBar.js +20 -20
- package/dist/cjs/components/Modal/Modal.js +20 -20
- package/dist/cjs/components/ModalConfirmEdit/ModalConfirmArray.js +14 -14
- package/dist/cjs/components/ModalConfirmEdit/ModalConfirmDetails.js +11 -11
- package/dist/cjs/components/ModalConfirmEdit/ModalConfirmEdit.js +17 -17
- package/dist/cjs/components/ModalForm/ModalForm.js +9 -9
- package/dist/cjs/components/Notifications/NotificationsContainer.js +22 -22
- package/dist/cjs/components/Notifications/ToastNotification.js +21 -21
- package/dist/cjs/components/Notifications/notify.js +17 -17
- package/dist/cjs/components/PlatformBanner/PlatformBanner.js +8 -8
- package/dist/cjs/components/PlatformNotifications/PlatformNotification.js +17 -17
- package/dist/cjs/components/PlatformNotifications/PlatformNotificationsContainer.js +136 -136
- package/dist/cjs/components/Portal/Portal.js +14 -14
- package/dist/cjs/components/PrivacyRedirect/PrivacyRedirect.js +30 -30
- package/dist/cjs/components/PrivacyStatement/PrivacyStatement.js +90 -90
- package/dist/cjs/components/ProfileSettings/ProfileSettings.js +124 -124
- package/dist/cjs/components/ProtectedRoute/ProtectedRoute.js +13 -13
- package/dist/cjs/components/RadioGroup/RadioGroup.js +33 -33
- package/dist/cjs/components/RichTextArea/RichTextArea.js +142 -142
- package/dist/cjs/components/SignOut/SignOut.js +27 -27
- package/dist/cjs/components/SupportCenter/SupportCenter.js +65 -65
- package/dist/cjs/components/TextArea/TextArea.js +16 -16
- package/dist/cjs/components/TextInput/TextInput.js +13 -13
- package/dist/cjs/components/Toggle/Toggle.js +22 -22
- package/dist/cjs/components/TooltipHover/TooltipHover.js +39 -39
- package/dist/cjs/components/UIShell/UIShell.js +95 -95
- package/dist/cjs/config/servicesConfig.js +21 -21
- package/dist/cjs/constants/DataDrivenInputTypes.js +74 -74
- package/dist/cjs/constants/UserType.js +13 -13
- package/dist/cjs/hooks/useHeaderMenu.js +49 -49
- package/dist/cjs/hooks/usePortal.js +74 -74
- package/dist/cjs/hooks/useWindowSize.js +33 -33
- package/dist/cjs/internal/ListBox/ListBox.js +41 -41
- package/dist/cjs/internal/ListBox/ListBoxField.js +19 -19
- package/dist/cjs/internal/ListBox/ListBoxMenu.js +19 -19
- package/dist/cjs/internal/ListBox/ListBoxMenuIcon.js +31 -31
- package/dist/cjs/internal/ListBox/ListBoxMenuItem.js +38 -38
- package/dist/cjs/internal/ListBox/ListBoxSelection.js +64 -64
- package/dist/cjs/internal/ListBox/index.js +10 -10
- package/dist/cjs/internal/keyboard/keys.js +16 -16
- package/dist/cjs/internal/keyboard/match.js +67 -67
- package/dist/cjs/internal/settings.js +5 -5
- package/dist/cjs/tools/accessibility.js +13 -13
- package/dist/cjs/tools/createPropAdapter.js +44 -44
- package/dist/cjs/tools/isUrl.js +39 -39
- package/dist/cjs/tools/setupGetInstanceId.js +20 -20
- package/dist/cjs/tools/useSetState.js +12 -12
- package/dist/cjs/tools/yupAst/astGenerator.js +212 -212
- package/dist/cjs/tools/yupAst/customValidators.js +17 -17
- package/dist/esm/components/AboutPlatform/AboutPlatform.js +50 -50
- package/dist/esm/components/AdvantageSideNav/AdvantageSideNav.js +225 -223
- package/dist/esm/components/AutoSuggest/AutoSuggest.js +101 -101
- package/dist/esm/components/Avatar/Avatar.js +18 -18
- package/dist/esm/components/CheckboxList/CheckboxList.js +34 -34
- package/dist/esm/components/ComboBox/ComboBox.js +103 -103
- package/dist/esm/components/ComboBoxMultiSelect/ComboBoxMultiSelect.js +32 -32
- package/dist/esm/components/ComboBoxMultiSelect/MultiSelect.js +208 -208
- package/dist/esm/components/ComposedModal/ComposedModal.js +80 -80
- package/dist/esm/components/ConfirmModal/ConfirmModal.js +43 -43
- package/dist/esm/components/Creatable/Creatable.js +137 -137
- package/dist/esm/components/DataDrivenInput/DataDrivenInput.js +226 -226
- package/dist/esm/components/DateInput/DateInput.js +35 -35
- package/dist/esm/components/DecisionButtons/DecisionButtons.js +61 -61
- package/dist/esm/components/DelayedRender/DelayedRender.js +17 -17
- package/dist/esm/components/DynamicFormik/DynamicFormik.js +578 -578
- package/dist/esm/components/Error403/Error403.js +13 -13
- package/dist/esm/components/Error403/ForbiddenErrorBackground.js +113 -113
- package/dist/esm/components/Error403/GraphicWrangler/GraphicWrangler.js +62 -62
- package/dist/esm/components/Error404/Error404.js +13 -13
- package/dist/esm/components/Error404/GraphicLoch/GraphicLoch.js +17 -17
- package/dist/esm/components/Error404/NotFoundErrorBackground.js +129 -129
- package/dist/esm/components/ErrorBoundary/ErrorBoundary.js +32 -32
- package/dist/esm/components/ErrorDragon/ErrorDragon.js +13 -13
- package/dist/esm/components/ErrorDragon/assets/ErrorGraphic.js +35 -35
- package/dist/esm/components/ErrorFullPage/ErrorFullPage.js +10 -10
- package/dist/esm/components/ErrorMessage/ErrorMessage.js +22 -22
- package/dist/esm/components/ErrorPage/ErrorPage.js +11 -11
- package/dist/esm/components/ErrorPageCore/ErrorPageCore.js +15 -15
- package/dist/esm/components/ErrorPageCore/GenericErrorBackground.js +124 -124
- package/dist/esm/components/FeatureHeader/FeatureHeader.js +29 -29
- package/dist/esm/components/FeatureNavTab/FeatureNavTab.js +12 -12
- package/dist/esm/components/FeatureNavTabs/FeatureNavTabs.js +12 -12
- package/dist/esm/components/FeatureSideNav/FeatureSideNav.js +12 -12
- package/dist/esm/components/FeatureSideNav/FeatureSideNavFooter.js +8 -8
- package/dist/esm/components/FeatureSideNav/FeatureSideNavHeader.js +8 -8
- package/dist/esm/components/FeatureSideNav/FeatureSideNavLinks.js +14 -14
- package/dist/esm/components/FeatureSideNavLink/FeatureSideNavLink.js +12 -12
- package/dist/esm/components/Feedback/Feedback.js +37 -37
- package/dist/esm/components/FlowModal/FlowModal.js +141 -141
- package/dist/esm/components/FlowModal/FlowModalForm.js +12 -12
- package/dist/esm/components/Header/Header.js +179 -179
- package/dist/esm/components/Header/HeaderAppSwitcher.js +94 -94
- package/dist/esm/components/Header/HeaderMenu.js +7 -7
- package/dist/esm/components/Header/HeaderMenuItem.js +52 -52
- package/dist/esm/components/Header/HeaderTeamSwitcher.js +304 -304
- package/dist/esm/components/Header/UserRequests.js +29 -29
- package/dist/esm/components/ImageModal/ImageModal.js +17 -17
- package/dist/esm/components/Loading/Loading.js +8 -8
- package/dist/esm/components/MemberBar/MemberBar.js +20 -20
- package/dist/esm/components/Modal/Modal.js +20 -20
- package/dist/esm/components/ModalConfirmEdit/ModalConfirmArray.js +14 -14
- package/dist/esm/components/ModalConfirmEdit/ModalConfirmDetails.js +11 -11
- package/dist/esm/components/ModalConfirmEdit/ModalConfirmEdit.js +17 -17
- package/dist/esm/components/ModalForm/ModalForm.js +9 -9
- package/dist/esm/components/Notifications/NotificationsContainer.js +22 -22
- package/dist/esm/components/Notifications/ToastNotification.js +21 -21
- package/dist/esm/components/Notifications/notify.js +17 -17
- package/dist/esm/components/PlatformBanner/PlatformBanner.js +8 -8
- package/dist/esm/components/PlatformNotifications/PlatformNotification.js +17 -17
- package/dist/esm/components/PlatformNotifications/PlatformNotificationsContainer.js +136 -136
- package/dist/esm/components/Portal/Portal.js +14 -14
- package/dist/esm/components/PrivacyRedirect/PrivacyRedirect.js +30 -30
- package/dist/esm/components/PrivacyStatement/PrivacyStatement.js +90 -90
- package/dist/esm/components/ProfileSettings/ProfileSettings.js +124 -124
- package/dist/esm/components/ProtectedRoute/ProtectedRoute.js +13 -13
- package/dist/esm/components/RadioGroup/RadioGroup.js +33 -33
- package/dist/esm/components/RichTextArea/RichTextArea.js +142 -142
- package/dist/esm/components/SignOut/SignOut.js +27 -27
- package/dist/esm/components/SupportCenter/SupportCenter.js +65 -65
- package/dist/esm/components/TextArea/TextArea.js +16 -16
- package/dist/esm/components/TextInput/TextInput.js +13 -13
- package/dist/esm/components/Toggle/Toggle.js +22 -22
- package/dist/esm/components/TooltipHover/TooltipHover.js +39 -39
- package/dist/esm/components/UIShell/UIShell.js +95 -95
- package/dist/esm/config/servicesConfig.js +21 -21
- package/dist/esm/constants/DataDrivenInputTypes.js +74 -74
- package/dist/esm/constants/UserType.js +13 -13
- package/dist/esm/hooks/useHeaderMenu.js +49 -49
- package/dist/esm/hooks/usePortal.js +74 -74
- package/dist/esm/hooks/useWindowSize.js +33 -33
- package/dist/esm/internal/ListBox/ListBox.js +41 -41
- package/dist/esm/internal/ListBox/ListBoxField.js +19 -19
- package/dist/esm/internal/ListBox/ListBoxMenu.js +19 -19
- package/dist/esm/internal/ListBox/ListBoxMenuIcon.js +31 -31
- package/dist/esm/internal/ListBox/ListBoxMenuItem.js +38 -38
- package/dist/esm/internal/ListBox/ListBoxSelection.js +64 -64
- package/dist/esm/internal/ListBox/index.js +10 -10
- package/dist/esm/internal/keyboard/keys.js +16 -16
- package/dist/esm/internal/keyboard/match.js +67 -67
- package/dist/esm/internal/settings.js +5 -5
- package/dist/esm/tools/accessibility.js +13 -13
- package/dist/esm/tools/createPropAdapter.js +44 -44
- package/dist/esm/tools/isUrl.js +39 -39
- package/dist/esm/tools/setupGetInstanceId.js +20 -20
- package/dist/esm/tools/useSetState.js +12 -12
- package/dist/esm/tools/yupAst/astGenerator.js +212 -212
- package/dist/esm/tools/yupAst/customValidators.js +17 -17
- package/dist/types/index.d.ts +1340 -1340
- package/package.json +167 -167
- package/scss/components/AboutPlatform/_aboutPlatform.scss +139 -139
- package/scss/components/AdvantageSideNav/_advantageSideNav.scss +261 -261
- package/scss/components/AutoSuggest/_autoSuggest.scss +62 -62
- package/scss/components/Avatar/_avatar.scss +32 -32
- package/scss/components/CheckboxList/_checkboxList.scss +26 -26
- package/scss/components/ComboBox/_combobox.scss +23 -23
- package/scss/components/ComboBoxMultiSelect/_comboBoxMultiSelect.scss +53 -53
- package/scss/components/ConfirmModal/_confirmModal.scss +12 -12
- package/scss/components/Creatable/_creatable.scss +48 -48
- package/scss/components/DateInput/_dateInput.scss +36 -36
- package/scss/components/DecisionButtons/_decisionButtons.scss +132 -132
- package/scss/components/DynamicFormik/_dynamicFormik.scss +17 -17
- package/scss/components/ErrorBoundary/_errorBoundary.scss +12 -12
- package/scss/components/ErrorDragon/_errorDragon.scss +55 -55
- package/scss/components/ErrorMessage/_errorMessage.scss +43 -43
- package/scss/components/ErrorPage/_errorPage.scss +66 -66
- package/scss/components/ErrorPageCore/_errorPageCore.scss +73 -73
- package/scss/components/FeatureHeader/_featureHeader.scss +67 -67
- package/scss/components/FeatureNavTab/_featureNavTab.scss +27 -27
- package/scss/components/FeatureSideNav/_featureSideNav.scss +76 -76
- package/scss/components/FeatureSideNavLink/_featureSideNavLink.scss +49 -49
- package/scss/components/Feedback/_feedback.scss +46 -46
- package/scss/components/Header/_header.scss +179 -179
- package/scss/components/Header/_headerAppSwitcher.scss +117 -117
- package/scss/components/Header/_headerMenu.scss +30 -30
- package/scss/components/Header/_headerMenuItem.scss +65 -65
- package/scss/components/Header/_headerTeamSwitcher.scss +195 -195
- package/scss/components/Header/_userRequests.scss +36 -36
- package/scss/components/ImageModal/_imageModal.scss +51 -51
- package/scss/components/MemberBar/_memberBar.scss +99 -99
- package/scss/components/Modal/_modal.scss +163 -163
- package/scss/components/ModalConfirmEdit/_modalConfirmEdit.scss +113 -113
- package/scss/components/Notifications/_notifications.scss +57 -57
- package/scss/components/PlatformBanner/_platformBanner.scss +30 -30
- package/scss/components/PlatformNotifications/_platformNotifications.scss +230 -230
- package/scss/components/PrivacyRedirect/_privacyRedirect.scss +43 -43
- package/scss/components/PrivacyStatement/_privacyStatement.scss +137 -137
- package/scss/components/ProfileSettings/_profileSettings.scss +117 -117
- package/scss/components/ProtectedRoute/_protectedRoute.scss +32 -32
- package/scss/components/RadioGroup/_radioGroup.scss +46 -46
- package/scss/components/RichTextArea/_richTextArea.scss +82 -82
- package/scss/components/SignOut/_signOut.scss +51 -51
- package/scss/components/SupportCenter/_supportCenter.scss +16 -16
- package/scss/components/TextArea/_textArea.scss +19 -19
- package/scss/components/TextInput/_textInput.scss +26 -26
- package/scss/components/Toggle/_toggle.scss +80 -80
- package/scss/components/TooltipHover/_tooltip.scss +48 -48
- package/scss/global/_config.scss +14 -14
- package/scss/global/_tippy.scss +49 -49
- package/scss/global/index.scss +401 -401
- package/scss/global/themes/_boomerang.scss +184 -184
- package/scss/global/themes/_default.scss +79 -79
- package/scss/global/themes/_shell-tokens.scss +42 -42
- package/scss/global/utils/_animations.scss +15 -15
- package/scss/global/utils/_mixins.scss +67 -67
- package/scss/global/utils/index.scss +10 -10
|
@@ -7,148 +7,148 @@ import { TextInput, Button } from '@carbon/react';
|
|
|
7
7
|
import cx from 'classnames';
|
|
8
8
|
import sanitizeHtml from 'sanitize-html';
|
|
9
9
|
|
|
10
|
-
/*
|
|
11
|
-
IBM Confidential
|
|
12
|
-
694970X, 69497O0
|
|
13
|
-
© Copyright IBM Corp. 2022, 2025
|
|
14
|
-
*/
|
|
15
|
-
const RichTextAreaComponent = React.forwardRef(function RichTextAreaComponent({ label, labelText, maxWordCount, value, helperText, placeholder, onChange, setError, invalid, customError, readOnly, quillProps, }, ref) {
|
|
16
|
-
pkg.component.ToolbarGroup = pkg.component.Toolbar = pkg.component.ToolbarButton = true;
|
|
17
|
-
const labelValue = label || labelText;
|
|
18
|
-
const editorRef = useRef(null);
|
|
19
|
-
const [url, setUrl] = useState("");
|
|
20
|
-
const [wordCount, setWordCount] = useState(0);
|
|
21
|
-
const [savedSelection, setSavedSelection] = useState(null);
|
|
22
|
-
const [showUrlInput, setShowUrlInput] = useState(false);
|
|
23
|
-
const [noSelection, setNoSelection] = useState(false);
|
|
24
|
-
const quillRef = useRef(null);
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
(async () => {
|
|
27
|
-
const { default: Quill } = await import('quill');
|
|
28
|
-
if (editorRef.current) {
|
|
29
|
-
const quill = new Quill(editorRef.current, {
|
|
30
|
-
theme: "snow",
|
|
31
|
-
modules: {
|
|
32
|
-
toolbar: false,
|
|
33
|
-
},
|
|
34
|
-
placeholder: !readOnly ? placeholder : "",
|
|
35
|
-
readOnly,
|
|
36
|
-
...quillProps,
|
|
37
|
-
});
|
|
38
|
-
quillRef.current = quill;
|
|
39
|
-
if (value) {
|
|
40
|
-
const cleanHtml = sanitizeHtml(value, {
|
|
41
|
-
allowedTags: ["p", "strong", "b", "i", "em", "u", "ol", "ul", "li", "a"],
|
|
42
|
-
allowedAttributes: {
|
|
43
|
-
a: ["href", "rel", "target"],
|
|
44
|
-
},
|
|
45
|
-
});
|
|
46
|
-
quillRef.current.clipboard.dangerouslyPasteHTML(cleanHtml);
|
|
47
|
-
const length = quillRef.current.getLength();
|
|
48
|
-
quillRef.current.setSelection(length, 0);
|
|
49
|
-
setWordCount(getWordCount());
|
|
50
|
-
if (setError) {
|
|
51
|
-
setError(maxWordCount && getWordCount() > maxWordCount);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
quill.on("text-change", () => {
|
|
55
|
-
const currentCount = getWordCount();
|
|
56
|
-
setWordCount(currentCount);
|
|
57
|
-
const wordCountExceeded = maxWordCount && currentCount > maxWordCount;
|
|
58
|
-
if (onChange && !wordCountExceeded) {
|
|
59
|
-
onChange(quill.getSemanticHTML());
|
|
60
|
-
}
|
|
61
|
-
if (setError) {
|
|
62
|
-
setError(wordCountExceeded);
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
})()
|
|
67
|
-
.catch(error => {
|
|
68
|
-
console.error(error);
|
|
69
|
-
});
|
|
70
|
-
}, []);
|
|
71
|
-
const handleBold = () => {
|
|
72
|
-
quillRef.current?.format("bold", !quillRef.current.getFormat().bold);
|
|
73
|
-
};
|
|
74
|
-
const handleItalic = () => {
|
|
75
|
-
quillRef.current?.format("italic", !quillRef.current.getFormat().italic);
|
|
76
|
-
};
|
|
77
|
-
const handleUnderline = () => {
|
|
78
|
-
quillRef.current?.format("underline", !quillRef.current.getFormat().underline);
|
|
79
|
-
};
|
|
80
|
-
const handleOrderedList = () => {
|
|
81
|
-
quillRef.current?.format("list", "ordered");
|
|
82
|
-
};
|
|
83
|
-
const handleBulletList = () => {
|
|
84
|
-
quillRef.current?.format("list", "bullet");
|
|
85
|
-
};
|
|
86
|
-
const handleLinkBtn = () => {
|
|
87
|
-
const selection = quillRef.current?.getSelection();
|
|
88
|
-
if (selection && selection.length > 0) {
|
|
89
|
-
setSavedSelection(selection);
|
|
90
|
-
setShowUrlInput(true);
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
setNoSelection(true);
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
const handleLinkInsert = () => {
|
|
97
|
-
if (url) {
|
|
98
|
-
const range = savedSelection || quillRef.current?.getSelection();
|
|
99
|
-
if (range?.length) {
|
|
100
|
-
quillRef.current?.formatText(range.index, range.length, "link", url);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
setShowUrlInput(false);
|
|
104
|
-
setSavedSelection(null);
|
|
105
|
-
setUrl("");
|
|
106
|
-
};
|
|
107
|
-
const handleLinkCancel = () => {
|
|
108
|
-
setShowUrlInput(false);
|
|
109
|
-
setSavedSelection(null);
|
|
110
|
-
setUrl("");
|
|
111
|
-
};
|
|
112
|
-
const getWordCount = () => {
|
|
113
|
-
if (quillRef.current && maxWordCount) {
|
|
114
|
-
const text = quillRef.current.getText();
|
|
115
|
-
const words = text.trim().split(/\s+/);
|
|
116
|
-
return words.filter((word) => word.length > 0).length;
|
|
117
|
-
}
|
|
118
|
-
return 0;
|
|
119
|
-
};
|
|
120
|
-
const wordCountExceeded = maxWordCount && wordCount > maxWordCount;
|
|
121
|
-
return (React.createElement(React.Fragment, null,
|
|
122
|
-
React.createElement("div", { className: `${prefix}--rich-text-editor-labels` },
|
|
123
|
-
labelValue ? (React.createElement("div", { "data-testid": "rich-text-editor-label", className: `${prefix}--label` }, labelValue)) : null,
|
|
124
|
-
maxWordCount ? (React.createElement("div", { "data-testid": "rich-text-editor-word-count", className: cx(`${prefix}--label`, { [`${prefix}--rich-text-editor-error`]: wordCount > maxWordCount }) }, `${wordCount}/${maxWordCount}`)) : null),
|
|
125
|
-
(!readOnly) ?
|
|
126
|
-
React.createElement(Toolbar, { className: `${prefix}--rich-text-editor-toolbar` },
|
|
127
|
-
React.createElement(ToolbarGroup, null,
|
|
128
|
-
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-bold-btn", onClick: handleBold, label: "Bold", renderIcon: (props) => React.createElement(TextBold, { size: 16, ...props }) }),
|
|
129
|
-
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-italic-btn", onClick: handleItalic, label: "Italic", renderIcon: (props) => React.createElement(TextItalic, { size: 16, ...props }) }),
|
|
130
|
-
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-underline-btn", onClick: handleUnderline, label: "Underline", renderIcon: (props) => React.createElement(TextUnderline, { size: 16, ...props }) }),
|
|
131
|
-
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-bullet-list-btn", onClick: handleBulletList, label: "Bulleted List", renderIcon: (props) => React.createElement(ListBulleted, { size: 16, ...props }) }),
|
|
132
|
-
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-numbered-list-btn", onClick: handleOrderedList, label: "Numbered List", renderIcon: (props) => React.createElement(ListNumbered, { size: 16, ...props }) }),
|
|
133
|
-
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-hyperlink-btn", onClick: () => handleLinkBtn(), label: "Hyperlink", renderIcon: (props) => React.createElement(Link, { size: 16, ...props }) })))
|
|
134
|
-
: null,
|
|
135
|
-
showUrlInput && (React.createElement("div", { className: `${prefix}--rich-text-editor-url-input` },
|
|
136
|
-
React.createElement(TextInput, { onChange: (e) => {
|
|
137
|
-
setUrl(e.target.value);
|
|
138
|
-
}, id: "hyperlink-input", "data-testid": "rich-text-editor-hyperlink-input", placeholder: "Enter URL", size: "sm", type: "url", labelText: "" }),
|
|
139
|
-
React.createElement(Button, { "data-testid": "rich-text-editor-hyperlink-input-ok-btn", onClick: () => handleLinkInsert(), kind: "ghost", size: "sm" }, "OK"),
|
|
140
|
-
React.createElement(Button, { "data-testid": "rich-text-editor-hyperlink-input-cancel-btn", onClick: () => handleLinkCancel(), kind: "ghost", size: "sm" }, "Cancel"))),
|
|
141
|
-
React.createElement("div", { "data-testid": "rich-text-editor-text-area", className: cx({
|
|
142
|
-
[`${prefix}--rich-text-editor-error-border`]: wordCountExceeded,
|
|
143
|
-
}) },
|
|
144
|
-
React.createElement("div", { className: cx(`${prefix}--rich-text-editor`, {
|
|
145
|
-
[`${prefix}--rich-text-editor-disabled`]: readOnly,
|
|
146
|
-
}), onFocus: () => setNoSelection(false), ref: editorRef })),
|
|
147
|
-
React.createElement("div", { "data-testid": "rich-text-editor-footer", className: `${prefix}--rich-text-editor-footer` },
|
|
148
|
-
!noSelection && !wordCountExceeded && helperText ? (React.createElement("div", { "data-testid": "rich-text-editor-helper-text", className: `${prefix}--label` }, helperText)) : null,
|
|
149
|
-
wordCountExceeded && !customError ? (React.createElement("div", { "data-testid": "rich-text-editor-wordCount-error", className: cx(`${prefix}--label`, `${prefix}--rich-text-editor-error`) }, "Exceeded Word Count")) : null,
|
|
150
|
-
noSelection ? (React.createElement("div", { "data-testid": "rich-text-editor-link-input-error", className: cx(`${prefix}--label`, `${prefix}--rich-text-editor-error`) }, "Select text before adding link")) : null,
|
|
151
|
-
invalid ? (React.createElement("div", { className: cx(`${prefix}--label`, `${prefix}--rich-text-editor-error`) }, customError)) : null)));
|
|
10
|
+
/*
|
|
11
|
+
IBM Confidential
|
|
12
|
+
694970X, 69497O0
|
|
13
|
+
© Copyright IBM Corp. 2022, 2025
|
|
14
|
+
*/
|
|
15
|
+
const RichTextAreaComponent = React.forwardRef(function RichTextAreaComponent({ label, labelText, maxWordCount, value, helperText, placeholder, onChange, setError, invalid, customError, readOnly, quillProps, }, ref) {
|
|
16
|
+
pkg.component.ToolbarGroup = pkg.component.Toolbar = pkg.component.ToolbarButton = true;
|
|
17
|
+
const labelValue = label || labelText;
|
|
18
|
+
const editorRef = useRef(null);
|
|
19
|
+
const [url, setUrl] = useState("");
|
|
20
|
+
const [wordCount, setWordCount] = useState(0);
|
|
21
|
+
const [savedSelection, setSavedSelection] = useState(null);
|
|
22
|
+
const [showUrlInput, setShowUrlInput] = useState(false);
|
|
23
|
+
const [noSelection, setNoSelection] = useState(false);
|
|
24
|
+
const quillRef = useRef(null);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
(async () => {
|
|
27
|
+
const { default: Quill } = await import('quill');
|
|
28
|
+
if (editorRef.current) {
|
|
29
|
+
const quill = new Quill(editorRef.current, {
|
|
30
|
+
theme: "snow",
|
|
31
|
+
modules: {
|
|
32
|
+
toolbar: false,
|
|
33
|
+
},
|
|
34
|
+
placeholder: !readOnly ? placeholder : "",
|
|
35
|
+
readOnly,
|
|
36
|
+
...quillProps,
|
|
37
|
+
});
|
|
38
|
+
quillRef.current = quill;
|
|
39
|
+
if (value) {
|
|
40
|
+
const cleanHtml = sanitizeHtml(value, {
|
|
41
|
+
allowedTags: ["p", "strong", "b", "i", "em", "u", "ol", "ul", "li", "a"],
|
|
42
|
+
allowedAttributes: {
|
|
43
|
+
a: ["href", "rel", "target"],
|
|
44
|
+
},
|
|
45
|
+
});
|
|
46
|
+
quillRef.current.clipboard.dangerouslyPasteHTML(cleanHtml);
|
|
47
|
+
const length = quillRef.current.getLength();
|
|
48
|
+
quillRef.current.setSelection(length, 0);
|
|
49
|
+
setWordCount(getWordCount());
|
|
50
|
+
if (setError) {
|
|
51
|
+
setError(maxWordCount && getWordCount() > maxWordCount);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
quill.on("text-change", () => {
|
|
55
|
+
const currentCount = getWordCount();
|
|
56
|
+
setWordCount(currentCount);
|
|
57
|
+
const wordCountExceeded = maxWordCount && currentCount > maxWordCount;
|
|
58
|
+
if (onChange && !wordCountExceeded) {
|
|
59
|
+
onChange(quill.getSemanticHTML());
|
|
60
|
+
}
|
|
61
|
+
if (setError) {
|
|
62
|
+
setError(wordCountExceeded);
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
})()
|
|
67
|
+
.catch(error => {
|
|
68
|
+
console.error(error);
|
|
69
|
+
});
|
|
70
|
+
}, []);
|
|
71
|
+
const handleBold = () => {
|
|
72
|
+
quillRef.current?.format("bold", !quillRef.current.getFormat().bold);
|
|
73
|
+
};
|
|
74
|
+
const handleItalic = () => {
|
|
75
|
+
quillRef.current?.format("italic", !quillRef.current.getFormat().italic);
|
|
76
|
+
};
|
|
77
|
+
const handleUnderline = () => {
|
|
78
|
+
quillRef.current?.format("underline", !quillRef.current.getFormat().underline);
|
|
79
|
+
};
|
|
80
|
+
const handleOrderedList = () => {
|
|
81
|
+
quillRef.current?.format("list", "ordered");
|
|
82
|
+
};
|
|
83
|
+
const handleBulletList = () => {
|
|
84
|
+
quillRef.current?.format("list", "bullet");
|
|
85
|
+
};
|
|
86
|
+
const handleLinkBtn = () => {
|
|
87
|
+
const selection = quillRef.current?.getSelection();
|
|
88
|
+
if (selection && selection.length > 0) {
|
|
89
|
+
setSavedSelection(selection);
|
|
90
|
+
setShowUrlInput(true);
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
setNoSelection(true);
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
const handleLinkInsert = () => {
|
|
97
|
+
if (url) {
|
|
98
|
+
const range = savedSelection || quillRef.current?.getSelection();
|
|
99
|
+
if (range?.length) {
|
|
100
|
+
quillRef.current?.formatText(range.index, range.length, "link", url);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
setShowUrlInput(false);
|
|
104
|
+
setSavedSelection(null);
|
|
105
|
+
setUrl("");
|
|
106
|
+
};
|
|
107
|
+
const handleLinkCancel = () => {
|
|
108
|
+
setShowUrlInput(false);
|
|
109
|
+
setSavedSelection(null);
|
|
110
|
+
setUrl("");
|
|
111
|
+
};
|
|
112
|
+
const getWordCount = () => {
|
|
113
|
+
if (quillRef.current && maxWordCount) {
|
|
114
|
+
const text = quillRef.current.getText();
|
|
115
|
+
const words = text.trim().split(/\s+/);
|
|
116
|
+
return words.filter((word) => word.length > 0).length;
|
|
117
|
+
}
|
|
118
|
+
return 0;
|
|
119
|
+
};
|
|
120
|
+
const wordCountExceeded = maxWordCount && wordCount > maxWordCount;
|
|
121
|
+
return (React.createElement(React.Fragment, null,
|
|
122
|
+
React.createElement("div", { className: `${prefix}--rich-text-editor-labels` },
|
|
123
|
+
labelValue ? (React.createElement("div", { "data-testid": "rich-text-editor-label", className: `${prefix}--label` }, labelValue)) : null,
|
|
124
|
+
maxWordCount ? (React.createElement("div", { "data-testid": "rich-text-editor-word-count", className: cx(`${prefix}--label`, { [`${prefix}--rich-text-editor-error`]: wordCount > maxWordCount }) }, `${wordCount}/${maxWordCount}`)) : null),
|
|
125
|
+
(!readOnly) ?
|
|
126
|
+
React.createElement(Toolbar, { className: `${prefix}--rich-text-editor-toolbar` },
|
|
127
|
+
React.createElement(ToolbarGroup, null,
|
|
128
|
+
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-bold-btn", onClick: handleBold, label: "Bold", renderIcon: (props) => React.createElement(TextBold, { size: 16, ...props }) }),
|
|
129
|
+
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-italic-btn", onClick: handleItalic, label: "Italic", renderIcon: (props) => React.createElement(TextItalic, { size: 16, ...props }) }),
|
|
130
|
+
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-underline-btn", onClick: handleUnderline, label: "Underline", renderIcon: (props) => React.createElement(TextUnderline, { size: 16, ...props }) }),
|
|
131
|
+
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-bullet-list-btn", onClick: handleBulletList, label: "Bulleted List", renderIcon: (props) => React.createElement(ListBulleted, { size: 16, ...props }) }),
|
|
132
|
+
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-numbered-list-btn", onClick: handleOrderedList, label: "Numbered List", renderIcon: (props) => React.createElement(ListNumbered, { size: 16, ...props }) }),
|
|
133
|
+
React.createElement(ToolbarButton, { "data-testid": "rich-text-editor-hyperlink-btn", onClick: () => handleLinkBtn(), label: "Hyperlink", renderIcon: (props) => React.createElement(Link, { size: 16, ...props }) })))
|
|
134
|
+
: null,
|
|
135
|
+
showUrlInput && (React.createElement("div", { className: `${prefix}--rich-text-editor-url-input` },
|
|
136
|
+
React.createElement(TextInput, { onChange: (e) => {
|
|
137
|
+
setUrl(e.target.value);
|
|
138
|
+
}, id: "hyperlink-input", "data-testid": "rich-text-editor-hyperlink-input", placeholder: "Enter URL", size: "sm", type: "url", labelText: "" }),
|
|
139
|
+
React.createElement(Button, { "data-testid": "rich-text-editor-hyperlink-input-ok-btn", onClick: () => handleLinkInsert(), kind: "ghost", size: "sm" }, "OK"),
|
|
140
|
+
React.createElement(Button, { "data-testid": "rich-text-editor-hyperlink-input-cancel-btn", onClick: () => handleLinkCancel(), kind: "ghost", size: "sm" }, "Cancel"))),
|
|
141
|
+
React.createElement("div", { "data-testid": "rich-text-editor-text-area", className: cx({
|
|
142
|
+
[`${prefix}--rich-text-editor-error-border`]: wordCountExceeded,
|
|
143
|
+
}) },
|
|
144
|
+
React.createElement("div", { className: cx(`${prefix}--rich-text-editor`, {
|
|
145
|
+
[`${prefix}--rich-text-editor-disabled`]: readOnly,
|
|
146
|
+
}), onFocus: () => setNoSelection(false), ref: editorRef })),
|
|
147
|
+
React.createElement("div", { "data-testid": "rich-text-editor-footer", className: `${prefix}--rich-text-editor-footer` },
|
|
148
|
+
!noSelection && !wordCountExceeded && helperText ? (React.createElement("div", { "data-testid": "rich-text-editor-helper-text", className: `${prefix}--label` }, helperText)) : null,
|
|
149
|
+
wordCountExceeded && !customError ? (React.createElement("div", { "data-testid": "rich-text-editor-wordCount-error", className: cx(`${prefix}--label`, `${prefix}--rich-text-editor-error`) }, "Exceeded Word Count")) : null,
|
|
150
|
+
noSelection ? (React.createElement("div", { "data-testid": "rich-text-editor-link-input-error", className: cx(`${prefix}--label`, `${prefix}--rich-text-editor-error`) }, "Select text before adding link")) : null,
|
|
151
|
+
invalid ? (React.createElement("div", { className: cx(`${prefix}--label`, `${prefix}--rich-text-editor-error`) }, customError)) : null)));
|
|
152
152
|
});
|
|
153
153
|
|
|
154
154
|
export { RichTextAreaComponent as default };
|
|
@@ -4,33 +4,33 @@ import { Power } from '@carbon/react/icons';
|
|
|
4
4
|
import HeaderMenuItem from '../Header/HeaderMenuItem.js';
|
|
5
5
|
import { prefix } from '../../internal/settings.js';
|
|
6
6
|
|
|
7
|
-
/*
|
|
8
|
-
IBM Confidential
|
|
9
|
-
694970X, 69497O0
|
|
10
|
-
© Copyright IBM Corp. 2022, 2024
|
|
11
|
-
*/
|
|
12
|
-
function SignOut({ closeModal, isOpen, signOutLink }) {
|
|
13
|
-
return (React.createElement(ComposedModal, { "aria-label": "Sign out", open: isOpen, className: `${prefix}--bmrg-signout-container ${prefix}--bmrg-header-modal`, onClose: closeModal },
|
|
14
|
-
React.createElement(ModalHeader, { title: "Sign out", closeModal: closeModal }),
|
|
15
|
-
React.createElement(ModalBody, null,
|
|
16
|
-
React.createElement("div", { className: `${prefix}--bmrg-signout` },
|
|
17
|
-
React.createElement("p", { className: `${prefix}--bmrg-signout__message` }, "Are you sure you'd like to leave us?"))),
|
|
18
|
-
React.createElement(ModalFooter, null,
|
|
19
|
-
React.createElement(Button, { "data-modal-primary-focus": true, kind: "secondary", onClick: closeModal }, "Cancel"),
|
|
20
|
-
React.createElement(Button, { kind: "primary", role: "link", href: signOutLink }, "Sign Out"))));
|
|
21
|
-
}
|
|
22
|
-
function SignOutMenuItem(props) {
|
|
23
|
-
const menuItemRef = React.useRef(null);
|
|
24
|
-
const [isOpen, setIsOpen] = React.useState(false);
|
|
25
|
-
const handleClose = () => {
|
|
26
|
-
setIsOpen(false);
|
|
27
|
-
setTimeout(() => {
|
|
28
|
-
menuItemRef.current?.focus();
|
|
29
|
-
}, 0);
|
|
30
|
-
};
|
|
31
|
-
return (React.createElement(React.Fragment, null,
|
|
32
|
-
React.createElement(HeaderMenuItem, { icon: React.createElement(Power, null), onClick: () => setIsOpen(!isOpen), ref: menuItemRef, style: { color: "red" }, text: "Sign Out", type: "button", variant: "danger" }),
|
|
33
|
-
React.createElement(SignOut, { isOpen: isOpen, closeModal: handleClose, ...props })));
|
|
7
|
+
/*
|
|
8
|
+
IBM Confidential
|
|
9
|
+
694970X, 69497O0
|
|
10
|
+
© Copyright IBM Corp. 2022, 2024
|
|
11
|
+
*/
|
|
12
|
+
function SignOut({ closeModal, isOpen, signOutLink }) {
|
|
13
|
+
return (React.createElement(ComposedModal, { "aria-label": "Sign out", open: isOpen, className: `${prefix}--bmrg-signout-container ${prefix}--bmrg-header-modal`, onClose: closeModal },
|
|
14
|
+
React.createElement(ModalHeader, { title: "Sign out", closeModal: closeModal }),
|
|
15
|
+
React.createElement(ModalBody, null,
|
|
16
|
+
React.createElement("div", { className: `${prefix}--bmrg-signout` },
|
|
17
|
+
React.createElement("p", { className: `${prefix}--bmrg-signout__message` }, "Are you sure you'd like to leave us?"))),
|
|
18
|
+
React.createElement(ModalFooter, null,
|
|
19
|
+
React.createElement(Button, { "data-modal-primary-focus": true, kind: "secondary", onClick: closeModal }, "Cancel"),
|
|
20
|
+
React.createElement(Button, { kind: "primary", role: "link", href: signOutLink }, "Sign Out"))));
|
|
21
|
+
}
|
|
22
|
+
function SignOutMenuItem(props) {
|
|
23
|
+
const menuItemRef = React.useRef(null);
|
|
24
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
25
|
+
const handleClose = () => {
|
|
26
|
+
setIsOpen(false);
|
|
27
|
+
setTimeout(() => {
|
|
28
|
+
menuItemRef.current?.focus();
|
|
29
|
+
}, 0);
|
|
30
|
+
};
|
|
31
|
+
return (React.createElement(React.Fragment, null,
|
|
32
|
+
React.createElement(HeaderMenuItem, { icon: React.createElement(Power, null), onClick: () => setIsOpen(!isOpen), ref: menuItemRef, style: { color: "red" }, text: "Sign Out", type: "button", variant: "danger" }),
|
|
33
|
+
React.createElement(SignOut, { isOpen: isOpen, closeModal: handleClose, ...props })));
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
export { SignOutMenuItem, SignOut as default };
|
|
@@ -6,71 +6,71 @@ import { useQueryClient, useMutation } from 'react-query';
|
|
|
6
6
|
import { resolver, serviceUrl } from '../../config/servicesConfig.js';
|
|
7
7
|
import { prefix } from '../../internal/settings.js';
|
|
8
8
|
|
|
9
|
-
/*
|
|
10
|
-
IBM Confidential
|
|
11
|
-
694970X, 69497O0
|
|
12
|
-
© Copyright IBM Corp. 2022, 2024
|
|
13
|
-
*/
|
|
14
|
-
function SupportCenter({ closeModal, isOpen, supportRedirect, baseServicesUrl, enablePartner, partnerEmailId }) {
|
|
15
|
-
const [doNotAskAgain, setDoNotAskAgain] = React.useState(false);
|
|
16
|
-
const queryClient = useQueryClient();
|
|
17
|
-
const profileUrl = serviceUrl.resourceUserProfile({ baseServicesUrl });
|
|
18
|
-
const handleCheckboxChange = (event) => {
|
|
19
|
-
const shouldNotAskAgain = event.target.checked;
|
|
20
|
-
setDoNotAskAgain(shouldNotAskAgain);
|
|
21
|
-
handleSubmit(!shouldNotAskAgain);
|
|
22
|
-
};
|
|
23
|
-
const { mutateAsync: mutateUserProfile, } = useMutation(resolver.patchUserProfile, {
|
|
24
|
-
onSuccess: () => {
|
|
25
|
-
queryClient.invalidateQueries(profileUrl);
|
|
26
|
-
},
|
|
27
|
-
});
|
|
28
|
-
async function handleSubmit(showSupport) {
|
|
29
|
-
const body = {
|
|
30
|
-
showSupport
|
|
31
|
-
};
|
|
32
|
-
try {
|
|
33
|
-
await mutateUserProfile({ baseServicesUrl, body });
|
|
34
|
-
}
|
|
35
|
-
catch (e) {
|
|
36
|
-
// noop
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
return (React.createElement(ComposedModal, { "aria-label": "SupportCenter", open: isOpen, className: `${prefix}--support-description-modal`, onClose: closeModal, onKeyDown: (e) => e.stopPropagation(), "data-testid": "composed-modal-supportcenter" },
|
|
40
|
-
React.createElement(ModalHeader, { "data-testid": "supportcenter-modal-header", title: "Having an issue?", closeModal: closeModal }),
|
|
41
|
-
React.createElement(ModalBody, null, enablePartner ?
|
|
42
|
-
React.createElement("div", { className: `${prefix}--bmrg-feedback` },
|
|
43
|
-
React.createElement("p", null,
|
|
44
|
-
"Please email any issues with a description and images to",
|
|
45
|
-
" " /* We need to force a space before the link tag */,
|
|
46
|
-
React.createElement("a", { href: "mailto:ica-support@ibm.com" }, partnerEmailId),
|
|
47
|
-
"."))
|
|
48
|
-
:
|
|
49
|
-
React.createElement("div", { className: `${prefix}--bmrg-feedback` },
|
|
50
|
-
React.createElement("p", null, "Review your open cases or open a new case at IBM Support Center. For support tickets related to IBM Consulting Advantage, use Product \"Consulting Advantage\"."),
|
|
51
|
-
"\u00A0",
|
|
52
|
-
React.createElement(Checkbox, { id: "supportCheckboxId", "data-testid": "supportcenter-modal-checkbox", labelText: "Don't show again. Always proceed to IBM Support Center.", invalidText: "Error message goes here", onChange: handleCheckboxChange, checked: doNotAskAgain, warnText: "Warning message goes here" }))),
|
|
53
|
-
React.createElement(ModalFooter, null,
|
|
54
|
-
enablePartner ? "" : React.createElement(Button, { kind: "secondary", "data-testid": "supportcenter-modal-cancel-button", onClick: closeModal }, "Cancel"),
|
|
55
|
-
enablePartner ? React.createElement(Button, { "data-modal-primary-focus": true, kind: "primary", "data-testid": "supportcenter-modal-close-button", onClick: closeModal }, "Close") :
|
|
56
|
-
React.createElement(Button, { "data-modal-primary-focus": true, kind: "primary", "data-testid": "supportcenter-modal-continue-button", onClick: supportRedirect }, "Continue to IBM Support Center"))));
|
|
57
|
-
}
|
|
58
|
-
function SupportCenterMenuItem(props) {
|
|
59
|
-
const menuItemRef = React.useRef(null);
|
|
60
|
-
const [isOpen, setIsOpen] = React.useState(false);
|
|
61
|
-
const handleClose = () => {
|
|
62
|
-
setIsOpen(false);
|
|
63
|
-
setTimeout(() => {
|
|
64
|
-
menuItemRef.current?.focus();
|
|
65
|
-
}, 0);
|
|
66
|
-
};
|
|
67
|
-
const supportHandle = () => {
|
|
68
|
-
window.open(props?.supportLink, '_blank', 'noopener,noreferrer');
|
|
69
|
-
handleClose();
|
|
70
|
-
};
|
|
71
|
-
return (React.createElement(React.Fragment, null,
|
|
72
|
-
React.createElement(HeaderMenuItem, { icon: React.createElement(HelpDesk, null), onClick: () => setIsOpen(!isOpen), ref: menuItemRef, text: "Support Center", "data-testid": "supportcenter-modal-headermenuitem", type: "button" }),
|
|
73
|
-
React.createElement(SupportCenter, { isOpen: isOpen, closeModal: handleClose, supportRedirect: supportHandle, ...props })));
|
|
9
|
+
/*
|
|
10
|
+
IBM Confidential
|
|
11
|
+
694970X, 69497O0
|
|
12
|
+
© Copyright IBM Corp. 2022, 2024
|
|
13
|
+
*/
|
|
14
|
+
function SupportCenter({ closeModal, isOpen, supportRedirect, baseServicesUrl, enablePartner, partnerEmailId }) {
|
|
15
|
+
const [doNotAskAgain, setDoNotAskAgain] = React.useState(false);
|
|
16
|
+
const queryClient = useQueryClient();
|
|
17
|
+
const profileUrl = serviceUrl.resourceUserProfile({ baseServicesUrl });
|
|
18
|
+
const handleCheckboxChange = (event) => {
|
|
19
|
+
const shouldNotAskAgain = event.target.checked;
|
|
20
|
+
setDoNotAskAgain(shouldNotAskAgain);
|
|
21
|
+
handleSubmit(!shouldNotAskAgain);
|
|
22
|
+
};
|
|
23
|
+
const { mutateAsync: mutateUserProfile, } = useMutation(resolver.patchUserProfile, {
|
|
24
|
+
onSuccess: () => {
|
|
25
|
+
queryClient.invalidateQueries(profileUrl);
|
|
26
|
+
},
|
|
27
|
+
});
|
|
28
|
+
async function handleSubmit(showSupport) {
|
|
29
|
+
const body = {
|
|
30
|
+
showSupport
|
|
31
|
+
};
|
|
32
|
+
try {
|
|
33
|
+
await mutateUserProfile({ baseServicesUrl, body });
|
|
34
|
+
}
|
|
35
|
+
catch (e) {
|
|
36
|
+
// noop
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return (React.createElement(ComposedModal, { "aria-label": "SupportCenter", open: isOpen, className: `${prefix}--support-description-modal`, onClose: closeModal, onKeyDown: (e) => e.stopPropagation(), "data-testid": "composed-modal-supportcenter" },
|
|
40
|
+
React.createElement(ModalHeader, { "data-testid": "supportcenter-modal-header", title: "Having an issue?", closeModal: closeModal }),
|
|
41
|
+
React.createElement(ModalBody, null, enablePartner ?
|
|
42
|
+
React.createElement("div", { className: `${prefix}--bmrg-feedback` },
|
|
43
|
+
React.createElement("p", null,
|
|
44
|
+
"Please email any issues with a description and images to",
|
|
45
|
+
" " /* We need to force a space before the link tag */,
|
|
46
|
+
React.createElement("a", { href: "mailto:ica-support@ibm.com" }, partnerEmailId),
|
|
47
|
+
"."))
|
|
48
|
+
:
|
|
49
|
+
React.createElement("div", { className: `${prefix}--bmrg-feedback` },
|
|
50
|
+
React.createElement("p", null, "Review your open cases or open a new case at IBM Support Center. For support tickets related to IBM Consulting Advantage, use Product \"Consulting Advantage\"."),
|
|
51
|
+
"\u00A0",
|
|
52
|
+
React.createElement(Checkbox, { id: "supportCheckboxId", "data-testid": "supportcenter-modal-checkbox", labelText: "Don't show again. Always proceed to IBM Support Center.", invalidText: "Error message goes here", onChange: handleCheckboxChange, checked: doNotAskAgain, warnText: "Warning message goes here" }))),
|
|
53
|
+
React.createElement(ModalFooter, null,
|
|
54
|
+
enablePartner ? "" : React.createElement(Button, { kind: "secondary", "data-testid": "supportcenter-modal-cancel-button", onClick: closeModal }, "Cancel"),
|
|
55
|
+
enablePartner ? React.createElement(Button, { "data-modal-primary-focus": true, kind: "primary", "data-testid": "supportcenter-modal-close-button", onClick: closeModal }, "Close") :
|
|
56
|
+
React.createElement(Button, { "data-modal-primary-focus": true, kind: "primary", "data-testid": "supportcenter-modal-continue-button", onClick: supportRedirect }, "Continue to IBM Support Center"))));
|
|
57
|
+
}
|
|
58
|
+
function SupportCenterMenuItem(props) {
|
|
59
|
+
const menuItemRef = React.useRef(null);
|
|
60
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
61
|
+
const handleClose = () => {
|
|
62
|
+
setIsOpen(false);
|
|
63
|
+
setTimeout(() => {
|
|
64
|
+
menuItemRef.current?.focus();
|
|
65
|
+
}, 0);
|
|
66
|
+
};
|
|
67
|
+
const supportHandle = () => {
|
|
68
|
+
window.open(props?.supportLink, '_blank', 'noopener,noreferrer');
|
|
69
|
+
handleClose();
|
|
70
|
+
};
|
|
71
|
+
return (React.createElement(React.Fragment, null,
|
|
72
|
+
React.createElement(HeaderMenuItem, { icon: React.createElement(HelpDesk, null), onClick: () => setIsOpen(!isOpen), ref: menuItemRef, text: "Support Center", "data-testid": "supportcenter-modal-headermenuitem", type: "button" }),
|
|
73
|
+
React.createElement(SupportCenter, { isOpen: isOpen, closeModal: handleClose, supportRedirect: supportHandle, ...props })));
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
export { SupportCenterMenuItem, SupportCenter as default };
|
|
@@ -4,22 +4,22 @@ import { Information } from '@carbon/react/icons';
|
|
|
4
4
|
import TooltipHover from '../TooltipHover/TooltipHover.js';
|
|
5
5
|
import { prefix } from '../../internal/settings.js';
|
|
6
6
|
|
|
7
|
-
/*
|
|
8
|
-
IBM Confidential
|
|
9
|
-
694970X, 69497O0
|
|
10
|
-
© Copyright IBM Corp. 2022, 2024
|
|
11
|
-
*/
|
|
12
|
-
const TextAreaComponent = React.forwardRef(function TextAreaComponent({ id, label, labelText, max, maxCount, tooltipClassName = `${prefix}--bmrg-text-area__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, value, ...textAreaProps }, ref) {
|
|
13
|
-
const labelValue = label || labelText;
|
|
14
|
-
const maxValue = max ?? maxCount;
|
|
15
|
-
// False for null and undefined. We help consumers out by allowing them to pass a max
|
|
16
|
-
const enableCounter = maxValue != null;
|
|
17
|
-
return (React.createElement("div", { key: id, className: `${prefix}--bmrg-text-area` },
|
|
18
|
-
React.createElement(TextArea, { id: id, labelText: labelValue && (React.createElement("div", { style: { display: "flex" } },
|
|
19
|
-
React.createElement("div", null, labelValue),
|
|
20
|
-
tooltipContent && (React.createElement("div", { className: tooltipClassName },
|
|
21
|
-
React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
|
|
22
|
-
React.createElement(Information, { size: 16, fill: "currentColor" })))))), ref: ref, value: value, maxCount: maxValue, enableCounter: enableCounter, ...textAreaProps })));
|
|
7
|
+
/*
|
|
8
|
+
IBM Confidential
|
|
9
|
+
694970X, 69497O0
|
|
10
|
+
© Copyright IBM Corp. 2022, 2024
|
|
11
|
+
*/
|
|
12
|
+
const TextAreaComponent = React.forwardRef(function TextAreaComponent({ id, label, labelText, max, maxCount, tooltipClassName = `${prefix}--bmrg-text-area__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, value, ...textAreaProps }, ref) {
|
|
13
|
+
const labelValue = label || labelText;
|
|
14
|
+
const maxValue = max ?? maxCount;
|
|
15
|
+
// False for null and undefined. We help consumers out by allowing them to pass a max
|
|
16
|
+
const enableCounter = maxValue != null;
|
|
17
|
+
return (React.createElement("div", { key: id, className: `${prefix}--bmrg-text-area` },
|
|
18
|
+
React.createElement(TextArea, { id: id, labelText: labelValue && (React.createElement("div", { style: { display: "flex" } },
|
|
19
|
+
React.createElement("div", null, labelValue),
|
|
20
|
+
tooltipContent && (React.createElement("div", { className: tooltipClassName },
|
|
21
|
+
React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
|
|
22
|
+
React.createElement(Information, { size: 16, fill: "currentColor" })))))), ref: ref, value: value, maxCount: maxValue, enableCounter: enableCounter, ...textAreaProps })));
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
export { TextAreaComponent as default };
|
|
@@ -4,19 +4,19 @@ import { Information } from '@carbon/react/icons';
|
|
|
4
4
|
import TooltipHover from '../TooltipHover/TooltipHover.js';
|
|
5
5
|
import { prefix } from '../../internal/settings.js';
|
|
6
6
|
|
|
7
|
-
/*
|
|
8
|
-
IBM Confidential
|
|
9
|
-
694970X, 69497O0
|
|
10
|
-
© Copyright IBM Corp. 2022, 2024
|
|
11
|
-
*/
|
|
12
|
-
const TextInputComponent = React.forwardRef(function TextInputComponent({ id, label, labelText, tooltipClassName = `${prefix}--bmrg-text-input__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, ...textInputProps }, ref) {
|
|
13
|
-
const labelValue = label || labelText;
|
|
14
|
-
return (React.createElement("div", { key: id, className: `${prefix}--bmrg-text-input` },
|
|
15
|
-
React.createElement(TextInput, { id: id, labelText: labelValue && (React.createElement("div", { className: `${prefix}--bmrg-text-input__label` },
|
|
16
|
-
React.createElement("div", null, labelValue),
|
|
17
|
-
tooltipContent && (React.createElement("div", { className: tooltipClassName },
|
|
18
|
-
React.createElement(TooltipHover, { tooltipContent: tooltipContent, ...tooltipProps },
|
|
19
|
-
React.createElement(Information, { size: 16, fill: "currentColor" })))))), ref: ref, ...textInputProps })));
|
|
7
|
+
/*
|
|
8
|
+
IBM Confidential
|
|
9
|
+
694970X, 69497O0
|
|
10
|
+
© Copyright IBM Corp. 2022, 2024
|
|
11
|
+
*/
|
|
12
|
+
const TextInputComponent = React.forwardRef(function TextInputComponent({ id, label, labelText, tooltipClassName = `${prefix}--bmrg-text-input__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, ...textInputProps }, ref) {
|
|
13
|
+
const labelValue = label || labelText;
|
|
14
|
+
return (React.createElement("div", { key: id, className: `${prefix}--bmrg-text-input` },
|
|
15
|
+
React.createElement(TextInput, { id: id, labelText: labelValue && (React.createElement("div", { className: `${prefix}--bmrg-text-input__label` },
|
|
16
|
+
React.createElement("div", null, labelValue),
|
|
17
|
+
tooltipContent && (React.createElement("div", { className: tooltipClassName },
|
|
18
|
+
React.createElement(TooltipHover, { tooltipContent: tooltipContent, ...tooltipProps },
|
|
19
|
+
React.createElement(Information, { size: 16, fill: "currentColor" })))))), ref: ref, ...textInputProps })));
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
export { TextInputComponent as default };
|
|
@@ -5,28 +5,28 @@ import TooltipHover from '../TooltipHover/TooltipHover.js';
|
|
|
5
5
|
import cx from 'classnames';
|
|
6
6
|
import { prefix } from '../../internal/settings.js';
|
|
7
7
|
|
|
8
|
-
/*
|
|
9
|
-
IBM Confidential
|
|
10
|
-
694970X, 69497O0
|
|
11
|
-
© Copyright IBM Corp. 2022, 2024
|
|
12
|
-
*/
|
|
13
|
-
function ToggleComponent({ helperText, id, invalid, invalidText, reversed, label, labelText, labelA = "", labelB = "", orientation = "horizontal", tooltipClassName = `${prefix}--bmrg-toggle__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, ...toggleProps }) {
|
|
14
|
-
const labelValue = label || labelText;
|
|
15
|
-
const labelTextId = !labelValue ? undefined : `${id}-label`;
|
|
16
|
-
return (React.createElement("div", { className: `${prefix}--bmrg-toggle__container` },
|
|
17
|
-
React.createElement("div", { key: id, className: cx(`${prefix}--bmrg-toggle`, {
|
|
18
|
-
"--reversed": reversed,
|
|
19
|
-
"--vertical": orientation === "vertical",
|
|
20
|
-
}) },
|
|
21
|
-
labelValue && (React.createElement(React.Fragment, null,
|
|
22
|
-
React.createElement("div", { className: `${prefix}--bmrg-toggle__title` },
|
|
23
|
-
React.createElement("label", { id: labelTextId, className: `${prefix}--label`, htmlFor: id, style: { marginBottom: "0" } }, labelValue),
|
|
24
|
-
tooltipContent && (React.createElement("div", { className: tooltipClassName },
|
|
25
|
-
React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
|
|
26
|
-
React.createElement(Information, { size: 16, fill: "currentColor" }))))))),
|
|
27
|
-
React.createElement(Toggle, { id: id, "aria-labelledby": labelTextId, labelA: labelA, labelB: labelB, labelText: "", ...toggleProps })),
|
|
28
|
-
invalid && (React.createElement("div", { className: cx(`${prefix}--bmrg-toggle__invalid-text`, `${prefix}--form-requirement`), style: { marginBottom: "0" } }, invalidText)),
|
|
29
|
-
helperText && !invalid && (React.createElement("div", { className: `${prefix}--form__helper-text`, style: { marginBottom: "0" } }, helperText))));
|
|
8
|
+
/*
|
|
9
|
+
IBM Confidential
|
|
10
|
+
694970X, 69497O0
|
|
11
|
+
© Copyright IBM Corp. 2022, 2024
|
|
12
|
+
*/
|
|
13
|
+
function ToggleComponent({ helperText, id, invalid, invalidText, reversed, label, labelText, labelA = "", labelB = "", orientation = "horizontal", tooltipClassName = `${prefix}--bmrg-toggle__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, ...toggleProps }) {
|
|
14
|
+
const labelValue = label || labelText;
|
|
15
|
+
const labelTextId = !labelValue ? undefined : `${id}-label`;
|
|
16
|
+
return (React.createElement("div", { className: `${prefix}--bmrg-toggle__container` },
|
|
17
|
+
React.createElement("div", { key: id, className: cx(`${prefix}--bmrg-toggle`, {
|
|
18
|
+
"--reversed": reversed,
|
|
19
|
+
"--vertical": orientation === "vertical",
|
|
20
|
+
}) },
|
|
21
|
+
labelValue && (React.createElement(React.Fragment, null,
|
|
22
|
+
React.createElement("div", { className: `${prefix}--bmrg-toggle__title` },
|
|
23
|
+
React.createElement("label", { id: labelTextId, className: `${prefix}--label`, htmlFor: id, style: { marginBottom: "0" } }, labelValue),
|
|
24
|
+
tooltipContent && (React.createElement("div", { className: tooltipClassName },
|
|
25
|
+
React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
|
|
26
|
+
React.createElement(Information, { size: 16, fill: "currentColor" }))))))),
|
|
27
|
+
React.createElement(Toggle, { id: id, "aria-labelledby": labelTextId, labelA: labelA, labelB: labelB, labelText: "", ...toggleProps })),
|
|
28
|
+
invalid && (React.createElement("div", { className: cx(`${prefix}--bmrg-toggle__invalid-text`, `${prefix}--form-requirement`), style: { marginBottom: "0" } }, invalidText)),
|
|
29
|
+
helperText && !invalid && (React.createElement("div", { className: `${prefix}--form__helper-text`, style: { marginBottom: "0" } }, helperText))));
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
export { ToggleComponent as default };
|