@rh-support/components 2.1.23 → 2.1.25

package/lib/cjs/Table/PFTable.js

@@ -37,6 +37,7 @@ exports.PFTable = exports.defaultTableSortMethod = void 0;
 const react_core_1 = require("@patternfly/react-core");
 const search_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/search-icon"));
 const react_table_1 = require("@patternfly/react-table");
+const deprecated_1 = require("@patternfly/react-table/deprecated");
 const react_1 = __importStar(require("react"));
 const TableProvider_1 = require("./TableProvider");
 const noop = () => { };
@@ -47,9 +48,8 @@ const emptyStateRowDefault = [
             {
                 props: { colSpan: 8 },
                 title: (react_1.default.createElement(react_core_1.Bullseye, null,
-                    react_1.default.createElement(react_core_1.EmptyState, { variant: react_core_1.EmptyStateVariant.small },
-                        react_1.default.createElement(react_core_1.EmptyStateIcon, { icon: search_icon_1.default }),
-                        react_1.default.createElement(react_core_1.Title, { headingLevel: "h2", size: "lg" }, "No results found")))),
+                    react_1.default.createElement(react_core_1.EmptyState, { variant: react_core_1.EmptyStateVariant.sm },
+                        react_1.default.createElement(react_core_1.EmptyStateHeader, { titleText: "No results found", icon: react_1.default.createElement(react_core_1.EmptyStateIcon, { icon: search_icon_1.default }), headingLevel: "h2" })))),
             },
         ],
     },
@@ -61,7 +61,7 @@ const loadingRowDefault = [
             {
                 props: { colSpan: 9 },
                 title: (react_1.default.createElement(react_core_1.Bullseye, { style: { minHeight: '350px' } },
-                    react_1.default.createElement(react_core_1.EmptyState, { variant: react_core_1.EmptyStateVariant.small },
+                    react_1.default.createElement(react_core_1.EmptyState, { variant: react_core_1.EmptyStateVariant.sm },
                         react_1.default.createElement(react_core_1.Spinner, { size: "xl" })))),
             },
         ],
@@ -197,8 +197,8 @@ function PFTable(props) {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_table_1.Table, Object.assign({}, restProps, conditionalProps, { variant: react_table_1.TableVariant.compact, cells: pfColumns, sortBy: getSortBy(), onSort: onSort, rows: getTableRows(), className: props.className ? props.className : '', actionResolver: props.actionResolver, actions: props.actions || null, areActionsDisabled: props.areActionsDisabled || null }),
-            react_1.default.createElement(react_table_1.TableHeader, null),
-            react_1.default.createElement(react_table_1.TableBody, { onRowClick: onRowClick ? onRowClick : noop }))));
+        react_1.default.createElement(deprecated_1.Table, Object.assign({}, restProps, conditionalProps, { variant: react_table_1.TableVariant.compact, cells: pfColumns, sortBy: getSortBy(), onSort: onSort, rows: getTableRows(), className: props.className ? props.className : '', actionResolver: props.actionResolver, actions: props.actions || null, areActionsDisabled: props.areActionsDisabled || null }),
+            react_1.default.createElement(deprecated_1.TableHeader, null),
+            react_1.default.createElement(deprecated_1.TableBody, { onRowClick: onRowClick ? onRowClick : noop }))));
 }
 exports.PFTable = PFTable;

package/lib/cjs/Table/columnSelector.css

@@ -28,7 +28,7 @@
     cursor: not-allowed;
 }
 
