@ansible/ansible-ui-framework 0.0.231 → 0.0.233

package/cjs/BulkActionDialog.js

@@ -190,7 +190,7 @@ function BulkActionDialog(props) {
                         maxHeight: 500,
                         overflow: 'hidden',
                         borderTop: 'thin solid var(--pf-global--BorderColor--100)',
-                    } }, { children: !isSubmitting && !isSubmited ? ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items" }, "items")) : ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: props.items.length, tableColumns: __spreadArray(__spreadArray([], __read(props.errorColumns), false), [
+                    } }, { children: !isSubmitting && !isSubmited ? ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items", disableBodyPadding: true }, "items")) : ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: props.items.length, tableColumns: __spreadArray(__spreadArray([], __read(props.errorColumns), false), [
                             {
                                 header: 'Status',
                                 cell: function (item) {
@@ -212,6 +212,6 @@ function BulkActionDialog(props) {
                                         } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}), "\u00A0 ", statuses === null || statuses === void 0 ? void 0 : statuses[key]] })));
                                 },
                             },
-                        ], false), keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status")) })), props.confirmText && ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: !isSubmitting && !isSubmited }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, marginTop: 0, marginBottom: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) })) })))] })) })));
+                        ], false), keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items", disableBodyPadding: true }, "status")) })), props.confirmText && ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: !isSubmitting && !isSubmited }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, marginTop: 0, marginBottom: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) })) })))] })) })));
 }
 exports.BulkActionDialog = BulkActionDialog;

package/cjs/PageBody.js

