@rh-support/components 2.1.23 → 2.1.26

package/lib/esm/MarkdownEditor/MarkdownEditor.js

@@ -11,7 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import './markdownEditor.css';
 import { parseCommentMarkdown } from '@cee-eng/ui-toolkit';
-import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, Flex, FlexItem, Spinner, Text, TextVariants, Toolbar, ToolbarGroup, ToolbarItem, } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, FlexItem, Spinner, Text, TextVariants, Toolbar, ToolbarGroup, ToolbarItem, } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownSeparator, DropdownToggle } from '@patternfly/react-core/deprecated';
 import CodeIcon from '@patternfly/react-icons/dist/js/icons/code-icon';
 import ImageIcon from '@patternfly/react-icons/dist/js/icons/image-icon';
 import LinkIcon from '@patternfly/react-icons/dist/js/icons/link-icon';
@@ -122,7 +123,7 @@ function MarkdownEditor(props) {
                 React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
                     React.createElement(FlexItem, null,
                         React.createElement(Text, { component: TextVariants.small }, file.fileName)),
-                    onFileDelete && (React.createElement(FlexItem, { className: "pf-u-ml-auto" },
+                    onFileDelete && (React.createElement(FlexItem, { className: "pf-v5-u-ml-auto" },
                         React.createElement(Button, { variant: ButtonVariant.plain, onClick: (event) => {
                                 onFileSelectToggle(false);
                                 onFileDelete(file);
@@ -360,7 +361,7 @@ function MarkdownEditor(props) {
     props.disabled && isPreview && setIsPreview(false);
     const disablePreviewButton = mdValue === '';
     return (React.createElement("div", { className: `markdown-editor-container ${props.className}`, id: props.id, "data-tracking-id": "md-editor-container", onDrop: onDrop, onPaste: onPaste },
-        React.createElement("div", { className: "toolbar-container border-bottom" }, !isPlainModeEnabled && (React.createElement(Toolbar, { className: "pf-l-flex" },
+        React.createElement("div", { className: "toolbar-container border-bottom" }, !isPlainModeEnabled && (React.createElement(Toolbar, { className: "pf-v5-l-flex" },
             React.createElement(ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
                 React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }, "B"),
                 React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "md-editor-toolbar-i", title: "Italic" }, "I"),
@@ -379,17 +380,17 @@ function MarkdownEditor(props) {
                     React.createElement(QuoteRightIcon, null)),
                 React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: code, title: "Code", "data-tracking-id": "md-editor-toolbar-code" },
                     React.createElement(CodeIcon, null)),
-                showFileSelectorInToolbar && (React.createElement(Dropdown, { onSelect: onFileSelectLocal, id: "md-editor-toolbar-file-selector", toggle: React.createElement(DropdownToggle, { onToggle: onFileSelectToggle, isDisabled: props.disabled || isPreview },
+                showFileSelectorInToolbar && (React.createElement(Dropdown, { onSelect: onFileSelectLocal, id: "md-editor-toolbar-file-selector", toggle: React.createElement(DropdownToggle, { onToggle: (_event, isOpen) => onFileSelectToggle(isOpen), isDisabled: props.disabled || isPreview },
                         React.createElement(ImageIcon, null)), dropdownItems: getFileSelectorList(), tabIndex: -1, isPlain: true, menuAppendTo: document.body, isOpen: isFileSelectorOpen, "data-tracking-id": "md-editor-toolbar-file-selector" }))),
             React.createElement(ToolbarItem, null,
-                React.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" },
+                React.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" },
                     React.createElement(Trans, null, "Markdown guidance")))))),
         React.createElement("div", { className: "markdown-content" }, !isPreview ? (React.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: cx('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows, style: { height: '313px' } }))) : (React.createElement("div", { className: "markdown-preview-placeholder", style: { height: '313px' } },
             React.createElement("div", { className: "markdown-preview", style: { maxHeight: '313px' } },
                 React.createElement("div", { dangerouslySetInnerHTML: {
                         __html: DOMPurify.sanitize(previewMDText(mdValue)),
                     } }))))),
-        React.createElement("div", null, props.showMarkdownPlainTextToggle && (React.createElement("div", { className: `markdown-toggle-toolbar pf-l-flex` },
+        React.createElement("div", null, props.showMarkdownPlainTextToggle && (React.createElement("div", { className: `markdown-toggle-toolbar pf-v5-l-flex` },
             React.createElement("span", { className: "markdown-toolbar-left-section" },
                 !isPlainModeEnabled && (React.createElement(Button, { className: "markdown-preview-btn", tabIndex: -1, variant: ButtonVariant.link, onClick: preview, title: "Show preview", "data-tracking-id": `md-preview-${isPreview ? 'hide' : 'show'}`, isDisabled: disablePreviewButton }, isPreview ? (React.createElement("span", null,
                     " ",
@@ -398,9 +399,9 @@ function MarkdownEditor(props) {
                     t(showPreviewText))))),
                 isUploadingFile && (React.createElement(React.Fragment, null,
                     React.createElement(Trans, null,
-                        React.createElement("small", { className: "pf-u-pl-md" },
+                        React.createElement("small", { className: "pf-v5-u-pl-md" },
                             React.createElement(Trans, null, "Uploading File"))),
-                    React.createElement(Spinner, { className: "pf-u-ml-sm", size: "md" }))),
+                    React.createElement(Spinner, { className: "pf-v5-u-ml-sm", size: "md" }))),
                 mdValue.length > props.minCharsForCounter && getCharCountText(mdValue)),
             React.createElement("span", null,
                 React.createElement(Button, { variant: "plain", className: isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: () => onModeChange(true), isDisabled: isPlainModeEnabled || isUploadingFile, "data-tracking-id": "md-editor-plaintext" },

package/lib/esm/MarkdownEditor/markdownEditor.css

@@ -25,7 +25,7 @@
     overflow: hidden;
 }
 
-.markdown-editor-container .pf-c-toolbar {
+.markdown-editor-container .pf-v5-c-toolbar {
     padding: 0.5rem;
 }
 

package/lib/esm/PaginationCompact/PaginationCompact.js

@@ -20,9 +20,9 @@ export function PaginationCompact({ maxPage, dataTrackingId, onPageChange }) {
         onPageChange(currentPage);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentPage]);
-    return (React.createElement("div", { className: "pagination-compact pf-c-pagination pf-m-compact pf-m-bottom pf-u-ml-auto" },
-        React.createElement("nav", { className: "pf-c-pagination__nav" },
-            React.createElement("div", { className: "pf-c-pagination__nav-control pf-m-prev" },
+    return (React.createElement("div", { className: "pagination-compact pf-v5-c-pagination pf-m-compact pf-m-bottom pf-v5-u-ml-auto" },
+        React.createElement("nav", { className: "pf-v5-c-pagination__nav" },
+            React.createElement("div", { className: "pf-v5-c-pagination__nav-control pf-m-prev" },
                 React.createElement(Button, { variant: ButtonVariant.plain, type: "button", "data-tracking-id": `${dataTrackingId}-previous`, onClick: onPreviousClick, isDisabled: currentPage === 1, "aria-label": "Go to previous page" },
                     React.createElement(AngleLeftIcon, null))),
             React.createElement("div", { style: {
@@ -31,7 +31,7 @@ export function PaginationCompact({ maxPage, dataTrackingId, onPageChange }) {
                 currentPage,
                 " of ",
                 maxPage),
-            React.createElement("div", { className: "pf-c-pagination__nav-control pf-m-next" },
+            React.createElement("div", { className: "pf-v5-c-pagination__nav-control pf-m-next" },
                 React.createElement(Button, { variant: ButtonVariant.plain, onClick: onNextClick, "data-tracking-id": `${dataTrackingId}-next`, isDisabled: currentPage === maxPage, type: "button", "aria-label": "Go to next page" },
                     React.createElement(AngleRightIcon, null))))));
 }

package/lib/esm/PaginationCompact/paginationCompact.css

@@ -1,4 +1,4 @@
-.pagination-compact.pf-c-pagination.pf-m-bottom {
+.pagination-compact.pf-v5-c-pagination.pf-m-bottom {
     padding: 0px;
     background: none;
     box-shadow: none;

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

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

package/lib/esm/PhoneInput/PhoneInput.js

@@ -1,5 +1,6 @@
 import './PhoneInput.scss';
-import { InputGroup, Select, SelectOption, SelectVariant, Spinner, TextInput } from '@patternfly/react-core';
+import { InputGroup, InputGroupItem, Spinner, TextInput } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
@@ -177,7 +178,7 @@ export function PhoneInput(props) {
     };
     const getOptions = (options) => {
         return options.map((country) => (React.createElement(SelectOption, { key: country.iso2, value: country },
-            React.createElement("div", { className: "pf-u-display-inline-flex" },
+            React.createElement("div", { className: "pf-v5-u-display-inline-flex" },
                 React.createElement("div", { className: `flag ${country.iso2}`, style: { marginRight: '8px' } }),
                 country.name,
                 " (+",
@@ -194,7 +195,7 @@ export function PhoneInput(props) {
         return getOptions(newOptions);
     };
     const placeholder = (React.createElement("div", { className: "phone-number-select-placeholder" },
-        React.createElement("div", { className: "pf-u-display-inline-flex" },
+        React.createElement("div", { className: "pf-v5-u-display-inline-flex" },
             React.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
             iso2.toUpperCase())));
     useEffect(() => {
@@ -252,8 +253,10 @@ export function PhoneInput(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [phoneValue]);
     return (React.createElement(InputGroup, { className: "phone-number-input" },
-        React.createElement("div", null,
-            React.createElement(Select, { variant: 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))),
-        React.createElement(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 }),
-        props.isLoading && React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl phone-spinner" })));
+        React.createElement(InputGroupItem, null,
+            React.createElement("div", null,
+                React.createElement(Select, { variant: 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)))),
+        React.createElement(InputGroupItem, { style: { width: '100%' } },
+            React.createElement(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 })),
+        props.isLoading && React.createElement(Spinner, { size: "lg", className: "pf-v5-u-ml-2xl pf-v5-u-mr-xl phone-spinner" })));
 }

package/lib/esm/PhoneInput/PhoneInput.scss

@@ -734,7 +734,7 @@
 }
 
 .phone-number-select {
-    .pf-c-select__menu {
+    .pf-v5-c-select__menu {
         min-width: 370px !important;
     }
 }

package/lib/esm/SupportFeedbackForm/SupportFeedbackModal.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { pcm } from '@cee-eng/hydrajs';
-import { Button, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, Icon, Modal, ModalVariant } from '@patternfly/react-core';
 import OutlinedFrownIcon from '@patternfly/react-icons/dist/js/icons/outlined-frown-icon';
 import OutlinedFrownOpenIcon from '@patternfly/react-icons/dist/js/icons/outlined-frown-open-icon';
 import OutlinedGrinIcon from '@patternfly/react-icons/dist/js/icons/outlined-grin-icon';
@@ -88,27 +88,27 @@ function SupportFeedbackModal(props) {
     const sentiments = [
         {
             id: 'very_unsatisfied',
-            icon: React.createElement(OutlinedFrownOpenIcon, { size: "lg" }),
+            icon: React.createElement(OutlinedFrownOpenIcon, null),
             label: 'Very Unsatisfied',
         },
         {
             id: 'unsatisfied',
-            icon: React.createElement(OutlinedFrownIcon, { size: "lg" }),
+            icon: React.createElement(OutlinedFrownIcon, null),
             label: 'Unsatisfied',
         },
         {
             id: 'neutral',
-            icon: React.createElement(OutlinedMehIcon, { size: "lg" }),
+            icon: React.createElement(OutlinedMehIcon, null),
             label: 'Neutral',
         },
         {
             id: 'satisfied',
-            icon: React.createElement(OutlinedSmileIcon, { size: "lg" }),
+            icon: React.createElement(OutlinedSmileIcon, null),
             label: 'Satisfied',
         },
         {
             id: 'very_satisfied',
-            icon: React.createElement(OutlinedGrinIcon, { size: "lg" }),
+            icon: React.createElement(OutlinedGrinIcon, null),
             label: 'Very Satisfied',
         },
     ];
@@ -116,22 +116,22 @@ function SupportFeedbackModal(props) {
     function renderModalBody() {
         return (React.createElement(React.Fragment, null,
             React.createElement("form", { className: "support-feedback-form", action: "", onSubmit: handleSubmit },
-                React.createElement("fieldset", { className: "form-group radios feedback-satisfaction pf-u-mb-sm", role: "radiogroup", "aria-labelledby": "feedback-satisfaction-label" },
-                    React.createElement("legend", { id: "feedback-satisfaction-label", className: "pf-u-mb-md" },
+                React.createElement("fieldset", { className: "form-group radios feedback-satisfaction pf-v5-u-mb-sm", role: "radiogroup", "aria-labelledby": "feedback-satisfaction-label" },
+                    React.createElement("legend", { id: "feedback-satisfaction-label", className: "pf-v5-u-mb-md" },
                         React.createElement(Trans, null, "How satisfied are you with customer support\u2019s web experience?"),
                         React.createElement("span", { className: "form-required", "aria-hidden": "true" }, "*"),
                         ' '),
                     React.createElement("div", { className: "satisfaction-values-wrapper" }, sentiments.map((sentiment) => {
-                        return (React.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 },
-                            React.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 }),
+                        return (React.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 },
+                            React.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 }),
                             ' ',
-                            sentiment.icon,
+                            React.createElement(Icon, { size: "lg" }, sentiment.icon),
                             React.createElement(Trans, null, sentiment.label)));
                     })),
                     isSubmitDisabled && (React.createElement("div", null,
                         React.createElement("p", { className: "form-instructions form-invalid" },
                             React.createElement(Trans, null, "Please select a value"))))),
-                React.createElement("div", { className: "form-group pf-u-mb-md" },
+                React.createElement("div", { className: "form-group pf-v5-u-mb-md" },
                     React.createElement("label", { htmlFor: "moreFeedback" },
                         React.createElement(Trans, null, "How can we improve?")),
                     React.createElement(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 })),
@@ -140,7 +140,7 @@ function SupportFeedbackModal(props) {
     }
     function returnModalAction() {
         return [
-            React.createElement(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') },
+            React.createElement(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') },
                 React.createElement(Trans, null, isFetching ? 'Sending feedback' : 'Send feedback')),
             React.createElement("button", { key: "cancel", onClick: handleModalToggle, className: "btn btn-app btn-link", "data-tracking-id": "app-feedback-cancel", "aria-label": "Cancel", disabled: isFetching },
                 React.createElement(Trans, null, "Cancel")),

package/lib/esm/Table/PFTable.d.ts

@@ -1,4 +1,5 @@
-import { IExtraData, IRow, IRowData, TableProps } from '@patternfly/react-table';
+import { IExtraData, IRow, IRowData } from '@patternfly/react-table';
+import { TableProps } from '@patternfly/react-table/deprecated';
 import { ReactNode } from 'react';
 interface IColumn {
     id: string;

package/lib/esm/Table/PFTable.d.ts.map

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

package/lib/esm/Table/PFTable.js

@@ -9,9 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Bullseye, EmptyState, EmptyStateIcon, EmptyStateVariant, Spinner, Title } from '@patternfly/react-core';
+import { Bullseye, EmptyState, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, Spinner, } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
-import { cellWidth, classNames, sortable, SortByDirection, Table, TableBody, TableHeader, TableVariant, Visibility, } from '@patternfly/react-table';
+import { cellWidth, classNames, sortable, SortByDirection, TableVariant, Visibility, } from '@patternfly/react-table';
+import { Table, TableBody, TableHeader } from '@patternfly/react-table/deprecated';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTableContext } from './TableProvider';
 const noop = () => { };
@@ -22,9 +23,8 @@ const emptyStateRowDefault = [
             {
                 props: { colSpan: 8 },
                 title: (React.createElement(Bullseye, null,
-                    React.createElement(EmptyState, { variant: EmptyStateVariant.small },
-                        React.createElement(EmptyStateIcon, { icon: SearchIcon }),
-                        React.createElement(Title, { headingLevel: "h2", size: "lg" }, "No results found")))),
+                    React.createElement(EmptyState, { variant: EmptyStateVariant.sm },
+                        React.createElement(EmptyStateHeader, { titleText: "No results found", icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h2" })))),
             },
         ],
     },
@@ -36,7 +36,7 @@ const loadingRowDefault = [
             {
                 props: { colSpan: 9 },
                 title: (React.createElement(Bullseye, { style: { minHeight: '350px' } },
-                    React.createElement(EmptyState, { variant: EmptyStateVariant.small },
+                    React.createElement(EmptyState, { variant: EmptyStateVariant.sm },
                         React.createElement(Spinner, { size: "xl" })))),
             },
         ],

package/lib/esm/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/esm/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/esm/TermsAndConditions/AcceptTermsModal.js

@@ -8,7 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Checkbox, Flex, FlexItem, Modal, ModalVariant, Select, SelectOption, } from '@patternfly/react-core';
+import { Button, ButtonVariant, Checkbox, Flex, FlexItem, Modal, ModalVariant } from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useFetch } from '../hooks';
@@ -70,24 +71,24 @@ export function AcceptTermsModal(props) {
         props.onConfirm(selectedTranslation.termsPdfId);
     };
     const onDropdownToggle = (toggle) => setisLangSelectorDropdownOpen(toggle);
-    return (React.createElement(Modal, { variant: 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.createElement(Modal, { variant: 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.createElement(Button, { key: "confirm", variant: 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.createElement(Trans, null, "Submit")),
             React.createElement(Button, { key: "cancel", isDisabled: props.isSubmitting || props.isDisabled, "data-tracking-id": `${props.dataTrackingId || props.eventCode}-terms-cancel`, variant: ButtonVariant.link, onClick: props.onModalClose },
                 React.createElement(Trans, null, "Cancel")),
         ] }, isFetching || !selectedTranslation ? (React.createElement("div", { style: { height: '100px' } },
         React.createElement(LoadingIndicator, null))) : (React.createElement(React.Fragment, null,
-        React.createElement("p", { className: "pf-u-mb-md" }, selectedTranslation.translatedDescription),
+        React.createElement("p", { className: "pf-v5-u-mb-md" }, selectedTranslation.translatedDescription),
         React.createElement("strong", null,
             React.createElement(Trans, null, "Download the agreement")),
-        React.createElement("p", { className: "pf-u-mb-md pf-u-mt-sm" }, selectedTranslation.translatedInstructions),
+        React.createElement("p", { className: "pf-v5-u-mb-md pf-v5-u-mt-sm" }, selectedTranslation.translatedInstructions),
         React.createElement(Flex, null,
             React.createElement(FlexItem, null,
-                React.createElement(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.createElement(SelectOption, { key: index, value: option }, getLocaleNameFromLocalCode(option)))))),
+                React.createElement(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.createElement(SelectOption, { key: index, value: option }, getLocaleNameFromLocalCode(option)))))),
             React.createElement(FlexItem, null,
                 React.createElement("a", { href: selectedTranslation.pdfDownloadUrl, "data-tracking-id": `${props.eventCode}-terms-download`, target: "_blank", rel: "noopener noreferrer" },
                     React.createElement(Trans, null, "Download")))),
-        React.createElement(Checkbox, { label: t('I have read and agree to the terms'), isChecked: termsAcked, onChange: (checked) => {
+        React.createElement(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/esm/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/esm/TextAreaResizable/TextAreaResizable.js

@@ -26,5 +26,5 @@ export const TextAreaResizable = (props) => {
         else
             return 'default';
     };
-    return (React.createElement(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.createElement(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" }));
 };

package/lib/esm/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/esm/TopContentSearch/TopContentSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentSearch.d.ts","sourceRoot":"","sources":["../../../src/TopContentSearch/TopContentSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,2DAA2D,CAAC;AAQ5F,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,UAAU,MAAM;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,2BAA2B,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACzD,cAAc,EAAE,eAAe,EAAE,CAAC;IAClC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAC3E;AAED,eAAO,MAAM,gBAAgB,eAAgB,MAAM,WASlD,CAAC;AAOF,wBAAgB,gBAAgB,CAAC,EAC7B,cAAmB,EACnB,2BAA6C,EAC7C,QAAQ,EACR,cAAc,EACd,mBAA2B,GAC9B,EAAE,MAAM,eA2GR"}
+{"version":3,"file":"TopContentSearch.d.ts","sourceRoot":"","sources":["../../../src/TopContentSearch/TopContentSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,2DAA2D,CAAC;AAQ5F,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,UAAU,MAAM;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,2BAA2B,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACzD,cAAc,EAAE,eAAe,EAAE,CAAC;IAClC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAC3E;AAED,eAAO,MAAM,gBAAgB,eAAgB,MAAM,WASlD,CAAC;AAOF,wBAAgB,gBAAgB,CAAC,EAC7B,cAAmB,EACnB,2BAA6C,EAC7C,QAAQ,EACR,cAAc,EACd,mBAA2B,GAC9B,EAAE,MAAM,eA8GR"}

package/lib/esm/TopContentSearch/TopContentSearch.js

@@ -56,8 +56,9 @@ export function TopContentSearch({ topContentData = [], topContentResultsWrapper
         dtmTrackEvent(searchWrapperRef, eventName, event);
     };
     const highlightSearchResults = useCallback((searchTerm) => {
-        const d = topContentResultsWrapperRef.current;
-        const markInstance = new Mark(d);
+        // highlight search term present in contents only. Contents are present within <dd> tag
+        const contentElements = topContentResultsWrapperRef.current.querySelectorAll('dd.pf-v5-c-accordion__expandable-content');
+        const markInstance = new Mark(contentElements);
         markInstance.unmark({
             done: () => {
                 if (isEmpty(searchTerm))
@@ -104,8 +105,8 @@ export function TopContentSearch({ topContentData = [], topContentResultsWrapper
         setSearchText(value);
         debounceSearch(value);
     };
-    return (React.createElement("div", { className: "top-content-search-wrapper pf-u-p-md", ref: searchWrapperRef },
-        React.createElement("label", { htmlFor: "top-content-search-input", className: "pf-u-mr-md top-content-search-label" },
+    return (React.createElement("div", { className: "top-content-search-wrapper pf-v5-u-p-md", ref: searchWrapperRef },
+        React.createElement("label", { htmlFor: "top-content-search-input", className: "pf-v5-u-mr-md top-content-search-label" },
             React.createElement(Trans, null, "Filter results:")),
-        React.createElement(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.createElement(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 })));
 }

package/lib/esm/helperFunctions/errorMessage.js

@@ -6,12 +6,12 @@ import React from 'react';
 import { SupportFeedbackForm } from '../SupportFeedbackForm';
 const defaultTitle = "Sorry, we're experiencing an error";
 const errorMessageButtonLabel = 'contact us';
-const defaultErrorMessage = (React.createElement("p", { className: "pf-u-mb-0" },
+const defaultErrorMessage = (React.createElement("p", { className: "pf-v5-u-mb-0" },
     "Try refreshing the page. Please ",
     React.createElement(SupportFeedbackForm, { isInline: true, buttonLabel: errorMessageButtonLabel }),
     " if the problem persists.",
     React.createElement("br", null),
-    React.createElement(Button, { variant: "link", component: "a", href: "https://status.redhat.com/", "data-tracking-id": "redirect-status-portal-button", target: "_blank", icon: React.createElement(ExternalLinkAltIcon, { className: "status-portal-button-icon" }), iconPosition: "right", className: "pf-u-pl-0", isInline: true, "aria-label": "View status page" }, "View status page"),
+    React.createElement(Button, { variant: "link", component: "a", href: "https://status.redhat.com/", "data-tracking-id": "redirect-status-portal-button", target: "_blank", icon: React.createElement(ExternalLinkAltIcon, { 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/esm/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/esm/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/esm/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/esm/hooks/index.js

@@ -11,3 +11,4 @@ export * from './useForceUpdate';
 export * from './useLRUCache';
 export * from './useBreakpoint';
 export * from './useOnScreen';
+export * from './useSelectKeyboardNavigator';

package/lib/esm/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/esm/hooks/useBreakpoint.js

@@ -8,6 +8,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] = useState({});

package/lib/esm/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/esm/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/esm/hooks/useSelectKeyboardNavigator.js

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+export function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }) {
+    const [focusedItemIndex, setFocusedItemIndex] = 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 };
+}