@rh-support/components 2.1.23 → 2.1.26

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 (88) hide show
  1. package/README.md +2 -0
  2. package/lib/cjs/CustomTextInput/CustomTextInput.d.ts +2 -0
  3. package/lib/cjs/CustomTextInput/CustomTextInput.d.ts.map +1 -1
  4. package/lib/cjs/CustomTextInput/CustomTextInput.js +4 -2
  5. package/lib/cjs/DropDownList/DropDownList.js +10 -10
  6. package/lib/cjs/DropDownList/DropdownWrapper.js +2 -2
  7. package/lib/cjs/DropDownList/SearchableList.js +5 -5
  8. package/lib/cjs/DropDownList/SelectList.js +4 -4
  9. package/lib/cjs/DropDownList/dropdownList.css +10 -5
  10. package/lib/cjs/ErrorBoundary/ErrorBoundaryFallbackComponent.d.ts.map +1 -1
  11. package/lib/cjs/ErrorBoundary/ErrorBoundaryFallbackComponent.js +2 -3
  12. package/lib/cjs/InlineEdit/NewInlineEdit.js +1 -1
  13. package/lib/cjs/InlineEdit/newInlineEdit.css +3 -3
  14. package/lib/cjs/LoadingDots/LoadingDots.js +1 -1
  15. package/lib/cjs/MarkdownEditor/MarkdownEditor.d.ts.map +1 -1
  16. package/lib/cjs/MarkdownEditor/MarkdownEditor.js +11 -10
  17. package/lib/cjs/MarkdownEditor/markdownEditor.css +1 -1
  18. package/lib/cjs/PaginationCompact/PaginationCompact.js +4 -4
  19. package/lib/cjs/PaginationCompact/paginationCompact.css +1 -1
  20. package/lib/cjs/PhoneInput/PhoneInput.d.ts.map +1 -1
  21. package/lib/cjs/PhoneInput/PhoneInput.js +10 -7
  22. package/lib/cjs/PhoneInput/PhoneInput.scss +1 -1
  23. package/lib/cjs/SupportFeedbackForm/SupportFeedbackModal.js +12 -12
  24. package/lib/cjs/Table/PFTable.d.ts +2 -1
  25. package/lib/cjs/Table/PFTable.d.ts.map +1 -1
  26. package/lib/cjs/Table/PFTable.js +7 -7
  27. package/lib/cjs/Table/columnSelector.css +1 -1
  28. package/lib/cjs/TermsAndConditions/AcceptTermsModal.d.ts.map +1 -1
  29. package/lib/cjs/TermsAndConditions/AcceptTermsModal.js +6 -5
  30. package/lib/cjs/TextAreaResizable/TextAreaResizable.d.ts.map +1 -1
  31. package/lib/cjs/TextAreaResizable/TextAreaResizable.js +1 -1
  32. package/lib/cjs/ToastNotification/toastNotification.css +1 -1
  33. package/lib/cjs/TopContentSearch/TopContentSearch.d.ts.map +1 -1
  34. package/lib/cjs/TopContentSearch/TopContentSearch.js +6 -5
  35. package/lib/cjs/helperFunctions/errorMessage.js +2 -2
  36. package/lib/cjs/helperFunctions/errorMessage.scss +1 -1
  37. package/lib/cjs/hooks/index.d.ts +1 -0
  38. package/lib/cjs/hooks/index.d.ts.map +1 -1
  39. package/lib/cjs/hooks/index.js +1 -0
  40. package/lib/cjs/hooks/useBreakpoint.d.ts.map +1 -1
  41. package/lib/cjs/hooks/useBreakpoint.js +1 -0
  42. package/lib/cjs/hooks/useSelectKeyboardNavigator.d.ts +13 -0
  43. package/lib/cjs/hooks/useSelectKeyboardNavigator.d.ts.map +1 -0
  44. package/lib/cjs/hooks/useSelectKeyboardNavigator.js +55 -0
  45. package/lib/esm/CustomTextInput/CustomTextInput.d.ts +2 -0
  46. package/lib/esm/CustomTextInput/CustomTextInput.d.ts.map +1 -1
  47. package/lib/esm/CustomTextInput/CustomTextInput.js +4 -2
  48. package/lib/esm/DropDownList/DropDownList.js +10 -10
  49. package/lib/esm/DropDownList/DropdownWrapper.js +2 -2
  50. package/lib/esm/DropDownList/SearchableList.js +5 -5
  51. package/lib/esm/DropDownList/SelectList.js +4 -4
  52. package/lib/esm/DropDownList/dropdownList.css +10 -5
  53. package/lib/esm/ErrorBoundary/ErrorBoundaryFallbackComponent.d.ts.map +1 -1
  54. package/lib/esm/ErrorBoundary/ErrorBoundaryFallbackComponent.js +3 -4
  55. package/lib/esm/InlineEdit/NewInlineEdit.js +1 -1
  56. package/lib/esm/InlineEdit/newInlineEdit.css +3 -3
  57. package/lib/esm/LoadingDots/LoadingDots.js +1 -1
  58. package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts.map +1 -1
  59. package/lib/esm/MarkdownEditor/MarkdownEditor.js +9 -8
  60. package/lib/esm/MarkdownEditor/markdownEditor.css +1 -1
  61. package/lib/esm/PaginationCompact/PaginationCompact.js +4 -4
  62. package/lib/esm/PaginationCompact/paginationCompact.css +1 -1
  63. package/lib/esm/PhoneInput/PhoneInput.d.ts.map +1 -1
  64. package/lib/esm/PhoneInput/PhoneInput.js +10 -7
  65. package/lib/esm/PhoneInput/PhoneInput.scss +1 -1
  66. package/lib/esm/SupportFeedbackForm/SupportFeedbackModal.js +13 -13
  67. package/lib/esm/Table/PFTable.d.ts +2 -1
  68. package/lib/esm/Table/PFTable.d.ts.map +1 -1
  69. package/lib/esm/Table/PFTable.js +6 -6
  70. package/lib/esm/Table/columnSelector.css +1 -1
  71. package/lib/esm/TermsAndConditions/AcceptTermsModal.d.ts.map +1 -1
  72. package/lib/esm/TermsAndConditions/AcceptTermsModal.js +7 -6
  73. package/lib/esm/TextAreaResizable/TextAreaResizable.d.ts.map +1 -1
  74. package/lib/esm/TextAreaResizable/TextAreaResizable.js +1 -1
  75. package/lib/esm/ToastNotification/toastNotification.css +1 -1
  76. package/lib/esm/TopContentSearch/TopContentSearch.d.ts.map +1 -1
  77. package/lib/esm/TopContentSearch/TopContentSearch.js +6 -5
  78. package/lib/esm/helperFunctions/errorMessage.js +2 -2
  79. package/lib/esm/helperFunctions/errorMessage.scss +1 -1
  80. package/lib/esm/hooks/index.d.ts +1 -0
  81. package/lib/esm/hooks/index.d.ts.map +1 -1
  82. package/lib/esm/hooks/index.js +1 -0
  83. package/lib/esm/hooks/useBreakpoint.d.ts.map +1 -1
  84. package/lib/esm/hooks/useBreakpoint.js +1 -0
  85. package/lib/esm/hooks/useSelectKeyboardNavigator.d.ts +13 -0
  86. package/lib/esm/hooks/useSelectKeyboardNavigator.d.ts.map +1 -0
  87. package/lib/esm/hooks/useSelectKeyboardNavigator.js +51 -0
  88. package/package.json +10 -12
