@rh-support/components 2.5.25 → 2.5.26

package/lib/esm/Table/PFTable.js

@@ -9,58 +9,46 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Bullseye, EmptyState, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, Spinner, } from '@patternfly/react-core';
+import { Bullseye, EmptyState, EmptyStateVariant, Spinner } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
-import { cellWidth, classNames, sortable, SortByDirection, TableVariant, Visibility, } from '@patternfly/react-table';
-import { Table, TableBody, TableHeader } from '@patternfly/react-table/deprecated';
+import { ActionsColumn, SortByDirection, Table, TableVariant, Tbody, Td, Th, Thead, Tr, } from '@patternfly/react-table';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTableContext } from './TableProvider';
-const noop = () => { };
-const emptyStateRowDefault = [
-    {
-        heightAuto: true,
-        cells: [
-            {
-                props: { colSpan: 8 },
-                title: (React.createElement(Bullseye, null,
-                    React.createElement(EmptyState, { variant: EmptyStateVariant.sm },
-                        React.createElement(EmptyStateHeader, { titleText: "No results found", icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h2" })))),
-            },
-        ],
-    },
-];
-const loadingRowDefault = [
-    {
-        heightAuto: true,
-        cells: [
-            {
-                props: { colSpan: 9 },
-                title: (React.createElement(Bullseye, { style: { minHeight: '350px' } },
-                    React.createElement(EmptyState, { variant: EmptyStateVariant.sm },
-                        React.createElement(Spinner, { size: "xl" })))),
-            },
-        ],
-    },
-];
+const emptyStateRowDefault = {
+    heightAuto: true,
+    colSpan: 8,
+    content: (React.createElement(Bullseye, null,
+        React.createElement(EmptyState, { headingLevel: "h2", icon: SearchIcon, titleText: "No results found", variant: EmptyStateVariant.sm }))),
+};
+const loadingRowDefault = {
+    heightAuto: true,
+    colSpan: 9,
+    content: (React.createElement(Bullseye, { style: { minHeight: '350px' } },
+        React.createElement(EmptyState, { variant: EmptyStateVariant.sm },
+            React.createElement(Spinner, { size: "xl" })))),
+};
 const defaultSortMethod = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
 export const defaultTableSortMethod = defaultSortMethod;
 function PFTable(props) {
-    const { className, pagination, onRowClick, onSortChange, onSelect, emptyStateRow = emptyStateRowDefault, loadingRow = loadingRowDefault, isLoading, keepPageNumberOnDataChange, sortInfo } = props, restProps = __rest(props, ["className", "pagination", "onRowClick", "onSortChange", "onSelect", "emptyStateRow", "loadingRow", "isLoading", "keepPageNumberOnDataChange", "sortInfo"]);
+    const { className, pagination, onRowClick, onSortChange, onSelect, emptyStateRow = emptyStateRowDefault, loadingRow = loadingRowDefault, isLoading, keepPageNumberOnDataChange, sortInfo, actionResolver, actions, areActionsDisabled, variant = TableVariant.compact } = props, restProps = __rest(props, ["className", "pagination", "onRowClick", "onSortChange", "onSelect", "emptyStateRow", "loadingRow", "isLoading", "keepPageNumberOnDataChange", "sortInfo", "actionResolver", "actions", "areActionsDisabled", "variant"]);
     const { columns, data, currentPage, perPage, setSelectedPage } = useTableContext();
     const [sortBy, setSortBy] = useState();
-    const [pfColumns, setPFColumns] = useState([]);
-    const [pfRows, setPFRows] = useState([]);
+    const [processedData, setProcessedData] = useState([]);
+    const [selectedRows, setSelectedRows] = useState(new Set());
+    const [allRowsSelected, setAllRowsSelected] = useState(false);
     const isSelectColumnVisible = onSelect && (data || []).length > 0;
-    const onSort = (event, index, direction) => {
+    const onSort = (event, columnIndex, sortByDirection) => {
         // if onselect option is passed we need to decrease index by 1 to account for the checkbox column
-        const actualIndex = isSelectColumnVisible ? index - 1 : index;
-        if (sortBy && sortBy.index === index && sortBy.direction === direction)
+        const actualIndex = isSelectColumnVisible ? columnIndex - 1 : columnIndex;
+        if (sortBy && sortBy.index === columnIndex && sortBy.direction === sortByDirection)
             return;
         setSortBy({
-            index,
-            direction,
+            index: columnIndex,
+            direction: sortByDirection,
         });
-        onSortChange ? onSortChange(columns[actualIndex], direction) : setSortedRows(actualIndex, direction);
+        onSortChange
+            ? onSortChange(columns[actualIndex], sortByDirection)
+            : setSortedRows(actualIndex, sortByDirection);
     };
     useEffect(() => {
         if (!sortInfo)
@@ -72,7 +60,7 @@ function PFTable(props) {
             return;
         setSortBy({
             index: actualIndex,
-            direction,
+            direction: direction,
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sortInfo]);
@@ -80,100 +68,123 @@ function PFTable(props) {
         if (onSortChange)
             return;
         const sortMethod = columns[index].sortMethod || defaultSortMethod;
-        const sortedRows = (rows || pfRows).sort((a, b) => sortMethod(a.cells[index], b.cells[index], direction));
-        const sortedData = direction === SortByDirection.asc ? sortedRows : sortedRows.reverse();
-        setPFRows(sortedData);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pfRows, columns]);
-    useEffect(() => {
-        const mappedPFColumns = columns.map((item) => {
-            const { title, sortable: isSortable, show, cellWidth: width } = item;
-            // tslint:disable-next-line:no-object-literal-type-assertion
-            const mappedColumn = {};
-            mappedColumn['title'] = title || '';
-            if (isSortable) {
-                mappedColumn['transforms'] = [];
-                mappedColumn['transforms'].push(sortable);
-            }
-            if (width) {
-                mappedColumn['transforms'] = mappedColumn['transforms'] || [];
-                mappedColumn['transforms'].push(cellWidth(width));
-            }
-            if (show !== undefined && !show) {
-                mappedColumn['columnTransforms'] = [classNames(Visibility.hidden)];
-            }
-            return mappedColumn;
+        const dataToSort = rows || processedData;
+        const sortedRows = [...dataToSort].sort((a, b) => {
+            const aValue = columns[index].accessor ? columns[index].accessor(a) : a;
+            const bValue = columns[index].accessor ? columns[index].accessor(b) : b;
+            return sortMethod(aValue, bValue, direction);
         });
-        setPFColumns(mappedPFColumns);
-    }, [columns]);
+        const sortedData = direction === SortByDirection.asc ? sortedRows : sortedRows.reverse();
+        setProcessedData(sortedData);
+    }, [processedData, columns, onSortChange]);
     useEffect(() => {
-        const rows = data.map((row, index) => {
-            const a = [];
-            columns.forEach((item) => {
-                const { accessor, cell, rowProps = noop } = item;
-                if (cell) {
-                    a.push({ title: cell(row, index), props: Object.assign({}, rowProps(row)) });
-                }
-                else if (accessor) {
-                    const rowData = accessor(row);
-                    a.push(rowData);
-                }
-            });
-            return { cells: a };
-        });
-        setPFRows(rows);
+        setProcessedData([...data]);
         pagination && !keepPageNumberOnDataChange && setSelectedPage(1);
         if (sortBy && sortBy.direction && sortBy.index !== undefined && (data || []).length > 0) {
             const actualIndex = isSelectColumnVisible ? sortBy.index - 1 : sortBy.index;
-            setSortedRows(actualIndex, sortBy.direction, rows);
+            setSortedRows(actualIndex, sortBy.direction, data);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data]);
-    const getVisibleRows = () => pagination ? pfRows.slice((currentPage - 1) * perPage, currentPage * perPage) : pfRows;
-    const onRowSelect = (ev, isSelected, rowindex, rowdata, extradata) => {
-        // currently there seems to be a bug in PFTable if the data is not changed
-        // then this function is called with the previous state
-        // so we call all the setState functions with the function syntax.
-        if (rowindex === -1) {
-            setPFRows((currentRows) => currentRows.map((row) => {
-                row.selected = isSelected;
-                return row;
-            }));
+    const getVisibleRows = () => pagination ? processedData.slice((currentPage - 1) * perPage, currentPage * perPage) : processedData;
+    const onRowSelect = (event, isSelected, rowIndex) => {
+        if (rowIndex === -1) {
+            // Select all rows
+            setAllRowsSelected(isSelected);
+            if (isSelected) {
+                setSelectedRows(new Set(processedData.map((_, index) => index)));
+            }
+            else {
+                setSelectedRows(new Set());
+            }
         }
         else {
-            setPFRows((currentRows) => {
-                const updatedRows = [...currentRows];
-                updatedRows[rowindex].selected = isSelected;
-                return updatedRows;
-            });
-        }
-        onSelect && onSelect(ev, isSelected, rowindex, rowdata, extradata);
-    };
-    const getTableRows = () => {
-        if (!isLoading && emptyStateRow && (data || []).length < 1) {
-            return emptyStateRow;
-        }
-        else if (isLoading && loadingRow) {
-            return loadingRow;
+            const newSelectedRows = new Set(selectedRows);
+            if (isSelected) {
+                newSelectedRows.add(rowIndex);
+            }
+            else {
+                newSelectedRows.delete(rowIndex);
+            }
+            setSelectedRows(newSelectedRows);
+            setAllRowsSelected(newSelectedRows.size === processedData.length);
         }
-        else {
-            return getVisibleRows();
+        if (onSelect) {
+            const rowData = rowIndex === -1 ? null : processedData[rowIndex];
+            onSelect(event, isSelected, rowIndex, rowData, null);
         }
     };
-    const conditionalProps = Object.assign({}, (isSelectColumnVisible ? { onSelect: onRowSelect } : undefined));
-    const getSortBy = () => {
-        var _a;
-        if (sortBy) {
-            return {
-                direction: sortBy === null || sortBy === void 0 ? void 0 : sortBy.direction,
-                index: onSelect && data.length < 1 ? ((_a = sortBy.index) !== null && _a !== void 0 ? _a : 1) - 1 : sortBy.index,
-            };
+    const renderTableHeader = () => {
+        const visibleColumns = columns.filter((column) => column.show !== false);
+        return (React.createElement(Thead, null,
+            React.createElement(Tr, null,
+                isSelectColumnVisible && (React.createElement(Th, { select: {
+                        onSelect: (event, isSelected) => onRowSelect(event, isSelected, -1),
+                        isSelected: allRowsSelected,
+                    } })),
+                visibleColumns.map((column, columnIndex) => {
+                    const actualIndex = isSelectColumnVisible ? columnIndex + 1 : columnIndex;
+                    const sortParams = column.sortable && sortBy
+                        ? {
+                            sortBy,
+                            onSort,
+                            columnIndex: actualIndex,
+                        }
+                        : undefined;
+                    return (React.createElement(Th, { key: column.id, sort: sortParams, width: column.cellWidth, style: column.show === false ? { display: 'none' } : undefined }, column.title));
+                }),
+                (actionResolver || actions) && React.createElement(Th, null))));
+    };
+    const renderTableBody = () => {
+        const visibleRows = getVisibleRows();
+        const visibleColumns = columns.filter((column) => column.show !== false);
+        // Handle empty state
+        if (!isLoading && (data || []).length < 1) {
+            return (React.createElement(Tbody, null,
+                React.createElement(Tr, null,
+                    React.createElement(Td, { colSpan: emptyStateRow.colSpan }, emptyStateRow.content))));
+        }
+        // Handle loading state
+        if (isLoading) {
+            return (React.createElement(Tbody, null,
+                React.createElement(Tr, null,
+                    React.createElement(Td, { colSpan: loadingRow.colSpan }, loadingRow.content))));
         }
+        return (React.createElement(Tbody, null, visibleRows.map((row, rowIndex) => {
+            var _a;
+            const globalRowIndex = pagination ? (currentPage - 1) * perPage + rowIndex : rowIndex;
+            const rowProps = ((_a = visibleColumns[0]) === null || _a === void 0 ? void 0 : _a.rowProps) ? visibleColumns[0].rowProps(row) : {};
+            const isRowSelected = selectedRows.has(globalRowIndex);
+            return (React.createElement(Tr, Object.assign({ key: globalRowIndex }, rowProps, { isRowSelected: isRowSelected, onRowClick: onRowClick ? (event) => onRowClick(event, row, rowProps) : undefined }),
+                isSelectColumnVisible && (React.createElement(Td, { select: {
+                        onSelect: (event, isSelected) => onRowSelect(event, isSelected, globalRowIndex),
+                        isSelected: isRowSelected,
+                        rowIndex: globalRowIndex,
+                    } })),
+                visibleColumns.map((column, columnIndex) => {
+                    let cellContent;
+                    if (column.cell) {
+                        cellContent = column.cell(row, globalRowIndex);
+                    }
+                    else if (column.accessor) {
+                        cellContent = column.accessor(row);
+                    }
+                    else {
+                        cellContent = '';
+                    }
+                    return (React.createElement(Td, { key: `${globalRowIndex}-${columnIndex}`, dataLabel: typeof column.title === 'string' ? column.title : column.id, style: column.show === false ? { display: 'none' } : undefined }, cellContent));
+                }),
+                (actionResolver || actions) && (React.createElement(Td, { isActionCell: true },
+                    actionResolver && (React.createElement(ActionsColumn, { items: actionResolver(row, { rowIndex: globalRowIndex }), isDisabled: areActionsDisabled
+                            ? areActionsDisabled(row, { rowIndex: globalRowIndex })
+                            : false })),
+                    actions && (React.createElement(ActionsColumn, { items: actions, isDisabled: areActionsDisabled
+                            ? areActionsDisabled(row, { rowIndex: globalRowIndex })
+                            : false }))))));
+        })));
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Table, Object.assign({}, restProps, conditionalProps, { variant: 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.createElement(TableHeader, null),
-            React.createElement(TableBody, { onRowClick: onRowClick ? onRowClick : noop }))));
+    return (React.createElement(Table, Object.assign({}, restProps, { variant: variant, className: className || '' }),
+        renderTableHeader(),
+        renderTableBody()));
 }
 export { PFTable };

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

@@ -1 +1 @@
-{"version":3,"file":"TagsSelector.d.ts","sourceRoot":"","sources":["../../../src/TagsSelector/TagsSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAmB3B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,UAAU,MAAM;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,EAAE,EACF,SAAS,EACT,YAAiB,EACjB,QAAgB,GACnB,EAAE,MAAM,qBA2JR"}
+{"version":3,"file":"TagsSelector.d.ts","sourceRoot":"","sources":["../../../src/TagsSelector/TagsSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAmB3B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,UAAU,MAAM;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,EAAE,EACF,SAAS,EACT,YAAiB,EACjB,QAAgB,GACnB,EAAE,MAAM,qBAkKR"}

package/lib/esm/TagsSelector/TagsSelector.js

@@ -1,5 +1,5 @@
 import './tagSelector.css';
-import { Button, Chip, ChipGroup, Flex, FlexItem, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, Label, LabelGroup, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { isEmpty } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -55,20 +55,18 @@ export function TagsSelector({ tagOptions, onChange, placeholder, id, typeahead,
         onChange && onChange(selected);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selected]);
-    const selectedChipGroup = (React.createElement(ChipGroup, { numChips: 2 }, selected.map((label) => (React.createElement(Chip, { key: label.id, onClick: (e) => {
+    const selectedChipGroup = (React.createElement(LabelGroup, { numLabels: 2 }, selected.map((label) => (React.createElement(Label, { variant: "outline", key: label.id, onClose: (e) => {
             e.stopPropagation();
             onSelect(label);
         } }, label.tagName)))));
-    const toggle = (toggleRef) => (React.createElement(MenuToggle, Object.assign({ ref: toggleRef, onClick: onToggleClick, className: `pf-v5-u-flex-grow-1 tags-selector-menu-toggle ${isEmpty(tagOptions) || disabled ? 'menu-is-disabld' : ''}`, isExpanded: isOpen, onKeyDown: onInputKeyDown, isDisabled: isEmpty(tagOptions) || disabled }, (typeahead && { variant: 'typeahead' }), { id: id, isFullWidth: true }), typeahead ? (React.createElement(TextInputGroup, { isPlain: true },
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, Object.assign({ ref: toggleRef, onClick: onToggleClick, className: `pf-v6-u-flex-grow-1 tags-selector-menu-toggle ${isEmpty(tagOptions) || disabled ? 'menu-is-disabld' : ''}`, isExpanded: isOpen, onKeyDown: onInputKeyDown, isDisabled: isEmpty(tagOptions) || disabled }, (typeahead && { variant: 'typeahead' }), { id: id, isFullWidth: true }), typeahead ? (React.createElement(TextInputGroup, { isPlain: true },
         React.createElement(TextInputGroupMain, { id: "tags-selector-search-input", value: query, onClick: onToggleClick, onChange: (e, v) => setQuery(v), onKeyDown: onInputKeyDown, innerRef: textInputRef, isExpanded: isOpen, placeholder: placeholder || t('Search for a tag') }, selectedChipGroup),
-        React.createElement(TextInputGroupUtilities, null, selected.length > 0 && (React.createElement(Button, { variant: "plain", onClick: handleClear, "aria-label": "clear-all-tags" },
-            React.createElement(TimesIcon, { "aria-hidden": true })))))) : (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' }, alignItems: { default: 'alignItemsCenter' } },
+        React.createElement(TextInputGroupUtilities, null, selected.length > 0 && (React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: handleClear, "aria-label": "clear-all-tags" }))))) : (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' }, alignItems: { default: 'alignItemsCenter' } },
         React.createElement(FlexItem, null,
             selectedChipGroup,
-            React.createElement("span", { className: `${!isEmpty(selected) && 'pf-v5-u-ml-md'}` }, placeholder || React.createElement(Trans, null, "Select a tag"))),
+            React.createElement("span", { className: `${!isEmpty(selected) && 'pf-v6-u-ml-md'}` }, placeholder || React.createElement(Trans, null, "Select a tag"))),
         !isEmpty(selected) && (React.createElement(FlexItem, null,
-            React.createElement(Button, { variant: "plain", onClick: handleClear, "aria-label": "clear-all-tags" },
-                React.createElement(TimesIcon, { "aria-hidden": true }))))))));
+            React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: handleClear, "aria-label": "clear-all-tags" })))))));
     return (React.createElement(Select, { isOpen: isOpen, selected: selected, toggle: toggle, onSelect: (_, selection) => onSelect(selection), isScrollable: true, onOpenChange: () => setIsOpen(false), popperProps: { direction: 'down', enableFlip: false }, id: "tag-selector" },
         React.createElement(SelectList, { isAriaMultiselectable: true }, selectOptions.map((tag, index) => (React.createElement(SelectOption, { key: tag.id, value: tag, isFocused: index === focusedItemIndex, isSelected: selected.some((t) => t.id === tag.id) }, tag.tagName))))));
 }

package/lib/esm/TagsSelector/tagSelector.css

@@ -2,11 +2,11 @@
     z-index: 89;
 }
 
-.tags-selector-menu-toggle .pf-v5-c-menu-toggle__text {
+.tags-selector-menu-toggle .pf-v6-c-menu-toggle__text {
     width: 100%;
 }
 
-.tags-selector-menu-toggle .pf-v5-c-menu-toggle__controls {
+.tags-selector-menu-toggle .pf-v6-c-menu-toggle__controls {
     padding-left: 0;
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"AcceptTermsModal.d.ts","sourceRoot":"","sources":["../../../src/TermsAndConditions/AcceptTermsModal.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,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,qBAyI7C"}
+{"version":3,"file":"AcceptTermsModal.d.ts","sourceRoot":"","sources":["../../../src/TermsAndConditions/AcceptTermsModal.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,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,qBAuI7C"}

package/lib/esm/TermsAndConditions/AcceptTermsModal.js

@@ -8,12 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Checkbox, Flex, FlexItem, Modal, ModalVariant } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+import { Button, ButtonVariant, Checkbox, Flex, FlexItem, Modal, ModalFooter, ModalVariant, } from '@patternfly/react-core';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useFetch } from '../hooks';
 import { LoadingIndicator } from '../LoadingIndicator';
+import { SingleSelectDropdown } from '../SingleSelectDropdown';
 const getLocaleNameFromLocalCode = (localeCode) => {
     if ('Intl' in window && 'DisplayNames' in Intl) {
         try {
@@ -33,7 +33,6 @@ export function AcceptTermsModal(props) {
     const { request, isFetching } = useFetch(publicApi.terms.getRequiredTerms);
     const [termsAcked, setTermsAcked] = useState(false);
     const [allTranslations, setAllTranslations] = useState({});
-    const [isLangSelectorDropdownOpen, setisLangSelectorDropdownOpen] = useState(false);
     const [selectedTranslation, setSelectedTranslation] = useState(null);
     const { t } = useTranslation();
     useEffect(() => {
@@ -60,9 +59,8 @@ export function AcceptTermsModal(props) {
         fetchTerms();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const onLangChange = (event, lang) => {
-        setSelectedTranslation(allTranslations[lang]);
-        setisLangSelectorDropdownOpen(false);
+    const onLangChange = (selectedOption) => {
+        setSelectedTranslation(allTranslations[selectedOption.value]);
     };
     const handleModalToggle = () => {
         !props.isDisabled && props.onModalClose();
@@ -70,25 +68,33 @@ export function AcceptTermsModal(props) {
     const onSubmitClick = () => {
         props.onConfirm(selectedTranslation.termsPdfId);
     };
-    const onDropdownToggle = (toggle) => setisLangSelectorDropdownOpen(toggle);
-    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: [
+    const getSelectedDropdownOption = {
+        label: getLocaleNameFromLocalCode(selectedTranslation === null || selectedTranslation === void 0 ? void 0 : selectedTranslation.localeCode),
+        value: selectedTranslation === null || selectedTranslation === void 0 ? void 0 : selectedTranslation.localeCode,
+    };
+    const getDropdownOptions = () => Object.keys(allTranslations).map((localeCode) => ({
+        label: getLocaleNameFromLocalCode(localeCode),
+        value: localeCode,
+    }));
+    return (React.createElement(Modal, { variant: ModalVariant.medium, className: "pf-v6-u-font-size-sm", title: isFetching || !selectedTranslation ? 'Remote Access Rider' : selectedTranslation.translatedTermsName, isOpen: props.isModalOpen, onClose: handleModalToggle },
+        isFetching || !selectedTranslation ? (React.createElement("div", { style: { height: '100px' } },
+            React.createElement(LoadingIndicator, null))) : (React.createElement(React.Fragment, null,
+            React.createElement("p", { className: "pf-v6-u-mb-md" }, selectedTranslation.translatedDescription),
+            React.createElement("strong", null,
+                React.createElement(Trans, null, "Download the agreement")),
+            React.createElement("p", { className: "pf-v6-u-mb-md pf-v6-u-mt-sm" }, selectedTranslation.translatedInstructions),
+            React.createElement(Flex, null,
+                React.createElement(FlexItem, null,
+                    React.createElement(SingleSelectDropdown, { ariaLabel: t('Select language'), id: "terms-language-selector", className: "pf-v6-u-mb-md", selected: getSelectedDropdownOption, options: getDropdownOptions(), onSelect: onLangChange, isDisabled: props.isSubmitting, placeholder: t('Select an option that best fits') })),
+                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: (_event, checked) => {
+                    setTermsAcked(checked);
+                }, "aria-label": t('I have read and agree to the terms'), id: "agree-terms", name: "agree-terms" }))),
+        React.createElement(ModalFooter, null,
             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-v5-u-mb-md" }, selectedTranslation.translatedDescription),
-        React.createElement("strong", null,
-            React.createElement(Trans, null, "Download the agreement")),
-        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-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: (_event, checked) => {
-                setTermsAcked(checked);
-            }, "aria-label": t('I have read and agree to the terms'), id: "agree-terms", name: "agree-terms" })))));
+                React.createElement(Trans, null, "Cancel")))));
 }

package/lib/esm/ToastNotification/toastNotification.css

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

package/lib/esm/TopContentSearch/TopContentSearch.js

@@ -104,5 +104,5 @@ export function TopContentSearch({ topContentData = [], topContentResultsWrapper
     return (React.createElement("div", { className: className, ref: searchWrapperRef },
         React.createElement("label", { htmlFor: "top-content-search-input" },
             React.createElement(Trans, null, "Filter results:")),
-        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, isDisabled: isDisabled })));
+        React.createElement(SearchInput, { id: "top-content-search-input", className: "top-content-search-input pf-v6-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, isDisabled: isDisabled })));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/TypeaheadDropdown/TypeaheadDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EAWb,MAAM,wBAAwB,CAAC;AAOhC,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,OAAO,EAAE,+BAA+B,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAE5B,QAAQ,EAAE,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAuB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,wBAAwB,EAAE,CAAC;CACvC;AAED,MAAM,MAAM,+BAA+B,GAAG,wBAAwB,GAAG,uBAAuB,CAAC;AACjG,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AA2BvD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,qBA8V/D"}
+{"version":3,"file":"TypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/TypeaheadDropdown/TypeaheadDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EAWb,MAAM,wBAAwB,CAAC;AAOhC,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,OAAO,EAAE,+BAA+B,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAE5B,QAAQ,EAAE,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAuB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,wBAAwB,EAAE,CAAC;CACvC;AAED,MAAM,MAAM,+BAA+B,GAAG,wBAAwB,GAAG,uBAAuB,CAAC;AACjG,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AA2BvD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,qBA6V/D"}

package/lib/esm/TypeaheadDropdown/TypeaheadDropdown.js

@@ -161,8 +161,7 @@ export function TypeaheadDropdown(props) {
                         !!onChipRemoved && onChipRemoved(option);
                     } }, option.label)))))),
                 React.createElement(TextInputGroupUtilities, null,
-                    query && hasClearButton && !isDisabled && (React.createElement(Button, { "aria-label": "Clear input value", variant: "plain", onClick: handleClearQuery, isDisabled: isDisabled },
-                        React.createElement(TimesCircleIcon, null))),
+                    query && hasClearButton && !isDisabled && (React.createElement(Button, { icon: React.createElement(TimesCircleIcon, null), "aria-label": "Clear input value", variant: "plain", onClick: handleClearQuery, isDisabled: isDisabled })),
                     isLoading && React.createElement(Spinner, { size: "sm" })))));
     };
     /**
@@ -209,7 +208,7 @@ export function TypeaheadDropdown(props) {
             // look the same and be able to function with keyboard accessibility,
             // the selection option text needs to be wrapped in a span with the pf link color class.
             return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: focusedItemIndex === index, isSelected: false, onClick: onHandleLoadMore },
-                React.createElement("span", { className: "pf-v5-u-link-color" }, "View more")));
+                React.createElement("span", { className: "pf-v6-u-link-color" }, "View more")));
         }
         else if (option.value === ADD_NEW_OPTION_VALUE) {
             return (React.createElement(SelectOption, { key: option.value, value: option.value, isFocused: false, isSelected: false }, !!getCreateNewText ? getCreateNewText(query) : `${option.label}: ${query}`));

package/lib/esm/ValueChangedIcon/ValueChangedIcon.js

@@ -46,5 +46,5 @@ export function ValueChangedIcon(props) {
         return null;
     }
     return (React.createElement(Tooltip, { content: tooltipContent, position: props.tooltipPosition || TooltipPosition.top },
-        React.createElement(LightbulbIcon, null)));
+        React.createElement(LightbulbIcon, { className: "cursor-pointer pf-v6-u-text-color-status-custom" })));
 }

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-v5-u-mb-0" },
+const defaultErrorMessage = (React.createElement("p", { className: "pf-v6-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-v5-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-v6-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-v5-global--icon--FontSize--sm);
+    font-size: var(--pf-t--global--icon--size--font--xs);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "2.5.25",
+    "version": "2.5.26",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -46,9 +46,9 @@
     "peerDependencies": {
         "@cee-eng/hydrajs": "4.18.57",
         "@cee-eng/ui-toolkit": "1.1.8",
-        "@patternfly/patternfly": "5.4.2",
-        "@patternfly/react-core": "5.4.2",
-        "@patternfly/react-table": "5.4.2",
+        "@patternfly/patternfly": "6.2.1",
+        "@patternfly/react-core": "6.2.1",
+        "@patternfly/react-table": "6.2.1",
         "dompurify": "^2.2.6",
         "js-worker-search": "^1.4.1",
         "lazysizes": "^5.3.2",
@@ -62,14 +62,14 @@
     "dependencies": {
         "@cee-eng/hydrajs": "4.18.57",
         "@cee-eng/ui-toolkit": "1.1.8",
-        "@patternfly/patternfly": "5.4.2",
-        "@patternfly/react-core": "5.4.2",
-        "@patternfly/react-icons": "5.1.1",
-        "@patternfly/react-table": "5.4.2",
-        "@patternfly/react-tokens": "^5.4.0",
+        "@patternfly/patternfly": "6.2.1",
+        "@patternfly/react-core": "6.2.1",
+        "@patternfly/react-icons": "6.2.1",
+        "@patternfly/react-table": "6.2.1",
+        "@patternfly/react-tokens": "6.2.1",
         "@rh-support/types": "2.0.5",
-        "@rh-support/user-permissions": "2.5.17",
-        "@rh-support/utils": "2.5.16",
+        "@rh-support/user-permissions": "2.5.18",
+        "@rh-support/utils": "2.5.17",
         "dompurify": "^2.2.6",
         "js-worker-search": "^1.4.1",
         "lazysizes": "^5.3.2",
@@ -106,5 +106,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "1784fd712681254600c3586c364804051ddfd8a7"
+    "gitHead": "4e42960cc47766cce9312ba7e236d2ede9facd33"
 }