@@ -21,7 +21,7 @@ var _1 = require(".");
 var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
 var Settings_1 = require("./Settings");
 function PageBody(props) {
-    var usePadding = (0, _1.useBreakpoint)('xxl');
+    var usePadding = (0, _1.useBreakpoint)('xxl') && props.disablePadding !== true;
     var settings = (0, Settings_1.useSettings)();
     var t = (0, react_i18next_1.useTranslation)().t;
     return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: t('Error') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {

package/cjs/PageDataList.js

@@ -21,7 +21,6 @@ var PageBody_1 = require("./PageBody");
 var PageHeader_1 = require("./PageHeader");
 var PageLayout_1 = require("./PageLayout");
 var PagePagination_1 = require("./PagePagination");
-var PageToolbar_1 = require("./PageToolbar");
 var Settings_1 = require("./Settings");
 var TypedActions_1 = require("./TypedActions");
 function DataListPage(props) {
@@ -46,7 +45,7 @@ function PageDataList(props) {
     if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
         return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageToolbar_1.PageTableToolbar, __assign({}, props, { disableBorderBottom: true })), (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "Simple data list example" }, { children: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.DataListItem, __assign({ "aria-labelledby": "simple-item1" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DataListItemRow, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.DataListCheck, { "aria-labelledby": "check-action-item1", name: "check-action-check1", isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onClick: function () {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "Simple data list example" }, { children: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.DataListItem, __assign({ "aria-labelledby": "simple-item1" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DataListItemRow, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.DataListCheck, { "aria-labelledby": "check-action-item1", name: "check-action-check1", isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onClick: function () {
                                         if (isSelected === null || isSelected === void 0 ? void 0 : isSelected(item)) {
                                             selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
                                         }

package/cjs/PageHeader.js

@@ -74,7 +74,7 @@ function PageHeader(props) {
                     borderTop: settings.theme !== 'light' && settings.borders
                         ? 'thin solid var(--pf-global--BorderColor--100)'
                         : undefined,
-                    borderBottom: settings.borders
+                    borderBottom: !props.disableBorderBottom && settings.borders
                         ? 'thin solid var(--pf-global--BorderColor--100)'
                         : undefined,
                     backgroundColor: 'var(--pf-global--BackgroundColor--100)',
@@ -84,7 +84,7 @@ function PageHeader(props) {
                     borderTop: !navigation && settings.theme !== 'light' && settings.borders
                         ? 'thin solid var(--pf-global--BorderColor--100)'
                         : undefined,
-                    borderBottom: settings.borders
+                    borderBottom: !props.disableBorderBottom && settings.borders
                         ? 'thin solid var(--pf-global--BorderColor--100)'
                         : undefined,
                     backgroundColor: settings.theme === 'dark'

package/cjs/PageTable.js

@@ -37,20 +37,46 @@ var react_icons_1 = require("@patternfly/react-icons");
 var react_table_1 = require("@patternfly/react-table");
 var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
 var react_1 = require("react");
+var Scrollable_1 = require("./components/Scrollable");
 var useBreakPoint_1 = require("./components/useBreakPoint");
 var PageBody_1 = require("./PageBody");
 var PageColumnModal_1 = require("./PageColumnModal");
 var PageHeader_1 = require("./PageHeader");
 var PageLayout_1 = require("./PageLayout");
 var PagePagination_1 = require("./PagePagination");
+var PageTableCards_1 = require("./PageTableCards");
+var PageTableList_1 = require("./PageTableList");
+var PageTableViewType_1 = require("./PageTableViewType");
 var PageToolbar_1 = require("./PageToolbar");
 var Settings_1 = require("./Settings");
 var TypedActions_1 = require("./TypedActions");
 function TablePage(props) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: (0, jsx_runtime_1.jsx)(PageTable, __assign({}, props)) })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageTable, __assign({}, props))] }));
 }
 exports.TablePage = TablePage;
 function PageTable(props) {
+    var _a;
+    var disableBodyPadding = props.disableBodyPadding;
+    disableBodyPadding = true;
+    var toolbarActions = props.toolbarActions;
+    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 TypedActions_1.TypedActionType.bulk === toolbarAction.type; })) !==
+        undefined;
+    var hasTableViewType = !props.disableTableView;
+    var hasListViewType = !props.disableListView;
+    // const hasCardViewType = !props.disableCardView
+    var _c = __read((0, react_1.useState)(function () {
+        var _a;
+        return (_a = props.defaultTableView) !== null && _a !== void 0 ? _a : (hasTableViewType
+            ? PageTableViewType_1.PageTableViewTypeE.Table
+            : hasListViewType
+                ? PageTableViewType_1.PageTableViewTypeE.List
+                : PageTableViewType_1.PageTableViewTypeE.Cards);
+    }), 2), viewType = _c[0], setViewType = _c[1];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageToolbar_1.PageTableToolbar, __assign({}, props, { openColumnModal: openColumnModal, showSelect: showSelect, viewType: viewType, setViewType: setViewType })), viewType === PageTableViewType_1.PageTableViewTypeE.Table && ((0, jsx_runtime_1.jsx)(PageBody_1.PageBody, __assign({ disablePadding: disableBodyPadding }, { children: (0, jsx_runtime_1.jsx)(PageTableView, __assign({}, props, { tableColumns: managedColumns })) }))), viewType === PageTableViewType_1.PageTableViewTypeE.List && ((0, jsx_runtime_1.jsx)(PageBody_1.PageBody, __assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableList_1.PageTableList, __assign({}, props, { showSelect: showSelect })) }) }))), viewType === PageTableViewType_1.PageTableViewTypeE.Cards && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableCards_1.PageTableCards, __assign({}, props, { showSelect: showSelect })) })), (!props.autoHidePagination || ((_a = props.itemCount) !== null && _a !== void 0 ? _a : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))), columnModal] }));
+}
+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, filters = props.filters, error = props.error, onSelect = props.onSelect, unselectAll = props.unselectAll;
     var t = props.t;
     t = t ? t : function (t) { return t; };