package/README.md CHANGED
@@ -9,3 +9,5 @@ const components = require('components');
9
9
 
10
10
  // TODO: DEMONSTRATE API
11
11
  ```
12
+
13
+ .
@@ -1,4 +1,5 @@
1
1
  import { TextInputProps } from '@patternfly/react-core';
2
+ import React from 'react';
2
3
  interface IProps extends TextInputProps {
3
4
  className?: string;
4
5
  maxLength?: number;
@@ -6,6 +7,7 @@ interface IProps extends TextInputProps {
6
7
  isSpaceAllowed?: boolean;
7
8
  name?: string;
8
9
  isDisabled?: boolean;
10
+ onChange?: ((event: React.FormEvent<HTMLInputElement>, value: string) => void) | undefined;
9
11
  }
10
12
  export declare const CustomTextInput: (props: IProps) => JSX.Element;
11
13
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"CustomTextInput.d.ts","sourceRoot":"","sources":["../../../src/CustomTextInput/CustomTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAoB,MAAM,wBAAwB,CAAC;AAIrF,UAAU,MAAO,SAAQ,cAAc;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,UAAW,MAAM,gBAqD5C,CAAC"}
1
+ {"version":3,"file":"CustomTextInput.d.ts","sourceRoot":"","sources":["../../../src/CustomTextInput/CustomTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAoB,MAAM,wBAAwB,CAAC;AAErF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,MAAO,SAAQ,cAAc;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC9F;AAED,eAAO,MAAM,eAAe,UAAW,MAAM,gBAsD5C,CAAC"}
@@ -23,7 +23,7 @@ const CustomTextInput = (props) => {
23
23
  const { onChange, isSpaceAllowed = false, isRequired, className, type, maxLength, value, isDisabled, placeholder, validated, name } = props, rest = __rest(props, ["onChange", "isSpaceAllowed", "isRequired", "className", "type", "maxLength", "value", "isDisabled", "placeholder", "validated", "name"]);
24
24
  // To handle on input change
25
25
  const onTextInputChange = (value, event) => {
26
- onChange(value, event);
26
+ onChange && onChange(event, value);
27
27
  event.preventDefault();
28
28
  return [];
29
29
  };
@@ -42,7 +42,9 @@ const CustomTextInput = (props) => {
42
42
  else
43
43
  return validated;
44
44
  }
45
+ if (isRequired && isEmpty_1.default(value))
46
+ return 'error';
45
47
  };
46
- return (react_1.default.createElement(react_core_1.TextInput, Object.assign({}, rest, { isRequired: isRequired, className: className, type: type, maxLength: maxLength, value: value, isDisabled: isDisabled, "aria-label": props['aria-label'], placeholder: placeholder, onChange: onTextInputChange, validated: validatedCheck(), name: name })));
48
+ return (react_1.default.createElement(react_core_1.TextInput, Object.assign({}, rest, { isRequired: isRequired, className: className, type: type, maxLength: maxLength, value: value, isDisabled: isDisabled, "aria-label": props['aria-label'], placeholder: placeholder, onChange: (event, value) => onTextInputChange(value, event), validated: validatedCheck(), name: name })));
47
49
  };
48
50
  exports.CustomTextInput = CustomTextInput;
@@ -73,7 +73,7 @@ function Dropdown(props) {
73
73
  };
74
74
  const isSelectedItem = props.isSelectedItem || isSelectedItemLocal;
75
75
  const getListItemClassNames = (downshift, item, itemIndex) => {
76
- let toReturn = 'downshift-item pf-c-select__menu-item';
76
+ let toReturn = 'downshift-item pf-v5-c-select__menu-item';
77
77
  toReturn += item.additionalInfo ? ' pf-m-description' : '';
78
78
  toReturn += isSelectedItem(item) ? ' pf-m-selected' : '';
79
79
  toReturn += item.disabled ? ' pf-m-disabled' : '';
@@ -95,7 +95,7 @@ function Dropdown(props) {
95
95
  optionsToRender = props.paginate ? optionsToRender.slice(0, resultsShown) : optionsToRender;
96
96
  optionsToRender.filter((item) => !item.isNotSearchable).length === 0 &&
97
97
  props.emptyListLabel &&
98
- listToRender.push(react_1.default.createElement("li", { key: "empty-label", className: "pf-u-p-sm" },
98
+ listToRender.push(react_1.default.createElement("li", { key: "empty-label", className: "pf-v5-u-p-sm" },
99
99
  react_1.default.createElement(react_i18next_1.Trans, null, props.emptyListLabel)));
100
100
  listToRender.push(...map_1.default(optionsToRender, (item, index) => {
101
101
  const itemProps = item.isNonActionable
@@ -106,26 +106,26 @@ function Dropdown(props) {
106
106
  disabled: item.disabled,
107
107
  className: getListItemClassNames(downshift, item, index),
108
108
  });
109
- return (react_1.default.createElement("li", { className: item.actionItem ? 'pf-c-select__menu-wrapper' : '', role: "presentation", key: `${index}-${props.id}-${dropdownUtils_1.itemToString(item)}` },
109
+ return (react_1.default.createElement("li", { className: item.actionItem ? 'pf-v5-c-select__menu-wrapper' : '', role: "presentation", key: `${index}-${props.id}-${dropdownUtils_1.itemToString(item)}` },
110
110
  item.isNonActionable ? (isEmpty_1.default(item.children) ? dropdownUtils_1.itemToString(item) : item.children) : null,
111
111
  props.multiSelect && !item.isNotSelectable && !item.isNonActionable && (react_1.default.createElement("div", Object.assign({}, itemProps),
112
- react_1.default.createElement("div", { className: item.additionalInfo ? 'pf-c-select__menu-item-main' : '' },
113
- react_1.default.createElement("input", { disabled: item.disabled === true, className: "pf-c-check__input pf-u-mr-sm", checked: isSelectedItem(item), onChange: dropdownUtils_1.noop, type: "checkbox" }),
112
+ react_1.default.createElement("div", { className: item.additionalInfo ? 'pf-v5-c-select__menu-item-main' : '' },
113
+ react_1.default.createElement("input", { disabled: item.disabled === true, className: "pf-v5-c-check__input pf-v5-u-mr-sm", checked: isSelectedItem(item), onChange: dropdownUtils_1.noop, type: "checkbox" }),
114
114
  isEmpty_1.default(item.children) ? dropdownUtils_1.itemToString(item) : item.children),
115
- item.additionalInfo && (react_1.default.createElement("div", { className: "pf-c-select__menu-item-description" }, item.additionalInfo)))),
115
+ item.additionalInfo && (react_1.default.createElement("div", { className: "pf-v5-c-select__menu-item-description" }, item.additionalInfo)))),
116
116
  !props.multiSelect && !item.isNonActionable && (react_1.default.createElement("button", Object.assign({}, itemProps, { type: "button", title: dropdownUtils_1.itemToString(item) }),
117
- react_1.default.createElement("div", { className: item.additionalInfo ? 'pf-c-select__menu-item-main' : '' },
117
+ react_1.default.createElement("div", { className: item.additionalInfo ? 'pf-v5-c-select__menu-item-main' : '' },
118
118
  isEmpty_1.default(item.children) ? dropdownUtils_1.itemToString(item) : item.children,
119
- isSelectedItem(item) && (react_1.default.createElement("span", { className: "pf-c-select__menu-item-icon" },
119
+ isSelectedItem(item) && (react_1.default.createElement("span", { className: "pf-v5-c-select__menu-item-icon" },
120
120
  react_1.default.createElement(check_icon_1.default, { "aria-hidden": true })))),
121
- item.additionalInfo && (react_1.default.createElement("div", { className: "pf-c-select__menu-item-description" }, item.additionalInfo)))),
121
+ item.additionalInfo && (react_1.default.createElement("div", { className: "pf-v5-c-select__menu-item-description" }, item.additionalInfo)))),
122
122
  item.actionItem ? react_1.default.cloneElement(item.actionItem, { disabled: item.disabled }) : null));
123
123
  }));
124
124
  shouldPaginate &&
125
125
  listToRender.push(...[
126
126
  react_1.default.createElement("li", { key: "separator", className: "dropdown-divider", role: "separator" }),
127
127
  react_1.default.createElement("li", { key: "pagination-item", className: "downshift-pagination-item" },
128
- react_1.default.createElement("button", { type: "button", onClick: (e) => onPaginatonButtonClick(e, downshift), className: "pf-c-button pf-m-link pf-m-block", disabled: props.isLoadingList },
128
+ react_1.default.createElement("button", { type: "button", onClick: (e) => onPaginatonButtonClick(e, downshift), className: "pf-v5-c-button pf-m-link pf-m-block", disabled: props.isLoadingList },
129
129
  react_1.default.createElement(react_i18next_1.Trans, null, props.paginationBtnText))),
130
130
  ]);
131
131
  return listToRender;
@@ -14,12 +14,12 @@ function DropdownWrapper(props) {
14
14
  event.nativeEvent.preventDownshiftDefault = true;
15
15
  }
16
16
  };
17
- return (react_1.default.createElement("div", { id: `${props.id}`, className: `downshift ${props.className} pf-c-select ${props.isOpen ? 'pf-m-expanded' : ''} `, "data-tracking-id": props['data-tracking-id'] ? props['data-tracking-id'] : null },
17
+ return (react_1.default.createElement("div", { id: `${props.id}`, className: `downshift ${props.className} pf-v5-c-select ${props.isOpen ? 'pf-m-expanded' : ''} `, "data-tracking-id": props['data-tracking-id'] ? props['data-tracking-id'] : null },
18
18
  props.label && react_1.default.createElement("label", Object.assign({}, props.getLabelProps()), props.label),
19
19
  props.toggleMenuComponent,
20
20
  react_1.default.createElement("ul", Object.assign({}, props.getMenuProps({
21
21
  onBlur: onBlur,
22
- className: `downshift-menu pf-c-select__menu ${props.hasTwoColumns ? 'column-selector-menu' : ''} ${props.isOpen ? 'open' : ''}`,
22
+ className: `downshift-menu pf-v5-c-select__menu ${props.hasTwoColumns ? 'column-selector-menu' : ''} ${props.isOpen ? 'open' : ''}`,
23
23
  })), props.children)));
24
24
  }
25
25
  exports.default = DropdownWrapper;
@@ -73,12 +73,12 @@ function SearchableList(props) {
73
73
  props.onInputBlur && props.onInputBlur(e);
74
74
  };
75
75
  const renderSearchableToggleButton = () => {
76
- return (react_1.default.createElement("div", Object.assign({}, downshift.getComboboxProps({ className: 'pf-c-select__toggle pf-m-typeahead' })),
77
- react_1.default.createElement("div", { className: "pf-c-select__toggle-wrapper" },
76
+ return (react_1.default.createElement("div", Object.assign({}, downshift.getComboboxProps({ className: 'pf-v5-c-select__toggle pf-m-typeahead' })),
77
+ react_1.default.createElement("div", { className: "pf-v5-c-select__toggle-wrapper" },
78
78
  props.chipGroupComponent,
79
79
  react_1.default.createElement("input", Object.assign({}, getInputProps({
80
80
  placeholder: props.placeholder,
81
- className: `pf-c-form-control pf-c-select__toggle-typeahead`,
81
+ className: `pf-v5-c-form-control pf-v5-c-select__toggle-typeahead`,
82
82
  id: `${props.id}-downshift-search`,
83
83
  'aria-invalid': props.isInValid,
84
84
  'aria-required': props.required,
@@ -90,11 +90,11 @@ function SearchableList(props) {
90
90
  react_1.default.createElement(LoadingIndicator_1.LoadingIndicator, { isInline: true, show: props.isLoadingList }),
91
91
  !isEmpty_1.default(downshift.inputValue) &&
92
92
  !props.isLoadingList &&
93
- (!props.isExportingPDF ? (react_1.default.createElement("button", { className: "pf-c-button pf-m-plain pf-c-select__toggle-clear", onClick: clearSelection(), "aria-label": "clear selection", type: "button", title: "Clear selection", disabled: props.disabled, "data-tracking-id": `${props['data-tracking-id']}-clear` },
93
+ (!props.isExportingPDF ? (react_1.default.createElement("button", { className: "pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear", onClick: clearSelection(), "aria-label": "clear selection", type: "button", title: "Clear selection", disabled: props.disabled, "data-tracking-id": `${props['data-tracking-id']}-clear` },
94
94
  react_1.default.createElement(times_circle_icon_1.default, null))) : null),
95
95
  !props.hideToggleButton && (react_1.default.createElement("button", Object.assign({ type: "button" }, getToggleButtonProps({
96
96
  disabled: props.disabled || props.isLoadingList,
97
- className: 'pf-c-button pf-c-select__toggle-button pf-m-plain',
97
+ className: 'pf-v5-c-button pf-v5-c-select__toggle-button pf-m-plain',
98
98
  onClick: props.onMenuToggle ? () => props.onMenuToggle() : dropdownUtils_1.noop,
99
99
  })),
100
100
  react_1.default.createElement(caret_down_icon_1.default, null)))));
@@ -21,7 +21,7 @@ function SelectList(props) {
21
21
  var _a;
22
22
  return (react_1.default.createElement("button", Object.assign({ type: "button" }, getToggleButtonProps({
23
23
  id: `${props.id}-toggle`,
24
- className: `pf-c-select__toggle ${props.isInValid ? 'form-invalid' : ''}`,
24
+ className: `pf-v5-c-select__toggle ${props.isInValid ? 'form-invalid' : ''}`,
25
25
  disabled: props.disabled || props.isLoadingList,
26
26
  'aria-label': `${isOpen ? 'Close ' + props.title : 'Open ' + props.title}`,
27
27
  'aria-invalid': props.isInValid,
@@ -30,10 +30,10 @@ function SelectList(props) {
30
30
  'data-tracking-id': (_a = props['data-tracking-id']) !== null && _a !== void 0 ? _a : '',
31
31
  onClick: props.onMenuToggle ? () => props.onMenuToggle() : dropdownUtils_1.noop,
32
32
  })),
33
- react_1.default.createElement("div", { className: "pf-c-select__toggle-wrapper" },
34
- react_1.default.createElement("span", { className: "pf-c-select__toggle-text" }, dropdownUtils_1.itemToString(props.selectedItem) || (react_1.default.createElement("span", { className: "pf-c-select__placeholder-text" }, props.placeholder)))),
33
+ react_1.default.createElement("div", { className: "pf-v5-c-select__toggle-wrapper" },
34
+ react_1.default.createElement("span", { className: "pf-v5-c-select__toggle-text" }, dropdownUtils_1.itemToString(props.selectedItem) || (react_1.default.createElement("span", { className: "pf-v5-c-select__placeholder-text" }, props.placeholder)))),
35
35
  react_1.default.createElement(LoadingIndicator_1.LoadingIndicator, { isInline: true, show: props.isLoadingList }),
36
- !props.isLoadingList && (react_1.default.createElement("span", { className: "pf-c-select__toggle-arrow" },
36
+ !props.isLoadingList && (react_1.default.createElement("span", { className: "pf-v5-c-select__toggle-arrow" },
37
37
  react_1.default.createElement(caret_down_icon_1.default, null)))));
38
38
  };
39
39
  return (react_1.default.createElement(DropdownWrapper_1.default, { id: props.id, className: props.className, label: props.label, isOpen: isOpen, getMenuProps: getMenuProps, getLabelProps: getLabelProps, toggleMenuComponent: renderToggleButton(), "data-tracking-id": props['data-tracking-id'], hasTwoColumns: props.hasTwoColumns }, isOpen && props.renderListItems(downshift)));
@@ -2,11 +2,16 @@
2
2
  position: relative;
3
3
  }
4
4
 
5
- .downshift > .pf-c-select__toggle.form-invalid {
5
+ .downshift input {
6
+ border: none;
7
+ padding: 6px;
8
+ }
9
+
10
+ .downshift > .pf-v5-c-select__toggle.form-invalid {
6
11
  border-bottom: 2px solid #c9190b;
7
12
  }
8
13
 
9
- .downshift > .pf-c-select__toggle.form-invalid[disabled] {
14
+ .downshift > .pf-v5-c-select__toggle.form-invalid[disabled] {
10
15
  background-color: #ededed;
11
16
  border-color: #ededed;
12
17
  }
@@ -28,15 +33,15 @@
28
33
  border-top: 1px solid #e9ecef;
29
34
  }
30
35
 
31
- .downshift .pf-c-select__placeholder-text {
36
+ .downshift .pf-v5-c-select__placeholder-text {
32
37
  color: #6a6e73;
33
38
  }
34
39
 
35
- .downshift .pf-c-select__menu-wrapper {
40
+ .downshift .pf-v5-c-select__menu-wrapper {
36
41
  display: flex;
37
42
  }
38
43
 
39
- .downshift .pf-c-select__menu-wrapper:hover {
44
+ .downshift .pf-v5-c-select__menu-wrapper:hover {
40
45
  background-color: rgb(240, 240, 240);
41
46
  }
42
47
 
@@ -1 +1 @@
1
- {"version":3,"file":"ErrorBoundaryFallbackComponent.d.ts","sourceRoot":"","sources":["../../../src/ErrorBoundary/ErrorBoundaryFallbackComponent.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,aAAa;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,MAAO,SAAQ,aAAa;IAClC,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AASD,iBAAS,8BAA8B,CAAC,KAAK,EAAE,MAAM,eA4BpD;kBA5BQ,8BAA8B;;;AA+BvC,OAAO,EAAE,8BAA8B,EAAE,CAAC"}
1
+ {"version":3,"file":"ErrorBoundaryFallbackComponent.d.ts","sourceRoot":"","sources":["../../../src/ErrorBoundary/ErrorBoundaryFallbackComponent.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,aAAa;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,MAAO,SAAQ,aAAa;IAClC,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AASD,iBAAS,8BAA8B,CAAC,KAAK,EAAE,MAAM,eA+BpD;kBA/BQ,8BAA8B;;;AAkCvC,OAAO,EAAE,8BAA8B,EAAE,CAAC"}
@@ -31,9 +31,8 @@ function ErrorBoundaryFallbackComponent(props) {
31
31
  };
32
32
  return (react_1.default.createElement("div", { className: props.isPageLevelError ? 'container' : '' },
33
33
  react_1.default.createElement(react_core_1.Bullseye, null,
34
- react_1.default.createElement(react_core_1.EmptyState, { variant: react_core_1.EmptyStateVariant.small },
35
- react_1.default.createElement(react_core_1.EmptyStateIcon, { icon: exclamation_circle_icon_1.default, color: props.isPageLevelError ? getIconColor() : global_warning_color_200_1.default.value }),
36
- react_1.default.createElement(react_core_1.Title, { headingLevel: "h2", size: "lg" }, t(props.title)),
34
+ react_1.default.createElement(react_core_1.EmptyState, { variant: react_core_1.EmptyStateVariant.sm },
35
+ react_1.default.createElement(react_core_1.EmptyStateHeader, { titleText: react_1.default.createElement(react_1.default.Fragment, null, t(props.title)), icon: react_1.default.createElement(react_core_1.EmptyStateIcon, { icon: exclamation_circle_icon_1.default, color: props.isPageLevelError ? getIconColor() : global_warning_color_200_1.default.value }), headingLevel: "h2" }),
37
36
  react_1.default.createElement(react_core_1.EmptyStateBody, null, t(props.message))))));
38
37
  }
39
38
  exports.ErrorBoundaryFallbackComponent = ErrorBoundaryFallbackComponent;
@@ -141,7 +141,7 @@ function NewInlineEdit(props) {
141
141
  !props.content && !isEditing ? renderEditButton() : null))),
142
142
  renderSaveCancel(),
143
143
  props.hideSaveCancel && isEditing && (react_1.default.createElement("span", { className: `
