@ansible/ansible-ui-framework 0.0.469 → 0.0.471

package/cjs/PageActions/PageActions.d.ts

@@ -23,5 +23,6 @@ export declare function PageActions<T extends object>(props: {
     position?: DropdownPosition;
     /** Indicates if only to show the icon when not collapsed */
     iconOnly?: boolean;
+    onOpen?: (open: boolean) => void;
 }): JSX.Element;
 export declare function isHiddenAction<T extends object>(action: IPageAction<T>, selectedItem: T | undefined): boolean;

package/cjs/PageActions/PageActions.js

@@ -43,7 +43,7 @@ function PageActions(props) {
             return visibleActions;
         return (_a = visibleActions === null || visibleActions === void 0 ? void 0 : visibleActions.filter(function (action) { return !isPinnedAction(action); })) !== null && _a !== void 0 ? _a : [];
     }, [collapseButtons, visibleActions]);
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: (!iconOnly && selectedItem !== undefined) || (selectedItems && selectedItems.length > 0) }, { children: [pinnedActions !== undefined && pinnedActions.length > 0 && ((0, jsx_runtime_1.jsx)(PagePinnedActions_1.PagePinnedActions, __assign({}, props, { actions: pinnedActions }))), dropdownActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true, style: { display: 'flex', justifyContent: 'flex-end' } }, { children: (0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, __assign({}, props, { actions: dropdownActions })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: (!iconOnly && selectedItem !== undefined) || (selectedItems && selectedItems.length > 0) }, { children: [pinnedActions !== undefined && pinnedActions.length > 0 && ((0, jsx_runtime_1.jsx)(PagePinnedActions_1.PagePinnedActions, __assign({}, props, { actions: pinnedActions }))), dropdownActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true, style: { display: 'flex', justifyContent: 'flex-end' } }, { children: (0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, __assign({}, props, { actions: dropdownActions, onOpen: props.onOpen })) })))] })));
 }
 exports.PageActions = PageActions;
 function isPinnedAction(action) {

package/cjs/PageActions/PageDropdownAction.d.ts

@@ -11,5 +11,6 @@ export declare function PageDropdownAction<T extends object>(props: {
     selectedItem?: T;
     position?: DropdownPosition;
     iconOnly?: boolean;
+    onOpen?: (open: boolean) => void;
 }): JSX.Element;
 export declare function filterActionSeperators<T extends object>(actions: IPageAction<T>[]): IPageAction<T>[];

package/cjs/PageActions/PageDropdownAction.js

@@ -53,6 +53,10 @@ function PageDropdownAction(props) {
     var hasIcons = (0, react_1.useMemo)(function () {
         return actions.find(function (action) { return action.type !== PageActionType_1.PageActionType.seperator && action.icon !== undefined; }) !== undefined;
     }, [actions]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props, dropdownOpen);
+    }, [dropdownOpen, props]);
     if (actions.length === 0)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     var Icon = icon;

package/cjs/PageTable/PageTable.d.ts