@@ -78,7 +104,6 @@ function PageTable(props) {
     (0, resize_observer_1.default)(containerRef, function () { return updateScroll(containerRef.current); });
     (0, react_1.useEffect)(function () { return updateScroll(containerRef.current); }, [updateScroll]);
     var settings = (0, Settings_1.useSettings)();
-    var _b = (0, PageColumnModal_1.useColumnModal)(tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
     if (error) {
         return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
                 backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
@@ -90,13 +115,12 @@ function PageTable(props) {
     if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
         return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [columnModal, (0, jsx_runtime_1.jsx)(PageToolbar_1.PageTableToolbar, __assign({}, props, { openColumnModal: openColumnModal, showSelect: showSelect })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "pf-c-scroll-inner-wrapper", style: { height: '100%' }, ref: containerRef, onScroll: onScroll }, { children: [(0, jsx_runtime_1.jsxs)(react_table_1.TableComposable, __assign({ "aria-label": "Simple table", variant: props.compact ? 'compact' : settings.tableLayout === 'compact' ? 'compact' : undefined, gridBreakPoint: "", isStickyHeader: true }, { children: [itemCount === undefined ? ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Th, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}) }) }) })) : ((0, jsx_runtime_1.jsx)(TableHead, __assign({}, props, { showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, tableColumns: managedColumns, onSelect: onSelect }))), (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: itemCount === undefined
-                                    ? 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: managedColumns.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: managedColumns, 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.jsx)("div", __assign({ style: { margin: 'auto' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, { 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') })) }))] }) })))] })), (!props.autoHidePagination || (itemCount !== null && itemCount !== void 0 ? itemCount : 0) > perPage) && (0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "pf-c-scroll-inner-wrapper", style: { height: '100%', marginBottom: -1 }, ref: containerRef, onScroll: onScroll }, { children: [(0, jsx_runtime_1.jsxs)(react_table_1.TableComposable, __assign({ "aria-label": "Simple table", variant: props.compact ? 'compact' : settings.tableLayout === 'compact' ? 'compact' : undefined, gridBreakPoint: "", isStickyHeader: true }, { children: [itemCount === undefined ? ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Th, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}) }) }) })) : ((0, jsx_runtime_1.jsx)(TableHead, __assign({}, props, { showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, tableColumns: tableColumns, onSelect: onSelect }))), (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: itemCount === undefined
+                            ? 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.jsx)("div", __assign({ style: { margin: 'auto' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, { 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') })) }))] }) })))] })));
 }
-exports.PageTable = PageTable;
 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 settings = (0, Settings_1.useSettings)();

package/cjs/PageTableCard.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColumnsToTableCardFn = exports.PageTableCard = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-empty-function */
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var Details_1 = require("./components/Details");
+var IconWrapper_1 = require("./components/IconWrapper");
+var TypedActions_1 = require("./TypedActions");
+function PageTableCard(props) {
+    var _a;
+    var item = props.item, itemToCardFn = props.itemToCardFn, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, itemActions = props.itemActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultCardSubtitle;
+    var card = (0, react_1.useMemo)(function () { return itemToCardFn(item); }, [item, itemToCardFn]);
+    var isItemSelected = !!(isSelected === null || isSelected === void 0 ? void 0 : isSelected(item));
+    var onSelectClick = (0, react_1.useCallback)(function () {
+        if (isSelected === null || isSelected === void 0 ? void 0 : isSelected(item)) {
+            unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
+        }
+        else {
+            selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+        }
+    }, [isSelected, item, selectItem, unselectItem]);
+    var showDropdown = itemActions !== undefined && itemActions.length > 0;
+    var showActions = showSelect || showDropdown;
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, __assign({ id: card.id, isFlat: true, isLarge: true, isRounded: true, isSelectable: isItemSelected, isSelected: isItemSelected, style: {
+            transition: 'box-shadow 0.25s',
+            cursor: 'default',
+        } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true, style: { width: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [card.icon && ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                                                display: 'flex',
+                                                height: 40,
+                                                width: 40,
+                                                marginTop: -20,
+                                                marginBottom: -20,
+                                                marginRight: 12,
+                                                alignItems: 'center',
+                                                justifyItems: 'stretch',
+                                            } }, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "lg" }, { children: card.icon })) }))), (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: card.title }), card.description ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.description }))) : (defaultCardSubtitle && (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small" }, { children: defaultCardSubtitle })))] })] })) })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick, 
+                                // aria-label="card checkbox example"
+                                id: "check-1" }))] }))] }), card.cardBody, card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'end',
+                        gap: 16,
+                    } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { flexGrow: 1 } }, { children: card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.LabelGroup, { children: card.labels.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: item.color }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: item.label, style: { minWidth: 0 } }) }), item.label)); }) })) })) })) })), card.alertTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, __assign({ title: card.alertTitle, isInline: true, variant: card.alertVariant }, { children: card.alertContent })))] }), (_a = card.id) !== null && _a !== void 0 ? _a : card.title));
+}
+exports.PageTableCard = PageTableCard;
+function useColumnsToTableCardFn(columns, keyFn) {
+    var cardData = (0, react_1.useMemo)(function () {
+        var cols = columns.filter(function (column) { return column.card !== 'hidden'; });
+        var nameColumn = cols.shift();
+        var descriptionColumn = cols.find(function (column) { return column.card === 'description'; });
+        if (descriptionColumn) {
+            cols = cols.filter(function (column) { return column !== descriptionColumn; });
+        }
+        return {
+            nameColumn: nameColumn,
+            descriptionColumn: descriptionColumn,
+            columns: cols,
+        };
+    }, [columns]);
+    return (0, react_1.useMemo)(function () {
+        return function (item) {
+            var _a, _b;
+            var pageTableCard = {
+                id: keyFn(item),
+                title: (_a = cardData.nameColumn) === null || _a === void 0 ? void 0 : _a.cell(item),
+                description: (_b = cardData.descriptionColumn) === null || _b === void 0 ? void 0 : _b.cell(item),
+                cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, { children: cardData.columns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.header }, { children: column.cell(item) }), column.id)); }) }) })),
+            };
+            return pageTableCard;
+        };
+    }, [cardData.columns, cardData.descriptionColumn, cardData.nameColumn, keyFn]);
+}
+exports.useColumnsToTableCardFn = useColumnsToTableCardFn;