144
- ${props.charCount > props.charTotal ? 'char-count pf-u-danger-color-100' : 'char-count'}` }, props.charCount ? showCount : null)),
144
+ ${props.charCount > props.charTotal ? 'char-count pf-v5-u-danger-color-100' : 'char-count'}` }, props.charCount ? showCount : null)),
145
145
  canShowContent && !props.usePreformattedTag && (react_1.default.createElement(react_1.default.Fragment, null,
146
146
  react_1.default.createElement("p", { id: props.inputId, style: { display: props.hideLabel ? 'inline' : 'block' } },
147
147
  props.content,
@@ -32,13 +32,13 @@
32
32
  .char-count {
33
33
  float: right;
34
34
  position: relative;
35
- padding-right: var(--pf-global--spacer--4xl);
36
- margin-right: var(--pf-global--spacer--lg);
35
+ padding-right: var(--pf-v5-global--spacer--4xl);
36
+ margin-right: var(--pf-v5-global--spacer--lg);
37
37
  font-size: 12px;
38
38
  }
39
39
 
40
40
  @media (max-width: 415px) {
41
41
  .char-count {
42
- padding-right: var(--pf-global--spacer--2xl);
42
+ padding-right: var(--pf-v5-global--spacer--2xl);
43
43
  }
44
44
  }
@@ -19,7 +19,7 @@ function LoadingDots(props) {
19
19
  react_1.default.createElement("span", null, ".")),
20
20
  react_1.default.createElement("p", { className: "sr-only" },
21
21
  react_1.default.createElement(react_i18next_1.Trans, null, "Loading...")))),
22
- props.message && props.show && react_1.default.createElement("p", { className: "pf-u-text-align-center pf-u-my-md" }, props.message)));
22
+ props.message && props.show && react_1.default.createElement("p", { className: "pf-v5-u-text-align-center pf-v5-u-my-md" }, props.message)));
23
23
  }