-button.pf-c-button.column-selector-btn::after {
+button.pf-v5-c-button.column-selector-btn::after {
     border: none;
 }
 

package/lib/cjs/TermsAndConditions/AcceptTermsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AcceptTermsModal.d.ts","sourceRoot":"","sources":["../../../src/TermsAndConditions/AcceptTermsModal.tsx"],"names":[],"mappings":"AAmBA,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAiBD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eAyI7C"}
+{"version":3,"file":"AcceptTermsModal.d.ts","sourceRoot":"","sources":["../../../src/TermsAndConditions/AcceptTermsModal.tsx"],"names":[],"mappings":"AAUA,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAiBD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eAyI7C"}

package/lib/cjs/TermsAndConditions/AcceptTermsModal.js

@@ -31,6 +31,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AcceptTermsModal = void 0;
 const hydrajs_1 = require("@cee-eng/hydrajs");
 const react_core_1 = require("@patternfly/react-core");
+const deprecated_1 = require("@patternfly/react-core/deprecated");
 const react_1 = __importStar(require("react"));
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../hooks");
@@ -92,24 +93,24 @@ function AcceptTermsModal(props) {
         props.onConfirm(selectedTranslation.termsPdfId);
     };
     const onDropdownToggle = (toggle) => setisLangSelectorDropdownOpen(toggle);
-    return (react_1.default.createElement(react_core_1.Modal, { variant: react_core_1.ModalVariant.medium, className: "pf-u-font-size-sm", title: isFetching || !selectedTranslation ? 'Remote Access Rider' : selectedTranslation.translatedTermsName, isOpen: props.isModalOpen, showClose: props.isSubmitting ? false : true, onClose: handleModalToggle, actions: [
+    return (react_1.default.createElement(react_core_1.Modal, { variant: react_core_1.ModalVariant.medium, className: "pf-v5-u-font-size-sm", title: isFetching || !selectedTranslation ? 'Remote Access Rider' : selectedTranslation.translatedTermsName, isOpen: props.isModalOpen, showClose: props.isSubmitting ? false : true, onClose: handleModalToggle, actions: [
             react_1.default.createElement(react_core_1.Button, { key: "confirm", variant: react_core_1.ButtonVariant.primary, isDisabled: !termsAcked || props.isSubmitting || props.isDisabled, isLoading: props.isDisabled || props.isSubmitting, "data-tracking-id": `${props.dataTrackingId || props.eventCode}-terms-accept`, onClick: onSubmitClick },
                 react_1.default.createElement(react_i18next_1.Trans, null, "Submit")),
             react_1.default.createElement(react_core_1.Button, { key: "cancel", isDisabled: props.isSubmitting || props.isDisabled, "data-tracking-id": `${props.dataTrackingId || props.eventCode}-terms-cancel`, variant: react_core_1.ButtonVariant.link, onClick: props.onModalClose },
                 react_1.default.createElement(react_i18next_1.Trans, null, "Cancel")),
         ] }, isFetching || !selectedTranslation ? (react_1.default.createElement("div", { style: { height: '100px' } },
         react_1.default.createElement(LoadingIndicator_1.LoadingIndicator, null))) : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("p", { className: "pf-u-mb-md" }, selectedTranslation.translatedDescription),
+        react_1.default.createElement("p", { className: "pf-v5-u-mb-md" }, selectedTranslation.translatedDescription),
         react_1.default.createElement("strong", null,
             react_1.default.createElement(react_i18next_1.Trans, null, "Download the agreement")),
-        react_1.default.createElement("p", { className: "pf-u-mb-md pf-u-mt-sm" }, selectedTranslation.translatedInstructions),
+        react_1.default.createElement("p", { className: "pf-v5-u-mb-md pf-v5-u-mt-sm" }, selectedTranslation.translatedInstructions),
         react_1.default.createElement(react_core_1.Flex, null,
             react_1.default.createElement(react_core_1.FlexItem, null,
-                react_1.default.createElement(react_core_1.Select, { "aria-label": t('Select language'), id: "terms-language-selector", className: "pf-u-mb-md", selections: selectedTranslation.localeCode, onSelect: onLangChange, isOpen: isLangSelectorDropdownOpen, isDisabled: props.isSubmitting, menuAppendTo: document.body, placeholderText: t('Select an option that best fits'), onToggle: onDropdownToggle }, Object.keys(allTranslations).map((option, index) => (react_1.default.createElement(react_core_1.SelectOption, { key: index, value: option }, getLocaleNameFromLocalCode(option)))))),
+                react_1.default.createElement(deprecated_1.Select, { "aria-label": t('Select language'), id: "terms-language-selector", className: "pf-v5-u-mb-md", selections: selectedTranslation.localeCode, onSelect: onLangChange, isOpen: isLangSelectorDropdownOpen, isDisabled: props.isSubmitting, menuAppendTo: document.body, placeholderText: t('Select an option that best fits'), onToggle: (_event, toggle) => onDropdownToggle(toggle) }, Object.keys(allTranslations).map((option, index) => (react_1.default.createElement(deprecated_1.SelectOption, { key: index, value: option }, getLocaleNameFromLocalCode(option)))))),
             react_1.default.createElement(react_core_1.FlexItem, null,
                 react_1.default.createElement("a", { href: selectedTranslation.pdfDownloadUrl, "data-tracking-id": `${props.eventCode}-terms-download`, target: "_blank", rel: "noopener noreferrer" },
                     react_1.default.createElement(react_i18next_1.Trans, null, "Download")))),
-        react_1.default.createElement(react_core_1.Checkbox, { label: t('I have read and agree to the terms'), isChecked: termsAcked, onChange: (checked) => {
+        react_1.default.createElement(react_core_1.Checkbox, { label: t('I have read and agree to the terms'), isChecked: termsAcked, onChange: (_event, checked) => {
                 setTermsAcked(checked);
             }, "aria-label": t('I have read and agree to the terms'), id: "agree-terms", name: "agree-terms" })))));
 }

package/lib/cjs/TextAreaResizable/TextAreaResizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaResizable.d.ts","sourceRoot":"","sources":["../../../src/TextAreaResizable/TextAreaResizable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEpE,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEnD,UAAU,MAAO,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACpG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CACpF;AACD,eAAO,MAAM,iBAAiB,UAAW,MAAM,gBAoD9C,CAAC"}
+{"version":3,"file":"TextAreaResizable.d.ts","sourceRoot":"","sources":["../../../src/TextAreaResizable/TextAreaResizable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEpE,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEnD,UAAU,MAAO,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACpG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CACpF;AACD,eAAO,MAAM,iBAAiB,UAAW,MAAM,gBAqD9C,CAAC"}

package/lib/cjs/TextAreaResizable/TextAreaResizable.js

@@ -51,6 +51,6 @@ const TextAreaResizable = (props) => {
         else
             return 'default';
     };
-    return (react_1.default.createElement(react_core_1.TextArea, { id: id, rows: rows || rowsMin, className: className, "aria-required": props['aria-required'], isRequired: isRequired, maxLength: maxLength, name: name, value: value, autoResize: autoResize, validated: validatedCheck(), onChange: onTextAreaChange, disabled: isDisabled }));
+    return (react_1.default.createElement(react_core_1.TextArea, { id: id, rows: rows || rowsMin, className: className, "aria-required": props['aria-required'], isRequired: isRequired, maxLength: maxLength, name: name, value: value, autoResize: autoResize, validated: validatedCheck(), onChange: (event, value) => onTextAreaChange(value, event), disabled: isDisabled, resizeOrientation: "vertical" }));
 };
 exports.TextAreaResizable = TextAreaResizable;

package/lib/cjs/ToastNotification/toastNotification.css

@@ -16,7 +16,7 @@
     margin: 0;
 }
 
-.Toastify__toast-body > .pf-c-alert {
+.Toastify__toast-body > .pf-v5-c-alert {
     height: 100%;
     min-width: 500px;
 }

package/lib/cjs/TopContentSearch/TopContentSearch.js

@@ -130,9 +130,9 @@ function TopContentSearch({ topContentData = [], topContentResultsWrapperRef = {
         setSearchText(value);
         debounceSearch(value);
     };
-    return (react_1.default.createElement("div", { className: "top-content-search-wrapper pf-u-p-md", ref: searchWrapperRef },
-        react_1.default.createElement("label", { htmlFor: "top-content-search-input", className: "pf-u-mr-md top-content-search-label" },
+    return (react_1.default.createElement("div", { className: "top-content-search-wrapper pf-v5-u-p-md", ref: searchWrapperRef },
+        react_1.default.createElement("label", { htmlFor: "top-content-search-input", className: "pf-v5-u-mr-md top-content-search-label" },
             react_1.default.createElement(react_i18next_1.Trans, null, "Filter results:")),
-        react_1.default.createElement(react_core_1.SearchInput, { id: "top-content-search-input", className: "top-content-search-input pf-u-flex-grow-1", "aria-label": t('search top content'), placeholder: t('Enter relevant keywords'), value: searchText, "data-tracking-id": dataTrackingId, onChange: onSearchInputChange, onClear: onSearchInputClear })));
+        react_1.default.createElement(react_core_1.SearchInput, { id: "top-content-search-input", className: "top-content-search-input pf-v5-u-flex-grow-1", "aria-label": t('search top content'), placeholder: t('Enter relevant keywords'), value: searchText, "data-tracking-id": dataTrackingId, onChange: (e, val) => onSearchInputChange(val), onClear: onSearchInputClear })));
 }
 exports.TopContentSearch = TopContentSearch;

package/lib/cjs/helperFunctions/errorMessage.js

@@ -12,12 +12,12 @@ const react_1 = __importDefault(require("react"));
 const SupportFeedbackForm_1 = require("../SupportFeedbackForm");
 const defaultTitle = "Sorry, we're experiencing an error";
 const errorMessageButtonLabel = 'contact us';
-const defaultErrorMessage = (react_1.default.createElement("p", { className: "pf-u-mb-0" },
+const defaultErrorMessage = (react_1.default.createElement("p", { className: "pf-v5-u-mb-0" },
     "Try refreshing the page. Please ",
     react_1.default.createElement(SupportFeedbackForm_1.SupportFeedbackForm, { isInline: true, buttonLabel: errorMessageButtonLabel }),
     " if the problem persists.",
     react_1.default.createElement("br", null),
-    react_1.default.createElement(react_core_1.Button, { variant: "link", component: "a", href: "https://status.redhat.com/", "data-tracking-id": "redirect-status-portal-button", target: "_blank", icon: react_1.default.createElement(external_link_alt_icon_1.default, { className: "status-portal-button-icon" }), iconPosition: "right", className: "pf-u-pl-0", isInline: true, "aria-label": "View status page" }, "View status page"),
+    react_1.default.createElement(react_core_1.Button, { variant: "link", component: "a", href: "https://status.redhat.com/", "data-tracking-id": "redirect-status-portal-button", target: "_blank", icon: react_1.default.createElement(external_link_alt_icon_1.default, { className: "status-portal-button-icon" }), iconPosition: "right", className: "pf-v5-u-pl-0", isInline: true, "aria-label": "View status page" }, "View status page"),
     ' '));
 const defaultErrorObj = {
     500: {

package/lib/cjs/helperFunctions/errorMessage.scss

@@ -1,3 +1,3 @@
 .status-portal-button-icon {
-    font-size: var(--pf-global--icon--FontSize--sm);
+    font-size: var(--pf-v5-global--icon--FontSize--sm);
 }

package/lib/cjs/hooks/index.d.ts

@@ -11,4 +11,5 @@ export * from './useForceUpdate';
 export * from './useLRUCache';
 export * from './useBreakpoint';
 export * from './useOnScreen';
+export * from './useSelectKeyboardNavigator';
 //# sourceMappingURL=index.d.ts.map

package/lib/cjs/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC"}

package/lib/cjs/hooks/index.js

@@ -23,3 +23,4 @@ __exportStar(require("./useForceUpdate"), exports);
 __exportStar(require("./useLRUCache"), exports);
 __exportStar(require("./useBreakpoint"), exports);
 __exportStar(require("./useOnScreen"), exports);
+__exportStar(require("./useSelectKeyboardNavigator"), exports);

package/lib/cjs/hooks/useBreakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/hooks/useBreakpoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,oBAAY,MAAM,GAAG;IACjB,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC,CAAC;AAYF,iBAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,OAAwB,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,eA+ChH;AAED,iBAAS,aAAa;;EAMrB;AACD,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/hooks/useBreakpoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,oBAAY,MAAM,GAAG;IACjB,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC,CAAC;AAaF,iBAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,OAAwB,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,eA+ChH;AAED,iBAAS,aAAa;;EAMrB;AACD,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,CAAC"}

package/lib/cjs/hooks/useBreakpoint.js

@@ -30,6 +30,7 @@ const defaultQueries = {
     md: `(min-width: 768px)`,
     lg: `(min-width: 992px)`,
     xl: `(min-width: 1300px)`,
+    xxl: `(min-width: 1800px)`,
 };
 function BreakpointProvider({ children, queries = defaultQueries }) {
     const [queryMatch, setQueryMatch] = react_1.useState({});

package/lib/cjs/hooks/useSelectKeyboardNavigator.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface IProps {
+    list: any[];
+    isOpen: boolean;
+    setIsOpen: (value: React.SetStateAction<boolean>) => void;
+    onSelect: (value: any) => void;
+}
+export declare function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }: IProps): {
+    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    focusedItemIndex: number;
+};
+export {};
+//# sourceMappingURL=useSelectKeyboardNavigator.d.ts.map

package/lib/cjs/hooks/useSelectKeyboardNavigator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSelectKeyboardNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,UAAU,MAAM;IACZ,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,MAAM;4BA6BrD,mBAAmB,CAAC,gBAAgB,CAAC;;EAuBvE"}

package/lib/cjs/hooks/useSelectKeyboardNavigator.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectKeyboardNavigator = void 0;
+const react_1 = require("react");
+function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }) {
+    const [focusedItemIndex, setFocusedItemIndex] = react_1.useState(null);
+    const handleMenuArrowKeys = (key) => {
+        let indexToFocus;
+        if (isOpen) {
+            if (key === 'ArrowUp') {
+                // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+                if (focusedItemIndex === null || focusedItemIndex === 0) {
+                    indexToFocus = list.length - 1;
+                }
+                else {
+                    indexToFocus = focusedItemIndex - 1;
+                }
+            }
+            if (key === 'ArrowDown') {
+                // When no index is set or at the last index, focus to the first, otherwise increment focus index
+                if (focusedItemIndex === null || focusedItemIndex === list.length - 1) {
+                    indexToFocus = 0;
+                }
+                else {
+                    indexToFocus = focusedItemIndex + 1;
+                }
+            }
+            setFocusedItemIndex(indexToFocus);
+        }
+    };
+    const onInputKeyDown = (event) => {
+        const focusedItem = focusedItemIndex ? list[focusedItemIndex] : list[0];
+        switch (event.key) {
+            // Select the first available option
+            case 'Enter':
+                if (!isOpen) {
+                    setIsOpen((pre) => !pre);
+                }
+                else if (isOpen) {
+                    onSelect(focusedItem);
+                }
+                break;
+            case 'Escape':
+                setIsOpen(false);
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                handleMenuArrowKeys(event.key);
+                break;
+        }
+    };
+    return { onInputKeyDown, focusedItemIndex };
+}
+exports.useSelectKeyboardNavigator = useSelectKeyboardNavigator;

package/lib/esm/CustomTextInput/CustomTextInput.d.ts

@@ -1,4 +1,5 @@
 import { TextInputProps } from '@patternfly/react-core';
+import React from 'react';
 interface IProps extends TextInputProps {
     className?: string;
     maxLength?: number;
@@ -6,6 +7,7 @@ interface IProps extends TextInputProps {
     isSpaceAllowed?: boolean;
     name?: string;
     isDisabled?: boolean;
+    onChange?: ((event: React.FormEvent<HTMLInputElement>, value: string) => void) | undefined;
 }
 export declare const CustomTextInput: (props: IProps) => JSX.Element;
 export {};

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

@@ -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"}
+{"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"}

package/lib/esm/CustomTextInput/CustomTextInput.js

@@ -17,7 +17,7 @@ export const CustomTextInput = (props) => {
     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"]);
     // To handle on input change
     const onTextInputChange = (value, event) => {
-        onChange(value, event);
+        onChange && onChange(event, value);
         event.preventDefault();
         return [];
     };
@@ -36,6 +36,8 @@ export const CustomTextInput = (props) => {
             else
                 return validated;
         }
+        if (isRequired && isEmpty(value))
+            return 'error';
     };
-    return (React.createElement(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 })));
+    return (React.createElement(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 })));
 };

package/lib/esm/DropDownList/DropDownList.js

@@ -48,7 +48,7 @@ function Dropdown(props) {
     };
     const isSelectedItem = props.isSelectedItem || isSelectedItemLocal;
     const getListItemClassNames = (downshift, item, itemIndex) => {
-        let toReturn = 'downshift-item pf-c-select__menu-item';
+        let toReturn = 'downshift-item pf-v5-c-select__menu-item';
         toReturn += item.additionalInfo ? ' pf-m-description' : '';
         toReturn += isSelectedItem(item) ? ' pf-m-selected' : '';
         toReturn += item.disabled ? ' pf-m-disabled' : '';
@@ -70,7 +70,7 @@ function Dropdown(props) {
         optionsToRender = props.paginate ? optionsToRender.slice(0, resultsShown) : optionsToRender;
         optionsToRender.filter((item) => !item.isNotSearchable).length === 0 &&
             props.emptyListLabel &&
-            listToRender.push(React.createElement("li", { key: "empty-label", className: "pf-u-p-sm" },
+            listToRender.push(React.createElement("li", { key: "empty-label", className: "pf-v5-u-p-sm" },
                 React.createElement(Trans, null, props.emptyListLabel)));
         listToRender.push(...map(optionsToRender, (item, index) => {
             const itemProps = item.isNonActionable
@@ -81,26 +81,26 @@ function Dropdown(props) {
                     disabled: item.disabled,
                     className: getListItemClassNames(downshift, item, index),
                 });
-            return (React.createElement("li", { className: item.actionItem ? 'pf-c-select__menu-wrapper' : '', role: "presentation", key: `${index}-${props.id}-${itemToString(item)}` },
+            return (React.createElement("li", { className: item.actionItem ? 'pf-v5-c-select__menu-wrapper' : '', role: "presentation", key: `${index}-${props.id}-${itemToString(item)}` },
                 item.isNonActionable ? (isEmpty(item.children) ? itemToString(item) : item.children) : null,
                 props.multiSelect && !item.isNotSelectable && !item.isNonActionable && (React.createElement("div", Object.assign({}, itemProps),
-                    React.createElement("div", { className: item.additionalInfo ? 'pf-c-select__menu-item-main' : '' },
-                        React.createElement("input", { disabled: item.disabled === true, className: "pf-c-check__input pf-u-mr-sm", checked: isSelectedItem(item), onChange: noop, type: "checkbox" }),
+                    React.createElement("div", { className: item.additionalInfo ? 'pf-v5-c-select__menu-item-main' : '' },
+                        React.createElement("input", { disabled: item.disabled === true, className: "pf-v5-c-check__input pf-v5-u-mr-sm", checked: isSelectedItem(item), onChange: noop, type: "checkbox" }),
                         isEmpty(item.children) ? itemToString(item) : item.children),
-                    item.additionalInfo && (React.createElement("div", { className: "pf-c-select__menu-item-description" }, item.additionalInfo)))),
+                    item.additionalInfo && (React.createElement("div", { className: "pf-v5-c-select__menu-item-description" }, item.additionalInfo)))),
                 !props.multiSelect && !item.isNonActionable && (React.createElement("button", Object.assign({}, itemProps, { type: "button", title: itemToString(item) }),
-                    React.createElement("div", { className: item.additionalInfo ? 'pf-c-select__menu-item-main' : '' },
+                    React.createElement("div", { className: item.additionalInfo ? 'pf-v5-c-select__menu-item-main' : '' },
                         isEmpty(item.children) ? itemToString(item) : item.children,
-                        isSelectedItem(item) && (React.createElement("span", { className: "pf-c-select__menu-item-icon" },
+                        isSelectedItem(item) && (React.createElement("span", { className: "pf-v5-c-select__menu-item-icon" },
                             React.createElement(CheckIcon, { "aria-hidden": true })))),
-                    item.additionalInfo && (React.createElement("div", { className: "pf-c-select__menu-item-description" }, item.additionalInfo)))),
+                    item.additionalInfo && (React.createElement("div", { className: "pf-v5-c-select__menu-item-description" }, item.additionalInfo)))),
                 item.actionItem ? React.cloneElement(item.actionItem, { disabled: item.disabled }) : null));
         }));
         shouldPaginate &&
             listToRender.push(...[
                 React.createElement("li", { key: "separator", className: "dropdown-divider", role: "separator" }),
                 React.createElement("li", { key: "pagination-item", className: "downshift-pagination-item" },
-                    React.createElement("button", { type: "button", onClick: (e) => onPaginatonButtonClick(e, downshift), className: "pf-c-button pf-m-link pf-m-block", disabled: props.isLoadingList },
+                    React.createElement("button", { type: "button", onClick: (e) => onPaginatonButtonClick(e, downshift), className: "pf-v5-c-button pf-m-link pf-m-block", disabled: props.isLoadingList },
                         React.createElement(Trans, null, props.paginationBtnText))),
             ]);
         return listToRender;

package/lib/esm/DropDownList/DropdownWrapper.js

@@ -9,11 +9,11 @@ export default function DropdownWrapper(props) {
             event.nativeEvent.preventDownshiftDefault = true;
         }
     };
-    return (React.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 },
+    return (React.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 },
         props.label && React.createElement("label", Object.assign({}, props.getLabelProps()), props.label),
         props.toggleMenuComponent,
         React.createElement("ul", Object.assign({}, props.getMenuProps({
             onBlur: onBlur,
-            className: `downshift-menu pf-c-select__menu ${props.hasTwoColumns ? 'column-selector-menu' : ''} ${props.isOpen ? 'open' : ''}`,
+            className: `downshift-menu pf-v5-c-select__menu ${props.hasTwoColumns ? 'column-selector-menu' : ''} ${props.isOpen ? 'open' : ''}`,
         })), props.children)));
 }

package/lib/esm/DropDownList/SearchableList.js

@@ -68,12 +68,12 @@ export default function SearchableList(props) {
         props.onInputBlur && props.onInputBlur(e);
     };
     const renderSearchableToggleButton = () => {
-        return (React.createElement("div", Object.assign({}, downshift.getComboboxProps({ className: 'pf-c-select__toggle pf-m-typeahead' })),
-            React.createElement("div", { className: "pf-c-select__toggle-wrapper" },
+        return (React.createElement("div", Object.assign({}, downshift.getComboboxProps({ className: 'pf-v5-c-select__toggle pf-m-typeahead' })),
+            React.createElement("div", { className: "pf-v5-c-select__toggle-wrapper" },
                 props.chipGroupComponent,
                 React.createElement("input", Object.assign({}, getInputProps({
                     placeholder: props.placeholder,
-                    className: `pf-c-form-control pf-c-select__toggle-typeahead`,
+                    className: `pf-v5-c-form-control pf-v5-c-select__toggle-typeahead`,
                     id: `${props.id}-downshift-search`,
                     'aria-invalid': props.isInValid,
                     'aria-required': props.required,
@@ -85,11 +85,11 @@ export default function SearchableList(props) {
             React.createElement(LoadingIndicator, { isInline: true, show: props.isLoadingList }),
             !isEmpty(downshift.inputValue) &&
                 !props.isLoadingList &&
-                (!props.isExportingPDF ? (React.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` },
+                (!props.isExportingPDF ? (React.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` },
                     React.createElement(TimesCircleIcon, null))) : null),
             !props.hideToggleButton && (React.createElement("button", Object.assign({ type: "button" }, getToggleButtonProps({
                 disabled: props.disabled || props.isLoadingList,
-                className: 'pf-c-button pf-c-select__toggle-button pf-m-plain',
+                className: 'pf-v5-c-button pf-v5-c-select__toggle-button pf-m-plain',
                 onClick: props.onMenuToggle ? () => props.onMenuToggle() : noop,
             })),
                 React.createElement(CaretDownIcon, null)))));

package/lib/esm/DropDownList/SelectList.js

@@ -16,7 +16,7 @@ export default function SelectList(props) {
         var _a;
         return (React.createElement("button", Object.assign({ type: "button" }, getToggleButtonProps({
             id: `${props.id}-toggle`,
-            className: `pf-c-select__toggle ${props.isInValid ? 'form-invalid' : ''}`,
+            className: `pf-v5-c-select__toggle ${props.isInValid ? 'form-invalid' : ''}`,
             disabled: props.disabled || props.isLoadingList,
             'aria-label': `${isOpen ? 'Close ' + props.title : 'Open ' + props.title}`,
             'aria-invalid': props.isInValid,
@@ -25,10 +25,10 @@ export default function SelectList(props) {
             'data-tracking-id': (_a = props['data-tracking-id']) !== null && _a !== void 0 ? _a : '',
             onClick: props.onMenuToggle ? () => props.onMenuToggle() : noop,
         })),
-            React.createElement("div", { className: "pf-c-select__toggle-wrapper" },
-                React.createElement("span", { className: "pf-c-select__toggle-text" }, itemToString(props.selectedItem) || (React.createElement("span", { className: "pf-c-select__placeholder-text" }, props.placeholder)))),
+            React.createElement("div", { className: "pf-v5-c-select__toggle-wrapper" },
+                React.createElement("span", { className: "pf-v5-c-select__toggle-text" }, itemToString(props.selectedItem) || (React.createElement("span", { className: "pf-v5-c-select__placeholder-text" }, props.placeholder)))),
             React.createElement(LoadingIndicator, { isInline: true, show: props.isLoadingList }),
-            !props.isLoadingList && (React.createElement("span", { className: "pf-c-select__toggle-arrow" },
+            !props.isLoadingList && (React.createElement("span", { className: "pf-v5-c-select__toggle-arrow" },
                 React.createElement(CaretDownIcon, null)))));
     };
     return (React.createElement(DropdownWrapper, { 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)));

package/lib/esm/DropDownList/dropdownList.css

@@ -2,11 +2,16 @@
     position: relative;
 }
 
-.downshift > .pf-c-select__toggle.form-invalid {
+.downshift input {
+    border: none;
+    padding: 6px;
+}
+
+.downshift > .pf-v5-c-select__toggle.form-invalid {
     border-bottom: 2px solid #c9190b;
 }
 
-.downshift > .pf-c-select__toggle.form-invalid[disabled] {
+.downshift > .pf-v5-c-select__toggle.form-invalid[disabled] {
     background-color: #ededed;
     border-color: #ededed;
 }
@@ -28,15 +33,15 @@
     border-top: 1px solid #e9ecef;
 }
 
-.downshift .pf-c-select__placeholder-text {
+.downshift .pf-v5-c-select__placeholder-text {
     color: #6a6e73;
 }
 
-.downshift .pf-c-select__menu-wrapper {
+.downshift .pf-v5-c-select__menu-wrapper {
     display: flex;
 }
 
-.downshift .pf-c-select__menu-wrapper:hover {
+.downshift .pf-v5-c-select__menu-wrapper:hover {
     background-color: rgb(240, 240, 240);
 }
 

package/lib/esm/ErrorBoundary/ErrorBoundaryFallbackComponent.d.ts.map

@@ -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"}
+{"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"}

package/lib/esm/ErrorBoundary/ErrorBoundaryFallbackComponent.js

@@ -1,4 +1,4 @@
-import { Bullseye, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateVariant, Title } from '@patternfly/react-core';
+import { Bullseye, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import dangerColor from '@patternfly/react-tokens/dist/js/global_danger_color_200';
 import infoColor from '@patternfly/react-tokens/dist/js/global_info_color_200';
@@ -25,9 +25,8 @@ function ErrorBoundaryFallbackComponent(props) {
     };
     return (React.createElement("div", { className: props.isPageLevelError ? 'container' : '' },
         React.createElement(Bullseye, null,
-            React.createElement(EmptyState, { variant: EmptyStateVariant.small },
-                React.createElement(EmptyStateIcon, { icon: ExclamationCircleIcon, color: props.isPageLevelError ? getIconColor() : warningColor.value }),
-                React.createElement(Title, { headingLevel: "h2", size: "lg" }, t(props.title)),
+            React.createElement(EmptyState, { variant: EmptyStateVariant.sm },
+                React.createElement(EmptyStateHeader, { titleText: React.createElement(React.Fragment, null, t(props.title)), icon: React.createElement(EmptyStateIcon, { icon: ExclamationCircleIcon, color: props.isPageLevelError ? getIconColor() : warningColor.value }), headingLevel: "h2" }),
                 React.createElement(EmptyStateBody, null, t(props.message))))));
 }
 ErrorBoundaryFallbackComponent.defaultProps = defaultProps;

package/lib/esm/InlineEdit/NewInlineEdit.js

@@ -116,7 +116,7 @@ function NewInlineEdit(props) {
                 !props.content && !isEditing ? renderEditButton() : null))),
         renderSaveCancel(),
         props.hideSaveCancel && isEditing && (React.createElement("span", { className: `
-                        ${props.charCount > props.charTotal ? 'char-count pf-u-danger-color-100' : 'char-count'}` }, props.charCount ? showCount : null)),
+                        ${props.charCount > props.charTotal ? 'char-count pf-v5-u-danger-color-100' : 'char-count'}` }, props.charCount ? showCount : null)),
         canShowContent && !props.usePreformattedTag && (React.createElement(React.Fragment, null,
             React.createElement("p", { id: props.inputId, style: { display: props.hideLabel ? 'inline' : 'block' } },
                 props.content,

package/lib/esm/InlineEdit/newInlineEdit.css

@@ -32,13 +32,13 @@
 .char-count {
     float: right;
     position: relative;
-    padding-right: var(--pf-global--spacer--4xl);
-    margin-right: var(--pf-global--spacer--lg);
+    padding-right: var(--pf-v5-global--spacer--4xl);
+    margin-right: var(--pf-v5-global--spacer--lg);
     font-size: 12px;
 }
 
 @media (max-width: 415px) {
     .char-count {
-        padding-right: var(--pf-global--spacer--2xl);
+        padding-right: var(--pf-v5-global--spacer--2xl);
     }
 }

package/lib/esm/LoadingDots/LoadingDots.js

@@ -13,7 +13,7 @@ function LoadingDots(props) {
                 React.createElement("span", null, ".")),
             React.createElement("p", { className: "sr-only" },
                 React.createElement(Trans, null, "Loading...")))),
-        props.message && props.show && React.createElement("p", { className: "pf-u-text-align-center pf-u-my-md" }, props.message)));
+        props.message && props.show && React.createElement("p", { className: "pf-v5-u-text-align-center pf-v5-u-my-md" }, props.message)));
 }
 LoadingDots.defaultProps = defaultProps;
 export { LoadingDots };

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

@@ -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"}
+{"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"}