package/cjs/PageTableCards.js

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageTableCards = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var Grid_1 = require("./components/Grid");
+var PageTableCard_1 = require("./PageTableCard");
+function PageTableCards(props) {
+    var keyFn = props.keyFn, items = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultCardSubtitle;
+    var itemToCardFn = (0, PageTableCard_1.useColumnsToTableCardFn)(tableColumns, keyFn);
+    var catalogCards = (0, react_1.useMemo)(function () {
+        return ((0, jsx_runtime_1.jsx)(Grid_1.Grid, __assign({ size: 470 }, { children: items === null || items === void 0 ? void 0 : items.map(function (item) { return ((0, jsx_runtime_1.jsx)(PageTableCard_1.PageTableCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: rowActions, showSelect: showSelect, defaultCardSubtitle: defaultCardSubtitle }, keyFn(item))); }) })));
+    }, [
+        items,
+        keyFn,
+        itemToCardFn,
+        isSelected,
+        selectItem,
+        unselectItem,
+        rowActions,
+        showSelect,
+        defaultCardSubtitle,
+    ]);
+    return (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ style: { flexGrow: 1 } }, { children: catalogCards }));
+}
+exports.PageTableCards = PageTableCards;

package/cjs/PageTableList.js

@@ -0,0 +1,79 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColumnsToDataList = exports.PageTableList = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var TypedActions_1 = require("./TypedActions");
+function PageTableList(props) {
+    var keyFn = props.keyFn, pageItems = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, defaultCardSubtitle = props.defaultCardSubtitle, showSelect = props.showSelect;
+    var columnsToDataList = useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "TODO", style: { marginTop: -1 } }, { children: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(columnsToDataList) })));
+}
+exports.PageTableList = PageTableList;
+function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect) {
+    var data = (0, react_1.useMemo)(function () {
+        var cols = tableColumns.filter(function (column) { return column.card !== 'hidden'; });
+        var nameColumn = cols.shift();
+        var descriptionColumn = cols.find(function (column) { return column.card === 'description'; });
+        if (descriptionColumn) {
+            cols = cols.filter(function (column) { return column !== descriptionColumn; });
+        }
+        return {
+            nameColumn: nameColumn,
+            descriptionColumn: descriptionColumn,
+            columns: cols.filter(function (column) { return column.list !== 'secondary'; }),
+            secondary: cols.filter(function (column) { return column.list === 'secondary'; }),
+        };
+    }, [tableColumns]);
+    var onSelectClick = (0, react_1.useCallback)(function (item) {
+        if (isSelected === null || isSelected === void 0 ? void 0 : isSelected(item)) {
+            unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
+        }
+        else {
+            selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+        }
+    }, [isSelected, selectItem, unselectItem]);
+    return (0, react_1.useCallback)(function (item) {
+        var _a;
+        var key = keyFn(item);
+        var isItemSelected = isSelected === null || isSelected === void 0 ? void 0 : isSelected(item);
+        return ((0, jsx_runtime_1.jsx)(react_core_1.DataListItem, __assign({ "aria-labelledby": "data-list-".concat(key), isExpanded: isItemSelected }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DataListItemRow, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.DataListCheck, { "aria-labelledby": "data-list-check-".concat(key), name: "data-list-check-".concat(key), isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onClick: function () { return onSelectClick(item); } })), (0, jsx_runtime_1.jsx)(react_core_1.DataListItemCells, { dataListCells: [
+                            (0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2" }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "data-list-".concat(key) }, { children: (_a = data.nameColumn) === null || _a === void 0 ? void 0 : _a.cell(item) })) })), data.descriptionColumn ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: data.descriptionColumn.cell(item) }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, { children: data.columns.map(function (column) {
+                                                    var value = column.cell(item);
+                                                    if (!value)
+                                                        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                                                    return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: column.header })) }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
+                                                }) })] })) }) }, "primary"),
+                            (0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, { children: data.secondary.map(function (column) {
+                                            var value = column.cell(item);
+                                            if (!value)
+                                                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                                            return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: column.header })) }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
+                                        }) }) }) }, "secondary"),
+                        ] }), rowActions && ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: rowActions, position: react_core_1.DropdownPosition.right, selectedItem: item }) })))] }) }), key));
+    }, [
+        data.columns,
+        data.descriptionColumn,
+        data.nameColumn,
+        data.secondary,
+        defaultCardSubtitle,
+        isSelected,
+        keyFn,
+        onSelectClick,
+        rowActions,
+        showSelect,
+    ]);
+}
+exports.useColumnsToDataList = useColumnsToDataList;