24
24
  exports.LoadingDots = LoadingDots;
25
25
  LoadingDots.defaultProps = defaultProps;
@@ -1 +1 @@
1
- {"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AA2B7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAuBD,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,eAsmB5C;kBAtmBQ,cAAc;;;AA0mBvB,OAAO,EAAE,cAAc,EAAE,CAAC"}
1
+ {"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AAwB7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAuBD,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,eAsmB5C;kBAtmBQ,cAAc;;;AA0mBvB,OAAO,EAAE,cAAc,EAAE,CAAC"}
@@ -37,6 +37,7 @@ exports.MarkdownEditor = exports.EditorMode = void 0;
37
37
  require("./markdownEditor.css");
38
38
  const ui_toolkit_1 = require("@cee-eng/ui-toolkit");
39
39
  const react_core_1 = require("@patternfly/react-core");
40
+ const deprecated_1 = require("@patternfly/react-core/deprecated");
40
41
  const code_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/code-icon"));
41
42
  const image_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/image-icon"));
42
43
  const link_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/link-icon"));
@@ -141,13 +142,13 @@ function MarkdownEditor(props) {
141
142
  };
142
143
  const getFileSelectorList = () => {
143
144
  const filesAsDropdownItems = filesList.map((file) => {
144
- return (react_1.default.createElement(react_core_1.DropdownItem, { key: file.id, onClick: () => {
145
+ return (react_1.default.createElement(deprecated_1.DropdownItem, { key: file.id, onClick: () => {
145
146
  onFileInsert(file);
146
147
  } },
147
148
  react_1.default.createElement(react_core_1.Flex, { flexWrap: { default: 'nowrap' } },
148
149
  react_1.default.createElement(react_core_1.FlexItem, null,
149
150
  react_1.default.createElement(react_core_1.Text, { component: react_core_1.TextVariants.small }, file.fileName)),
150
- onFileDelete && (react_1.default.createElement(react_core_1.FlexItem, { className: "pf-u-ml-auto" },
151
+ onFileDelete && (react_1.default.createElement(react_core_1.FlexItem, { className: "pf-v5-u-ml-auto" },
151
152
  react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, onClick: (event) => {
152
153
  onFileSelectToggle(false);
153
154
  onFileDelete(file);
@@ -157,8 +158,8 @@ function MarkdownEditor(props) {
157
158
  });
158
159
  return [
159
160
  ...filesAsDropdownItems,
160
- ...(filesAsDropdownItems.length > 0 ? [react_1.default.createElement(react_core_1.DropdownSeparator, { key: "separator" })] : []),
161
- react_1.default.createElement(react_core_1.DropdownItem, { key: "separated link", component: attachFileBtn }),
161
+ ...(filesAsDropdownItems.length > 0 ? [react_1.default.createElement(deprecated_1.DropdownSeparator, { key: "separator" })] : []),
162
+ react_1.default.createElement(deprecated_1.DropdownItem, { key: "separated link", component: attachFileBtn }),
162
163
  ];
163
164
  };
164
165
  const bindTextAreaRef = (ref) => {
@@ -385,7 +386,7 @@ function MarkdownEditor(props) {
385
386
  props.disabled && isPreview && setIsPreview(false);
386
387
  const disablePreviewButton = mdValue === '';
387
388
  return (react_1.default.createElement("div", { className: `markdown-editor-container ${props.className}`, id: props.id, "data-tracking-id": "md-editor-container", onDrop: onDrop, onPaste: onPaste },
388
- react_1.default.createElement("div", { className: "toolbar-container border-bottom" }, !isPlainModeEnabled && (react_1.default.createElement(react_core_1.Toolbar, { className: "pf-l-flex" },
389
+ react_1.default.createElement("div", { className: "toolbar-container border-bottom" }, !isPlainModeEnabled && (react_1.default.createElement(react_core_1.Toolbar, { className: "pf-v5-l-flex" },
389
390
  react_1.default.createElement(react_core_1.ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
390
391
  react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }, "B"),
391
392
  react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "md-editor-toolbar-i", title: "Italic" }, "I"),
@@ -404,17 +405,17 @@ function MarkdownEditor(props) {
404
405
  react_1.default.createElement(quote_right_icon_1.default, null)),
405
406
  react_1.default.createElement(react_core_1.Button, { tabIndex: -1, variant: react_core_1.ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: code, title: "Code", "data-tracking-id": "md-editor-toolbar-code" },
406
407
  react_1.default.createElement(code_icon_1.default, null)),
407
- showFileSelectorInToolbar && (react_1.default.createElement(react_core_1.Dropdown, { onSelect: onFileSelectLocal, id: "md-editor-toolbar-file-selector", toggle: react_1.default.createElement(react_core_1.DropdownToggle, { onToggle: onFileSelectToggle, isDisabled: props.disabled || isPreview },
408
+ showFileSelectorInToolbar && (react_1.default.createElement(deprecated_1.Dropdown, { onSelect: onFileSelectLocal, id: "md-editor-toolbar-file-selector", toggle: react_1.default.createElement(deprecated_1.DropdownToggle, { onToggle: (_event, isOpen) => onFileSelectToggle(isOpen), isDisabled: props.disabled || isPreview },
408
409
  react_1.default.createElement(image_icon_1.default, null)), dropdownItems: getFileSelectorList(), tabIndex: -1, isPlain: true, menuAppendTo: document.body, isOpen: isFileSelectorOpen, "data-tracking-id": "md-editor-toolbar-file-selector" }))),
409
410
  react_1.default.createElement(react_core_1.ToolbarItem, null,
410
- react_1.default.createElement("a", { className: "pf-c-button pf-m-link pf-m-inline markdown-guidance", rel: "noopener noreferrer", target: "_blank", href: "/articles/4729621", "data-tracking-id": "md-guidance" },
411
+ react_1.default.createElement("a", { className: "pf-v5-c-button pf-m-link pf-m-inline markdown-guidance", rel: "noopener noreferrer", target: "_blank", href: "/articles/4729621", "data-tracking-id": "md-guidance" },
411
412
  react_1.default.createElement(react_i18next_1.Trans, null, "Markdown guidance")))))),
412
413
  react_1.default.createElement("div", { className: "markdown-content" }, !isPreview ? (react_1.default.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: classnames_1.default('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows, style: { height: '313px' } }))) : (react_1.default.createElement("div", { className: "markdown-preview-placeholder", style: { height: '313px' } },
413
414
  react_1.default.createElement("div", { className: "markdown-preview", style: { maxHeight: '313px' } },
414
415
  react_1.default.createElement("div", { dangerouslySetInnerHTML: {
415
416
  __html: dompurify_1.default.sanitize(previewMDText(mdValue)),
416
417
  } }))))),
417
- react_1.default.createElement("div", null, props.showMarkdownPlainTextToggle && (react_1.default.createElement("div", { className: `markdown-toggle-toolbar pf-l-flex` },
418
+ react_1.default.createElement("div", null, props.showMarkdownPlainTextToggle && (react_1.default.createElement("div", { className: `markdown-toggle-toolbar pf-v5-l-flex` },
418
419
  react_1.default.createElement("span", { className: "markdown-toolbar-left-section" },
419
420
  !isPlainModeEnabled && (react_1.default.createElement(react_core_1.Button, { className: "markdown-preview-btn", tabIndex: -1, variant: react_core_1.ButtonVariant.link, onClick: preview, title: "Show preview", "data-tracking-id": `md-preview-${isPreview ? 'hide' : 'show'}`, isDisabled: disablePreviewButton }, isPreview ? (react_1.default.createElement("span", null,
420
421
  " ",
@@ -423,9 +424,9 @@ function MarkdownEditor(props) {
423
424
  t(showPreviewText))))),
424
425
  isUploadingFile && (react_1.default.createElement(react_1.default.Fragment, null,
425
426
  react_1.default.createElement(react_i18next_1.Trans, null,
426
- react_1.default.createElement("small", { className: "pf-u-pl-md" },
427
+ react_1.default.createElement("small", { className: "pf-v5-u-pl-md" },
427
428
  react_1.default.createElement(react_i18next_1.Trans, null, "Uploading File"))),
428
- react_1.default.createElement(react_core_1.Spinner, { className: "pf-u-ml-sm", size: "md" }))),
429
+ react_1.default.createElement(react_core_1.Spinner, { className: "pf-v5-u-ml-sm", size: "md" }))),
429
430
  mdValue.length > props.minCharsForCounter && getCharCountText(mdValue)),
430
431
  react_1.default.createElement("span", null,
431
432
  react_1.default.createElement(react_core_1.Button, { variant: "plain", className: isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: () => onModeChange(true), isDisabled: isPlainModeEnabled || isUploadingFile, "data-tracking-id": "md-editor-plaintext" },
@@ -25,7 +25,7 @@
25
25
  overflow: hidden;
26
26
  }
27
27
 
28
- .markdown-editor-container .pf-c-toolbar {
28
+ .markdown-editor-container .pf-v5-c-toolbar {
29
29
  padding: 0.5rem;
30
30
  }
31
31
 
@@ -45,9 +45,9 @@ function PaginationCompact({ maxPage, dataTrackingId, onPageChange }) {
45
45
  onPageChange(currentPage);
46
46
  // eslint-disable-next-line react-hooks/exhaustive-deps
47
47
  }, [currentPage]);
48
- return (react_1.default.createElement("div", { className: "pagination-compact pf-c-pagination pf-m-compact pf-m-bottom pf-u-ml-auto" },
49
- react_1.default.createElement("nav", { className: "pf-c-pagination__nav" },
50
- react_1.default.createElement("div", { className: "pf-c-pagination__nav-control pf-m-prev" },
48
+ return (react_1.default.createElement("div", { className: "pagination-compact pf-v5-c-pagination pf-m-compact pf-m-bottom pf-v5-u-ml-auto" },
49
+ react_1.default.createElement("nav", { className: "pf-v5-c-pagination__nav" },
50
+ react_1.default.createElement("div", { className: "pf-v5-c-pagination__nav-control pf-m-prev" },
51
51
  react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, type: "button", "data-tracking-id": `${dataTrackingId}-previous`, onClick: onPreviousClick, isDisabled: currentPage === 1, "aria-label": "Go to previous page" },
52
52
  react_1.default.createElement(angle_left_icon_1.default, null))),
53
53
  react_1.default.createElement("div", { style: {
@@ -56,7 +56,7 @@ function PaginationCompact({ maxPage, dataTrackingId, onPageChange }) {
56
56
  currentPage,
57
57
  " of ",
58
58
  maxPage),
59
- react_1.default.createElement("div", { className: "pf-c-pagination__nav-control pf-m-next" },
59
+ react_1.default.createElement("div", { className: "pf-v5-c-pagination__nav-control pf-m-next" },
60
60
  react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, onClick: onNextClick, "data-tracking-id": `${dataTrackingId}-next`, isDisabled: currentPage === maxPage, type: "button", "aria-label": "Go to next page" },
61
61
  react_1.default.createElement(angle_right_icon_1.default, null))))));
62
62
  }
@@ -1,4 +1,4 @@
1
- .pagination-compact.pf-c-pagination.pf-m-bottom {
1
+ .pagination-compact.pf-v5-c-pagination.pf-m-bottom {
2
2
  padding: 0px;
3
3
  background: none;
4
4
  box-shadow: none;
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA4DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAiPvC"}
1
+ {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAW3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA4DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAqPvC"}
@@ -25,6 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  exports.PhoneInput = exports.getPhoneObj = void 0;
26
26
  require("./PhoneInput.scss");
27
27
  const react_core_1 = require("@patternfly/react-core");
28
+ const deprecated_1 = require("@patternfly/react-core/deprecated");
28
29
  const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
29
30
  const isEqual_1 = __importDefault(require("lodash/isEqual"));
30
31
  const react_1 = __importStar(require("react"));
@@ -202,8 +203,8 @@ function PhoneInput(props) {
202
203
  setIsOpen(!isOpen);
203
204
  };
204
205
  const getOptions = (options) => {
205
- return options.map((country) => (react_1.default.createElement(react_core_1.SelectOption, { key: country.iso2, value: country },
206
- react_1.default.createElement("div", { className: "pf-u-display-inline-flex" },
206
+ return options.map((country) => (react_1.default.createElement(deprecated_1.SelectOption, { key: country.iso2, value: country },
207
+ react_1.default.createElement("div", { className: "pf-v5-u-display-inline-flex" },
207
208
  react_1.default.createElement("div", { className: `flag ${country.iso2}`, style: { marginRight: '8px' } }),
208
209
  country.name,
209
210
  " (+",
@@ -220,7 +221,7 @@ function PhoneInput(props) {
220
221
  return getOptions(newOptions);
221
222
  };
222
223
  const placeholder = (react_1.default.createElement("div", { className: "phone-number-select-placeholder" },
223
- react_1.default.createElement("div", { className: "pf-u-display-inline-flex" },
224
+ react_1.default.createElement("div", { className: "pf-v5-u-display-inline-flex" },
224
225
  react_1.default.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
225
226
  iso2.toUpperCase())));
226
227
  react_1.useEffect(() => {
@@ -278,9 +279,11 @@ function PhoneInput(props) {
278
279
  // eslint-disable-next-line react-hooks/exhaustive-deps
279
280
  }, [phoneValue]);
280
281
  return (react_1.default.createElement(react_core_1.InputGroup, { className: "phone-number-input" },
281
- react_1.default.createElement("div", null,
282
- react_1.default.createElement(react_core_1.Select, { variant: react_core_1.SelectVariant.single, "data-tracking-id": "case-phone-number-country-code", className: "phone-number-select", onToggle: onToggle, onSelect: onCountrySelect, isOpen: isOpen, placeholderText: iso2 && phoneValue !== '' ? placeholder : 'Country Code', onFilter: onFilter, hasInlineFilter: true, inlineFilterPlaceholderText: t('Search'), isDisabled: props.isDisabled }, getOptions(initializedCountries))),
283
- react_1.default.createElement(react_core_1.TextInput, { id: "case-phone-number", "data-tracking-id": "case-phone-number", placeholder: "55-555-5555", value: formattedNumber ? formattedNumber : phoneValue, onChange: onPhoneChange, validated: validations, isDisabled: props.isDisabled }),
284
- props.isLoading && react_1.default.createElement(react_core_1.Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl phone-spinner" })));
282
+ react_1.default.createElement(react_core_1.InputGroupItem, null,
283
+ react_1.default.createElement("div", null,
284
+ react_1.default.createElement(deprecated_1.Select, { variant: deprecated_1.SelectVariant.single, "data-tracking-id": "case-phone-number-country-code", className: "phone-number-select", onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onCountrySelect, isOpen: isOpen, placeholderText: iso2 && phoneValue !== '' ? placeholder : 'Country Code', onFilter: onFilter, hasInlineFilter: true, inlineFilterPlaceholderText: t('Search'), isDisabled: props.isDisabled }, getOptions(initializedCountries)))),
285
+ react_1.default.createElement(react_core_1.InputGroupItem, { style: { width: '100%' } },
286
+ react_1.default.createElement(react_core_1.TextInput, { id: "case-phone-number", "data-tracking-id": "case-phone-number", placeholder: "55-555-5555", value: formattedNumber ? formattedNumber : phoneValue, onChange: (_event, phone) => onPhoneChange(phone), validated: validations, isDisabled: props.isDisabled })),
287
+ props.isLoading && react_1.default.createElement(react_core_1.Spinner, { size: "lg", className: "pf-v5-u-ml-2xl pf-v5-u-mr-xl phone-spinner" })));
285
288
  }
286
289
  exports.PhoneInput = PhoneInput;
@@ -734,7 +734,7 @@
734
734
  }
735
735
 
736
736
  .phone-number-select {
737
- .pf-c-select__menu {
737
+ .pf-v5-c-select__menu {
738
738
  min-width: 370px !important;
739
739
  }
740
740
  }
@@ -113,27 +113,27 @@ function SupportFeedbackModal(props) {
113
113
  const sentiments = [
114
114
  {
115
115
  id: 'very_unsatisfied',
116
- icon: react_1.default.createElement(outlined_frown_open_icon_1.default, { size: "lg" }),
116
+ icon: react_1.default.createElement(outlined_frown_open_icon_1.default, null),
117
117
  label: 'Very Unsatisfied',
118
118
  },
119
119
  {
120
120
  id: 'unsatisfied',
121
- icon: react_1.default.createElement(outlined_frown_icon_1.default, { size: "lg" }),
121
+ icon: react_1.default.createElement(outlined_frown_icon_1.default, null),
122
122
  label: 'Unsatisfied',
123
123
  },
124
124
  {
125
125
  id: 'neutral',
126
- icon: react_1.default.createElement(outlined_meh_icon_1.default, { size: "lg" }),
126
+ icon: react_1.default.createElement(outlined_meh_icon_1.default, null),
127
127
  label: 'Neutral',
128
128
  },
129
129
  {
130
130
  id: 'satisfied',
131
- icon: react_1.default.createElement(outlined_smile_icon_1.default, { size: "lg" }),
131
+ icon: react_1.default.createElement(outlined_smile_icon_1.default, null),
132
132
  label: 'Satisfied',
133
133
  },
134
134
  {
135
135
  id: 'very_satisfied',
136
- icon: react_1.default.createElement(outlined_grin_icon_1.default, { size: "lg" }),
136
+ icon: react_1.default.createElement(outlined_grin_icon_1.default, null),
137
137
  label: 'Very Satisfied',
138
138
  },
139
139
  ];
@@ -141,22 +141,22 @@ function SupportFeedbackModal(props) {
141
141
  function renderModalBody() {
142
142
  return (react_1.default.createElement(react_1.default.Fragment, null,
143
143
  react_1.default.createElement("form", { className: "support-feedback-form", action: "", onSubmit: handleSubmit },
144
- react_1.default.createElement("fieldset", { className: "form-group radios feedback-satisfaction pf-u-mb-sm", role: "radiogroup", "aria-labelledby": "feedback-satisfaction-label" },
145
- react_1.default.createElement("legend", { id: "feedback-satisfaction-label", className: "pf-u-mb-md" },
144
+ react_1.default.createElement("fieldset", { className: "form-group radios feedback-satisfaction pf-v5-u-mb-sm", role: "radiogroup", "aria-labelledby": "feedback-satisfaction-label" },
145
+ react_1.default.createElement("legend", { id: "feedback-satisfaction-label", className: "pf-v5-u-mb-md" },
146
146
  react_1.default.createElement(react_i18next_1.Trans, null, "How satisfied are you with customer support\u2019s web experience?"),
147
147
  react_1.default.createElement("span", { className: "form-required", "aria-hidden": "true" }, "*"),
148
148
  ' '),
149
149
  react_1.default.createElement("div", { className: "satisfaction-values-wrapper" }, sentiments.map((sentiment) => {
150
- return (react_1.default.createElement("label", { className: `${sentiment.id} sentiment-label pf-u-ml-md pf-u-mr-md ${values.levelOfSatisfied === sentiment.label ? 'sentiment-selected' : ''}`, htmlFor: sentiment.id, key: sentiment.id },
151
- react_1.default.createElement("input", { type: "radio", id: sentiment.id, "aria-label": t(sentiment.label), disabled: isFetching, name: "levelOfSatisfied", value: sentiment.label, checked: values.levelOfSatisfied === sentiment.label, "aria-checked": values.levelOfSatisfied === sentiment.label, required: true, className: "feedback_button_values pf-u-mb-sm pf-screen-reader", onChange: handleSentimentChange }),
150
+ return (react_1.default.createElement("label", { className: `${sentiment.id} sentiment-label pf-v5-u-ml-md pf-v5-u-mr-md ${values.levelOfSatisfied === sentiment.label ? 'sentiment-selected' : ''}`, htmlFor: sentiment.id, key: sentiment.id },
151
+ react_1.default.createElement("input", { type: "radio", id: sentiment.id, "aria-label": t(sentiment.label), disabled: isFetching, name: "levelOfSatisfied", value: sentiment.label, checked: values.levelOfSatisfied === sentiment.label, "aria-checked": values.levelOfSatisfied === sentiment.label, required: true, className: "feedback_button_values pf-v5-u-mb-sm pf-screen-reader", onChange: handleSentimentChange }),
152
152
  ' ',
153
- sentiment.icon,
153
+ react_1.default.createElement(react_core_1.Icon, { size: "lg" }, sentiment.icon),
154
154
  react_1.default.createElement(react_i18next_1.Trans, null, sentiment.label)));
155
155
  })),
156
156
  isSubmitDisabled && (react_1.default.createElement("div", null,
157
157
  react_1.default.createElement("p", { className: "form-instructions form-invalid" },
158
158
  react_1.default.createElement(react_i18next_1.Trans, null, "Please select a value"))))),
159
- react_1.default.createElement("div", { className: "form-group pf-u-mb-md" },
159
+ react_1.default.createElement("div", { className: "form-group pf-v5-u-mb-md" },
160
160
  react_1.default.createElement("label", { htmlFor: "moreFeedback" },
161
161
  react_1.default.createElement(react_i18next_1.Trans, null, "How can we improve?")),
162
162
  react_1.default.createElement(TextAreaAutosize_1.TextAreaAutosize, { name: "moreInfo", id: "moreFeedback", placeholder: t('i18nDescribeSuggestionDetail', 'Describe your suggestion in detail'), disabled: isFetching, value: values.moreInfo, className: "form-control", onChange: handleFeedbackTextChange, rowsMin: 3 })),
@@ -165,7 +165,7 @@ function SupportFeedbackModal(props) {
165
165
  }
166
166
  function returnModalAction() {
167
167
  return [
168
- react_1.default.createElement(react_core_1.Button, { key: "confirm", onClick: handleSubmit, variant: "primary", isDisabled: isSubmitDisabled || isFetching, className: "pf-u-ml-xs", spinnerAriaValueText: isFetching ? 'Loading' : undefined, isLoading: isFetching, "data-tracking-id": "app-feedback-submit", "aria-label": t('Send feedback') },
168
+ react_1.default.createElement(react_core_1.Button, { key: "confirm", onClick: handleSubmit, variant: "primary", isDisabled: isSubmitDisabled || isFetching, className: "pf-v5-u-ml-xs", spinnerAriaValueText: isFetching ? 'Loading' : undefined, isLoading: isFetching, "data-tracking-id": "app-feedback-submit", "aria-label": t('Send feedback') },
169
169
  react_1.default.createElement(react_i18next_1.Trans, null, isFetching ? 'Sending feedback' : 'Send feedback')),
170
170
  react_1.default.createElement("button", { key: "cancel", onClick: handleModalToggle, className: "btn btn-app btn-link", "data-tracking-id": "app-feedback-cancel", "aria-label": "Cancel", disabled: isFetching },
171
171
  react_1.default.createElement(react_i18next_1.Trans, null, "Cancel")),
@@ -1,4 +1,5 @@
1
- import { IExtraData, IRow, IRowData, TableProps } from '@patternfly/react-table';
1
+ import { IExtraData, IRow, IRowData } from '@patternfly/react-table';
2
+ import { TableProps } from '@patternfly/react-table/deprecated';
2
3
  import { ReactNode } from 'react';
3
4
  interface IColumn {
4
5
  id: string;
@@ -1 +1 @@
1
- {"version":3,"file":"PFTable.d.ts","sourceRoot":"","sources":["../../../src/Table/PFTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,UAAU,EACV,IAAI,EACJ,QAAQ,EAMR,UAAU,EAGb,MAAM,yBAAyB,CAAC;AACjC,OAAc,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AA6C3E,UAAU,OAAO;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,GAAG,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,aAAa,CAAC,KAAA,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAElD;;;OAGG;IACH,IAAI,CAAC,EAAE,CAAC,IAAI,KAAA,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,GAAG,CAAC;IACzB,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;CACpF;AAED,UAAU,SAAS;IACf,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,OAAO;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC7B;AAED,UAAU,MAAO,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC7E,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,KAAA,EAAE,GAAG,KAAA,EAAE,KAAK,KAAA,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,GAAG,CAAC;IACnE,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACxC;AAGD,eAAO,MAAM,sBAAsB,gCAAoB,CAAC;AAExD,iBAAS,OAAO,CAAC,KAAK,EAAE,MAAM,eAyK7B;AAED,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC"}
1
+ {"version":3,"file":"PFTable.d.ts","sourceRoot":"","sources":["../../../src/Table/PFTable.tsx"],"names":[],"mappings":"AASA,OAAO,EAGH,UAAU,EACV,IAAI,EACJ,QAAQ,EAKX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAiC,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC/F,OAAc,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AA8C3E,UAAU,OAAO;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,GAAG,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,aAAa,CAAC,KAAA,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAElD;;;OAGG;IACH,IAAI,CAAC,EAAE,CAAC,IAAI,KAAA,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,GAAG,CAAC;IACzB,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;CACpF;AAED,UAAU,SAAS;IACf,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,OAAO;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC7B;AAED,UAAU,MAAO,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC7E,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,KAAA,EAAE,GAAG,KAAA,EAAE,KAAK,KAAA,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,GAAG,CAAC;IACnE,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACxC;AAGD,eAAO,MAAM,sBAAsB,gCAAoB,CAAC;AAExD,iBAAS,OAAO,CAAC,KAAK,EAAE,MAAM,eAyK7B;AAED,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC"}