@@ -42,9 +42,11 @@ export type PageTableProps<T extends object> = {
     disableTableView?: boolean;
     disableListView?: boolean;
     disableCardView?: boolean;
+    disableColumnManagement?: boolean;
     defaultTableView?: PageTableViewType;
     disableBodyPadding?: boolean;
     defaultSubtitle?: ReactNode;
+    expandedRow?: (item: T) => ReactNode;
 };
 /**
  * The PageTable component is used for adding a table to a page.

package/cjs/PageTable/PageTable.js

@@ -72,11 +72,12 @@ function PageTable(props) {
     // const { disableBodyPadding } = props
     var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
     var _b = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
-    var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
-        undefined;
+    var showSelect = props.showSelect ||
+        (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
+            undefined;
     var hasTableViewType = !props.disableTableView;
     var hasListViewType = !props.disableListView;
-    // const hasCardViewType = !props.disableCardView
+    // const hasCardViewType = !props.disableCardView;
     var _c = __read((0, react_1.useState)(function () {
         var _a;
         return (_a = props.defaultTableView) !== null && _a !== void 0 ? _a : (hasTableViewType
@@ -110,7 +111,7 @@ function PageTable(props) {
 }
 exports.PageTable = PageTable;
 function PageTableView(props) {
-    var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll;
+    var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll, expandedRow = props.expandedRow;
     var t = props.t;
     t = t ? t : function (t) { return t; };
     var showSelect = props.showSelect ||
@@ -141,10 +142,10 @@ function PageTableView(props) {
                             ? new Array(perPage).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Td, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }) }, index)); })
                             : pageItems === undefined
                                 ? new Array(Math.min(perPage, itemCount)).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [showSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, {}), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: tableColumns.length }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }))] }, index)); })
-                                : pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] })))] })));
+                                : pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] })))] })));
 }
 function TableHead(props) {
-    var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect;
+    var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
     var settings = (0, Settings_1.useSettings)();
     var getColumnSort = (0, react_1.useCallback)(function (columnIndex, column) {
         if (!column.sort)
@@ -164,78 +165,82 @@ function TableHead(props) {
             columnIndex: columnIndex,
         };
     }, [setSort, setSortDirection, sort, sortDirection]);
-    return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [(showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, style: {
-                        width: '0%',
-                        backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-                    }, stickyMinWidth: "45px", hasRightBorder: props.scrollLeft }, { children: "\u00A0" }))), columns
+    return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ style: {
+                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+            } }, { children: [expandedRow && (0, jsx_runtime_1.jsx)(react_table_1.Th, { style: { padding: 0, backgroundColor: 'inherit' } }), (showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft, style: { backgroundColor: 'inherit' } }, { children: "\u00A0" }))), columns
                     .filter(function (column) { return column.enabled !== false; })
                     .map(function (column, index) {
-                    var _a;
-                    return ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ modifier: "fitContent", style: {
-                            minWidth: (_a = column.minWidth) !== null && _a !== void 0 ? _a : 0,
-                            maxWidth: column.maxWidth,
-                            backgroundColor: settings.theme === 'dark'
-                                ? 'var(--pf-global--BackgroundColor--300)'
-                                : undefined,
-                            width: column.isIdColumn ? '0%' : undefined,
-                        }, sort: getColumnSort(index, column) }, { children: column.header }), column.header));
-                }), itemActions !== undefined && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ style: {
-                        paddingRight: 8,
-                        paddingLeft: 0,
-                        width: '0%',
+                    return ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ sort: getColumnSort(index, column), style: {
+                            minWidth: column.minWidth === 0
+                                ? '1%'
+                                : column.minWidth !== undefined
+                                    ? column.minWidth
+                                    : undefined,
+                            maxWidth: column.maxWidth !== undefined ? column.maxWidth : undefined,
+                            backgroundColor: 'inherit',
+                        } }, { children: column.header }), column.header));
+                }), itemActions !== undefined && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
                         right: 0,
-                        backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-                    }, isStickyColumn: true, stickyMinWidth: "45px", className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] }) }));
+                        padding: 0,
+                        paddingRight: 0,
+                        backgroundColor: 'inherit',
+                        zIndex: 302,
+                    }, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] })) }));
 }
 function TableRow(props) {
-    var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, unselectAll = props.unselectAll, isItemSelected = props.isItemSelected, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect;
-    var md = (0, useBreakPoint_1.useBreakpoint)('xl');
-    return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, 
-        // style={{ backgroundColor: theme === ThemeE.Dark ? 'transparent' : undefined }}
-        isRowSelected: isItemSelected, style: { boxShadow: 'unset' } }, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { select: isItemSelected !== undefined
-                    ? {
-                        onSelect: function (_event, isSelecting) {
-                            if (isSelecting) {
-                                selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+    var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, unselectAll = props.unselectAll, isItemSelected = props.isItemSelected, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
+    var _a = __read((0, react_1.useState)(false), 2), expanded = _a[0], setExpanded = _a[1];
+    var settings = (0, Settings_1.useSettings)();
+    var expandedContent = expandedRow === null || expandedRow === void 0 ? void 0 : expandedRow(item);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, isRowSelected: expanded, style: {
+                    boxShadow: 'unset',
+                    borderBottom: expanded ? 'unset' : undefined,
+                } }, { children: [expandedRow && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { expand: expandedContent
+                            ? {
+                                rowIndex: rowIndex,
+                                isExpanded: expanded,
+                                onToggle: function () { return setExpanded(function (expanded) { return !expanded; }); },
                             }
-                            else {
-                                unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
+                            : undefined, style: { paddingLeft: expandedContent ? 8 : 4 } })), showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { select: isItemSelected !== undefined
+                            ? {
+                                onSelect: function (_event, isSelecting) {
+                                    if (isSelecting) {
+                                        selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+                                    }
+                                    else {
+                                        unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
+                                    }
+                                },
+                                isSelected: isItemSelected,
                             }
-                        },
-                        isSelected: isItemSelected,
-                    }
-                    : undefined, style: { width: '0%', paddingLeft: md ? undefined : 20, paddingRight: 16 }, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
-                    rowIndex: rowIndex,
-                    onSelect: function () {
-                        unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
-                        selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
-                        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
-                    },
-                    isSelected: isItemSelected !== null && isItemSelected !== void 0 ? isItemSelected : false,
-                    // disable: !isRepoSelectable(repo),
-                    variant: 'radio',
-                }, style: {
-                    width: '0%',
-                    paddingLeft: md ? undefined : 20,
-                    position: 'sticky',
-                    left: 0,
-                    background: 'var(--pf-c-table__sticky-column--BackgroundColor)',
-                    zIndex: 1,
-                } })), (0, jsx_runtime_1.jsx)(TableCells, { rowIndex: rowIndex, columns: columns, item: item, rowActions: rowActions, scrollLeft: props.scrollLeft, scrollRight: props.scrollRight })] })));
+                            : undefined, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
+                            rowIndex: rowIndex,
+                            onSelect: function () {
+                                unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
+                                selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+                                onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
+                            },
+                            isSelected: isItemSelected !== null && isItemSelected !== void 0 ? isItemSelected : false,
+                            variant: 'radio',
+                        }, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), (0, jsx_runtime_1.jsx)(TableCells, { columns: columns, item: item, rowActions: rowActions, scrollLeft: props.scrollLeft, scrollRight: props.scrollRight })] })), expandedRow && expanded && expandedContent && ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, isExpanded: expanded, style: { boxShadow: 'unset' } }, { children: [(0, jsx_runtime_1.jsx)(react_table_1.Td, {}), showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, { isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft }), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: columns.filter(function (column) { return column.enabled !== false; }).length, style: { paddingBottom: settings.tableLayout === 'compact' ? 12 : 24, paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_table_1.CollapseColumn, { children: expandedContent }) })), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
+                            right: 0,
+                            padding: 0,
+                            paddingRight: 0,
+                        }, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] })))] }));
 }
 function TableCells(props) {
-    var columns = props.columns, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex;
+    var columns = props.columns, item = props.item, rowActions = props.rowActions;
+    var _a = __read((0, react_1.useState)(false), 2), actionsExpanded = _a[0], setActionsExpanded = _a[1];
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [columns
                 .filter(function (column) { return column.enabled !== false; })
                 .map(function (column) {
-                return ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ dataLabel: column.header, modifier: "nowrap" }, { children: (0, jsx_runtime_1.jsx)(TableColumnCell, { item: item, column: column }) }), column.header));
-            }), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ style: {
-                    zIndex: 100 - rowIndex,
-                    paddingRight: 8,
-                    paddingLeft: 8,
-                    width: '0%',
+                return ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ dataLabel: column.header, modifier: "nowrap", style: { width: column.minWidth === 0 ? '0%' : undefined } }, { children: (0, jsx_runtime_1.jsx)(TableColumnCell, { item: item, column: column }) }), column.header));
+            }), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
                     right: 0,
-                }, isStickyColumn: true, stickyMinWidth: "0px", className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true }) })))] }));
+                    padding: 0,
+                    paddingRight: 0,
+                    zIndex: actionsExpanded ? 301 : undefined,
+                }, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true, onOpen: setActionsExpanded }) })))] }));
 }
 var TableColumnSomething;
 (function (TableColumnSomething) {

package/cjs/PageTable/PageToolbar.d.ts

@@ -56,5 +56,9 @@ export type PagetableToolbarProps<T extends object> = {
     showSelect?: boolean;
     viewType: PageTableViewType;
     setViewType: (viewType: PageTableViewType) => void;
+    disableTableView?: boolean;
+    disableListView?: boolean;
+    disableCardView?: boolean;
+    disableColumnManagement?: boolean;
 };
 export declare function PageTableToolbar<T extends object>(props: PagetableToolbarProps<T>): JSX.Element;

package/cjs/PageTable/PageToolbar.js

@@ -92,6 +92,13 @@ function PageTableToolbar(props) {
         return toolbarFilters ? ((toolbarFilters === null || toolbarFilters === void 0 ? void 0 : toolbarFilters.length) > 0 ? toolbarFilters[0].key : '') : '';
     }), 2), selectedFilter = _b[0], setSeletedFilter = _b[1];
     var settings = (0, Settings_1.useSettings)();
+    var viewTypeCount = 0;
+    if (!props.disableTableView)
+        viewTypeCount++;
+    if (!props.disableCardView)
+        viewTypeCount++;
+    if (!props.disableListView)
+        viewTypeCount++;
     if (!showToolbar) {
         return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
     }
@@ -159,7 +166,13 @@ function PageTableToolbar(props) {
                                             return newState;
                                         });
                                     }, showToolbarItem: false }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), filter.label));
-                            })] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) })), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1 } }), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [openColumnModal && viewType === 'table' && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroup, __assign({ "aria-label": "table view toggle" }, { children: [PageTableViewType_1.PageTableViewTypeE.Table, PageTableViewType_1.PageTableViewTypeE.List, PageTableViewType_1.PageTableViewTypeE.Cards].map(function (vt) {
+                            })] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) })), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1 } }), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [!props.disableColumnManagement && openColumnModal && viewType === 'table' && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) })), viewTypeCount > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroup, __assign({ "aria-label": "table view toggle" }, { children: [
+                                    !props.disableTableView && PageTableViewType_1.PageTableViewTypeE.Table,
+                                    !props.disableListView && PageTableViewType_1.PageTableViewTypeE.List,
+                                    !props.disableCardView && PageTableViewType_1.PageTableViewTypeE.Cards,
+                                ]
+                                    .filter(function (i) { return i; })
+                                    .map(function (vt) {
                                     switch (vt) {
                                         case PageTableViewType_1.PageTableViewTypeE.Cards:
                                             return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Card view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.ThLargeIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.Cards, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.Cards); }, "aria-label": "card view" }) }), vt));
@@ -168,7 +181,7 @@ function PageTableToolbar(props) {
                                         case PageTableViewType_1.PageTableViewTypeE.Table:
                                             return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Table view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.TableIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.Table, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.Table); }, "aria-label": "table view" }) }), vt));
                                     }
-                                }) })) })] })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ visibility: { default: 'hidden', '2xl': 'visible' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.top, isCompact: true, itemCount: itemCount, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: { marginTop: -8, marginBottom: -8 } }) }))] }) })));
+                                }) })) }))] })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ visibility: { default: 'hidden', '2xl': 'visible' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.top, isCompact: true, itemCount: itemCount, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: { marginTop: -8, marginBottom: -8 } }) }))] }) })));
 }
 exports.PageTableToolbar = PageTableToolbar;
 function ToolbarFilterInput(props) {

package/cjs/useSelectDialog.js

@@ -76,6 +76,6 @@ function SelectDialog(props) {
                         flexDirection: 'column',
                         maxHeight: 400,
                         overflow: 'hidden',
-                    } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations" }, view, { onSelect: function () { return null; } })) })) }))] })));
+                    } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations" }, view, { onSelect: function () { return null; }, disableCardView: true, disableListView: true, disableColumnManagement: true })) })) }))] })));
 }
 exports.SelectDialog = SelectDialog;

package/cjs/useSelectMultipleDialog.js

@@ -51,7 +51,7 @@ function SelectMultipleDialog(props) {
                 flexDirection: 'column',
                 maxHeight: 500,
                 overflow: 'hidden',
-            } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters }, view, { emptyStateTitle: (_a = props.emptyStateTitle) !== null && _a !== void 0 ? _a : translations.noItemsFound, errorStateTitle: (_b = props.errorStateTitle) !== null && _b !== void 0 ? _b : translations.errorText, showSelect: true })) })) })));
+            } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters }, view, { emptyStateTitle: (_a = props.emptyStateTitle) !== null && _a !== void 0 ? _a : translations.noItemsFound, errorStateTitle: (_b = props.errorStateTitle) !== null && _b !== void 0 ? _b : translations.errorText, showSelect: true, disableCardView: true, disableListView: true, disableColumnManagement: true })) })) })));
 }
 exports.SelectMultipleDialog = SelectMultipleDialog;
 function useSelectMultipleDialog() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.469",
+  "version": "0.0.471",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",