package/cjs/PageTableViewType.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageTableViewTypeE = void 0;
+var PageTableViewTypeE;
+(function (PageTableViewTypeE) {
+    PageTableViewTypeE["Table"] = "table";
+    PageTableViewTypeE["List"] = "list";
+    PageTableViewTypeE["Cards"] = "cards";
+})(PageTableViewTypeE = exports.PageTableViewTypeE || (exports.PageTableViewTypeE = {}));

package/cjs/PageToolbar.js

@@ -47,6 +47,7 @@ var react_i18next_1 = require("react-i18next");
 var BulkSelector_1 = require("./components/BulkSelector");
 var SingleSelect_1 = require("./components/SingleSelect");
 var useBreakPoint_1 = require("./components/useBreakPoint");
+var PageTableViewType_1 = require("./PageTableViewType");
 var Settings_1 = require("./Settings");
 var TypedActions_1 = require("./TypedActions");
 function toolbarActionsHaveBulkActions(actions) {
@@ -74,6 +75,7 @@ function PageTableToolbar(props) {
     var _a;
     var itemCount = props.itemCount, page = props.page, perPage = props.perPage, setPage = props.setPage, setPerPage = props.setPerPage, toolbarFilters = props.toolbarFilters, selectedItems = props.selectedItems, filters = props.filters, setFilters = props.setFilters, clearAllFilters = props.clearAllFilters, openColumnModal = props.openColumnModal, disableBorderBottom = props.disableBorderBottom;
     var sm = (0, useBreakPoint_1.useBreakpoint)('md');
+    var viewType = props.viewType, setViewType = props.setViewType;
     var toolbarActions = props.toolbarActions;
     toolbarActions = toolbarActions !== null && toolbarActions !== void 0 ? toolbarActions : [];
     var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
@@ -156,7 +158,29 @@ 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)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) }) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: openColumnModal && ((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, __assign({ variant: "pagination", 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.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { 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, { children: [PageTableViewType_1.PageTableViewTypeE.Table, PageTableViewType_1.PageTableViewTypeE.List, PageTableViewType_1.PageTableViewTypeE.Cards]
+                                    // .filter((vt) => {
+                                    //   switch (vt) {
+                                    //     case PageTableViewTypeE.Cards:
+                                    //       return props.itemToCardFn !== undefined
+                                    //     case PageTableViewTypeE.list:
+                                    //       return false
+                                    //     case PageTableViewTypeE.table:
+                                    //       return props.tableColumns !== undefined
+                                    //     default:
+                                    //       return false
+                                    //   }
+                                    // })
+                                    .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); } }) }), vt));
+                                        case PageTableViewType_1.PageTableViewTypeE.List:
+                                            return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'List 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.ListIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.List, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.List); } }) })));
+                                        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); } }) })));
+                                    }
+                                }) }) })] })), (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/TypedActions/TypedActions.js

@@ -52,7 +52,7 @@ var TypedActionType;
     TypedActionType["dropdown"] = "dropdown";
 })(TypedActionType = exports.TypedActionType || (exports.TypedActionType = {}));
 function TypedActionsDropdown(props) {
-    var actions = props.actions, label = props.label, _a = props.isPrimary, isPrimary = _a === void 0 ? false : _a, selectedItems = props.selectedItems;
+    var actions = props.actions, label = props.label, _a = props.isPrimary, isPrimary = _a === void 0 ? false : _a, selectedItems = props.selectedItems, selectedItem = props.selectedItem;
     var _b = __read((0, react_1.useState)(false), 2), dropdownOpen = _b[0], setDropdownOpen = _b[1];
     var hasItemActions = (0, react_1.useMemo)(function () { return !actions.every(function (action) { return action.type !== TypedActionType.bulk; }); }, [actions]);
     var hasIcons = (0, react_1.useMemo)(function () {
@@ -65,13 +65,22 @@ function TypedActionsDropdown(props) {
                 ? {
                     color: 'var(--pf-global--Color--light-100)',
                 }
-                : {} }, { children: label })), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(DropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: 201 } }));
+                : {} }, { children: label })), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(DropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: 201 } }));
 }
 exports.TypedActionsDropdown = TypedActionsDropdown;
 function DropdownActionItem(props) {
-    var action = props.action, selectedItems = props.selectedItems, hasIcons = props.hasIcons, index = props.index;
-    // TODO case TypedActionType.single?
+    var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, hasIcons = props.hasIcons, index = props.index;
     switch (action.type) {
+        case TypedActionType.single: {
+            var Icon = action.icon;
+            if (!Icon && hasIcons)
+                Icon = TransparentIcon;
+            var tooltip = action.tooltip;
+            var isDisabled = false;
+            return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: function () { return selectedItem && action.onClick(selectedItem); }, isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
+                        color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
+                    } }, { children: action.label })) }), action.label));
+        }
         case TypedActionType.button:
         case TypedActionType.bulk: {
             var Icon = action.icon;

package/cjs/components/Details.js

@@ -79,7 +79,7 @@ exports.DetailsList = DetailsList;
 function Detail(props) {
     if (!props.children)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: props.label }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: props.label.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: props.label })) }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: props.label.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
 }
 exports.Detail = Detail;
 function DetailsSkeleton() {

package/cjs/components/patternfly-colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pfDisabled = exports.pfInfo = exports.pfWarning = exports.pfDanger = exports.pfSuccess = exports.getPatternflyColor = exports.PatternFlyColor = void 0;
+exports.LabelColorE = exports.pfDisabled = exports.pfInfo = exports.pfWarning = exports.pfDanger = exports.pfSuccess = exports.getPatternflyColor = exports.PatternFlyColor = void 0;
 var PatternFlyColor;
 (function (PatternFlyColor) {
     PatternFlyColor["Green"] = "green";
@@ -30,3 +30,13 @@ exports.pfDanger = 'var(--pf-global--danger-color--100)';
 exports.pfWarning = 'var(--pf-global--warning-color--100)';
 exports.pfInfo = 'var(--pf-global--info-color--100)';
 exports.pfDisabled = 'var(--pf-global--disabled-color--100)';
+var LabelColorE;
+(function (LabelColorE) {
+    LabelColorE["blue"] = "blue";
+    LabelColorE["cyan"] = "cyan";
+    LabelColorE["green"] = "green";
+    LabelColorE["orange"] = "orange";
+    LabelColorE["purple"] = "purple";
+    LabelColorE["red"] = "red";
+    LabelColorE["grey"] = "grey";
+})(LabelColorE = exports.LabelColorE || (exports.LabelColorE = {}));

package/cjs/index.js

@@ -22,7 +22,6 @@ __exportStar(require("./components/Help"), exports);
 __exportStar(require("./components/patternfly-colors"), exports);
 __exportStar(require("./components/useBreakPoint"), exports);
 __exportStar(require("./PageBody"), exports);
-__exportStar(require("./PageCatalog"), exports);
 __exportStar(require("./PageCells"), exports);
 __exportStar(require("./PageDataList"), exports);
 __exportStar(require("./PageDialog"), exports);
@@ -31,6 +30,7 @@ __exportStar(require("./PageFramework"), exports);
 __exportStar(require("./PageHeader"), exports);
 __exportStar(require("./PageLayout"), exports);
 __exportStar(require("./PageTable"), exports);
+__exportStar(require("./PageTableCards"), exports);
 __exportStar(require("./PageTabs"), exports);
 __exportStar(require("./PageToolbar"), exports);
 __exportStar(require("./TypedActions"), exports);

package/mjs/BulkActionDialog.js

@@ -78,7 +78,7 @@ export function BulkActionDialog(props) {
                         maxHeight: 500,
                         overflow: 'hidden',
                         borderTop: 'thin solid var(--pf-global--BorderColor--100)',
-                    }, children: !isSubmitting && !isSubmited ? (_jsx(PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items" }, "items")) : (_jsx(PageTable, { pageItems: [...paged], itemCount: props.items.length, tableColumns: [
+                    }, children: !isSubmitting && !isSubmited ? (_jsx(PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items", disableBodyPadding: true }, "items")) : (_jsx(PageTable, { pageItems: [...paged], itemCount: props.items.length, tableColumns: [
                             ...props.errorColumns,
                             {
                                 header: 'Status',
@@ -100,5 +100,5 @@ export function BulkActionDialog(props) {
                                         }, children: [_jsx(ExclamationCircleIcon, {}), "\u00A0 ", statuses?.[key]] }));
                                 },
                             },
-                        ], keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status")) }), props.confirmText && (_jsx(Collapse, { open: !isSubmitting && !isSubmited, children: _jsx("div", { style: { marginLeft: 32, marginTop: 0, marginBottom: 8 }, children: _jsx(Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) }) }))] }) }));
+                        ], keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items", disableBodyPadding: true }, "status")) }), props.confirmText && (_jsx(Collapse, { open: !isSubmitting && !isSubmited, children: _jsx("div", { style: { marginLeft: 32, marginTop: 0, marginBottom: 8 }, children: _jsx(Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) }) }))] }) }));
 }

package/mjs/PageBody.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
 export declare function PageBody(props: {
     children?: ReactNode;
+    disablePadding?: boolean;
 }): JSX.Element;

package/mjs/PageBody.js

@@ -4,7 +4,7 @@ import { useBreakpoint } from '.';
 import ErrorBoundary from './components/ErrorBoundary';
 import { useSettings } from './Settings';
 export function PageBody(props) {
-    const usePadding = useBreakpoint('xxl');
+    const usePadding = useBreakpoint('xxl') && props.disablePadding !== true;
     const settings = useSettings();
     const { t } = useTranslation();
     return (_jsx(ErrorBoundary, { message: t('Error'), children: _jsx("div", { style: {

package/mjs/PageDataList.js

@@ -7,7 +7,6 @@ import { PageBody } from './PageBody';
 import { PageHeader } from './PageHeader';
 import { PageLayout } from './PageLayout';
 import { PagePagination } from './PagePagination';
-import { PageTableToolbar } from './PageToolbar';
 import { useSettings } from './Settings';
 import { TypedActions, TypedActionType } from './TypedActions';
 export function DataListPage(props) {
@@ -31,7 +30,7 @@ export function PageDataList(props) {
     if (itemCount === 0 && Object.keys(filters ?? {}).length === 0) {
         return (_jsxs(EmptyState, { variant: EmptyStateVariant.large, style: { paddingTop: 64 }, children: [_jsx(EmptyStateIcon, { icon: PlusCircleIcon }), _jsx(Title, { headingLevel: "h4", size: "lg", children: props.emptyStateTitle }), props.emptyStateDescription && (_jsx(EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && (_jsx(Button, { variant: "primary", onClick: props.emptyStateButtonClick, children: props.emptyStateButtonText }))] }));
     }
-    return (_jsxs(Fragment, { children: [_jsx(PageTableToolbar, { ...props, disableBorderBottom: true }), _jsx(Scrollable, { children: _jsx(DataList, { "aria-label": "Simple data list example", children: pageItems?.map((item) => (_jsx(DataListItem, { "aria-labelledby": "simple-item1", children: _jsxs(DataListItemRow, { children: [showSelect && (_jsx(DataListCheck, { "aria-labelledby": "check-action-item1", name: "check-action-check1", isChecked: isSelected?.(item), onClick: () => {
+    return (_jsxs(Fragment, { children: [_jsx(Scrollable, { children: _jsx(DataList, { "aria-label": "Simple data list example", children: pageItems?.map((item) => (_jsx(DataListItem, { "aria-labelledby": "simple-item1", children: _jsxs(DataListItemRow, { children: [showSelect && (_jsx(DataListCheck, { "aria-labelledby": "check-action-item1", name: "check-action-check1", isChecked: isSelected?.(item), onClick: () => {
                                         if (isSelected?.(item)) {
                                             selectItem?.(item);
                                         }

package/mjs/PageHeader.d.ts

@@ -17,6 +17,7 @@ export interface PageHeaderProps {
     controls?: ReactNode;
     headerActions?: ReactNode;
     t?: (t: string) => string;
+    disableBorderBottom?: boolean;
 }
 /**
  * PageHeader enables the responsive layout of the header.