@ansible/ansible-ui-framework 0.0.614 → 0.0.616

package/cjs/PageLayout.d.ts

@@ -1,17 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * The PageLayout is used as the container for the contents of the page.
- * It enables page components to leverage full page layout and scrolling of sub content.
- * An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
- *
- * @example
- * <Page>
- *   <PageLayout>
- *     <PageHeader />
- *     ...
- *   </PageLayout>
- * <Page>
- */
-export declare function PageLayout(props: {
-    children?: ReactNode;
-}): JSX.Element;

package/cjs/PageLayout.js

@@ -1,60 +0,0 @@
-"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);
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageLayout = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
-var PageAlerts_1 = require("./PageAlerts");
-var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
-/**
- * The PageLayout is used as the container for the contents of the page.
- * It enables page components to leverage full page layout and scrolling of sub content.
- * An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
- *
- * @example
- * <Page>
- *   <PageLayout>
- *     <PageHeader />
- *     ...
- *   </PageLayout>
- * <Page>
- */
-function PageLayout(props) {
-    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: translations.errorText }, { children: (0, jsx_runtime_1.jsx)(PageAlerts_1.PageAlertsProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    maxHeight: '100%',
-                } }, { children: props.children })) }) })));
-}
-exports.PageLayout = PageLayout;

package/cjs/PageTable/PagePagination.js

@@ -1,28 +0,0 @@
-"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.PagePagination = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_core_1 = require("@patternfly/react-core");
-var react_1 = require("react");
-var useBreakPoint_1 = require("../components/useBreakPoint");
-function PagePagination(props) {
-    var setPage = props.setPage, setPerPage = props.setPerPage;
-    var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
-    var onPerPageSelect = (0, react_1.useCallback)(function (_event, perPage) { return setPerPage(perPage); }, [setPerPage]);
-    var compact = !(0, useBreakPoint_1.useBreakpoint)('md');
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: __assign(__assign({}, props.style), { boxShadow: 'none', zIndex: 301, 
-            // marginTop: -1,
-            paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, borderTop: props.topBorder ? 'thin solid var(--pf-global--BorderColor--100)' : undefined }), className: "dark-2" }));
-}
-exports.PagePagination = PagePagination;

package/cjs/PageTable/PageTable.js

@@ -1,266 +0,0 @@
-"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);
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableColumnCell = exports.TableColumnCardType = exports.PageTable = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_core_1 = require("@patternfly/react-core");
-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 PageActions_1 = require("../PageActions/PageActions");
-var PageActionType_1 = require("../PageActions/PageActionType");
-var PageBody_1 = require("../PageBody");
-var DateTimeCell_1 = require("../PageCells/DateTimeCell");
-var LabelsCell_1 = require("../PageCells/LabelsCell");
-var TextCell_1 = require("../PageCells/TextCell");
-var PageColumnModal_1 = require("../PageColumnModal");
-var Settings_1 = require("../Settings");
-var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
-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");
-/**
- * The PageTable component is used for adding a table to a page.
- *
- * See the [Table Guide](docs/guides/PageTableGuide.md).
- *
- * @example
- * ```tsx
- * <Page>
- *   <PageLayout>
- *     <PageHeader ... />
- *     <PageTable ... />
- *   </PageLayout>
- * </Page>
- * ```
- */
-function PageTable(props) {
-    var _a, _b;
-    var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount, disableBodyPadding = props.disableBodyPadding;
-    var _c = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _c.openColumnModal, columnModal = _c.columnModal, managedColumns = _c.managedColumns;
-    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;
-    var _d = __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 = _d[0], setViewType = _d[1];
-    var usePadding = (0, useBreakPoint_1.useBreakpoint)('md') && disableBodyPadding !== true;
-    if (error) {
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "dark-2", style: { height: '100%' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
-    }
-    if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
-        return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: (_a = props.emptyStateIcon) !== null && _a !== void 0 ? _a : 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, icon: props.emptyStateButtonIcon ? props.emptyStateButtonIcon : null }, { children: props.emptyStateButtonText })))] })) }));
-    }
-    if (itemCount === undefined) {
-        return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, variant: "light" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Bullseye, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, {}) }) })));
-    }
-    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, bottomBorder: true })), 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)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ padding: { default: 'noPadding', md: 'padding' } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                            borderLeft: usePadding
-                                ? 'thin solid var(--pf-global--BorderColor--100)'
-                                : undefined,
-                            borderRight: usePadding
-                                ? 'thin solid var(--pf-global--BorderColor--100)'
-                                : undefined,
-                        } }, { 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 || ((_b = props.itemCount) !== null && _b !== void 0 ? _b : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props, { topBorder: true }))), columnModal] }));
-}
-exports.PageTable = PageTable;
-function PageTableView(props) {
-    var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, isSelectMultiple = props.isSelectMultiple, 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 _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
-    var showSelect = props.showSelect ||
-        (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
-            undefined;
-    var containerRef = (0, react_1.useRef)(null);
-    var _b = __read((0, react_1.useState)({
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-    }), 2), scroll = _b[0], setScroll = _b[1];
-    var updateScroll = (0, react_1.useCallback)(function (div) {
-        if (!div)
-            return;
-        setScroll({
-            top: div.scrollTop,
-            bottom: div.scrollHeight - div.clientHeight - div.scrollTop,
-            left: div.scrollLeft,
-            right: div.scrollWidth - div.clientWidth - div.scrollLeft,
-        });
-    }, []);
-    var onScroll = (0, react_1.useCallback)(function (event) { return updateScroll(event.currentTarget); }, [updateScroll]);
-    (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)();
-    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), isSelectMultiple: isSelectMultiple, 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: translations.noResultsFound })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: translations.noResultsMatchCriteria }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: clearAllFilters }, { children: translations.clearAllFilters })) }))] })))] })));
-}
-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, expandedRow = props.expandedRow;
-    var getColumnSort = (0, react_1.useCallback)(function (columnIndex, column) {
-        if (!column.sort)
-            return undefined;
-        return {
-            onSort: function (_event, _columnIndex, sortByDirection) {
-                if (column.sort) {
-                    setSort === null || setSort === void 0 ? void 0 : setSort(column.sort);
-                    setSortDirection === null || setSortDirection === void 0 ? void 0 : setSortDirection(sortByDirection);
-                }
-            },
-            sortBy: {
-                index: column.sort === sort ? columnIndex : undefined,
-                direction: column.sort === sort ? sortDirection : undefined,
-                defaultDirection: column.defaultSortDirection,
-            },
-            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, __assign({ className: "light dark-2" }, { 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) {
-                    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,
-                        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, isItemSelected = props.isItemSelected, isSelectMultiple = props.isSelectMultiple, 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; }); },
-                            }
-                            : 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,
-                            }
-                            : undefined, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
-                            rowIndex: rowIndex,
-                            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 !== null && isItemSelected !== void 0 ? isItemSelected : false,
-                            variant: isSelectMultiple ? 'checkbox' : '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;
-    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", 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,
-                    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 TableColumnCardType;
-(function (TableColumnCardType) {
-    TableColumnCardType[TableColumnCardType["description"] = 0] = "description";
-    TableColumnCardType[TableColumnCardType["hidden"] = 1] = "hidden";
-    TableColumnCardType[TableColumnCardType["count"] = 2] = "count";
-})(TableColumnCardType = exports.TableColumnCardType || (exports.TableColumnCardType = {}));
-function TableColumnCell(props) {
-    var _a, _b;
-    var item = props.item, column = props.column;
-    if (!column)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    switch (column.type) {
-        case 'text':
-            return (0, jsx_runtime_1.jsx)(TextCell_1.TextCell, { text: column.value(item) });
-        case 'labels':
-            return (0, jsx_runtime_1.jsx)(LabelsCell_1.LabelsCell, { labels: (_a = column.value(item)) !== null && _a !== void 0 ? _a : [] });
-        case 'description':
-            return (0, jsx_runtime_1.jsx)(TextCell_1.TextCell, { text: column.value(item) });
-        case 'count':
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (_b = column.value(item)) !== null && _b !== void 0 ? _b : '-' });
-        case 'datetime':
-            return (0, jsx_runtime_1.jsx)(DateTimeCell_1.SinceCell, { value: column.value(item) });
-        default:
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: column.cell(item) });
-    }
-}
-exports.TableColumnCell = TableColumnCell;

package/cjs/PageTable/PageTableCard.js

@@ -1,161 +0,0 @@
-"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);
-};
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-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 IconWrapper_1 = require("../components/IconWrapper");
-var PageActions_1 = require("../PageActions/PageActions");
-var PageDetail_1 = require("../PageDetails/PageDetail");
-var PageTable_1 = require("./PageTable");
-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',
-            maxWidth: '100%',
-        } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
-                                    display: 'flex',
-                                    flexWrap: 'wrap',
-                                    alignItems: 'center',
-                                    gap: 16,
-                                    maxWidth: '100%',
-                                } }, { children: [card.icon && (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "xl" }, { children: card.icon })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: card.title }) }), card.subtitle ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.subtitle }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }))] })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { 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.FlexItem, { 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)(PageActions_1.PageActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true, collapse: "always" })), 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, __assign({ numLabels: 999 }, { 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 data = (0, react_1.useMemo)(function () {
-        var e_1, _a;
-        var nameColumn;
-        var subtitleColumn;
-        var descriptionColumn;
-        var countColumns = [];
-        var labelColumn;
-        var cardColumns = [];
-        try {
-            for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
-                var column = columns_1_1.value;
-                switch (column.type) {
-                    case 'description':
-                        if (!descriptionColumn)
-                            descriptionColumn = column;
-                        break;
-                    case 'labels':
-                        if (!labelColumn)
-                            labelColumn = column;
-                        break;
-                    case 'count':
-                        countColumns.push(column);
-                        break;
-                    default:
-                        switch (column.card) {
-                            case 'name':
-                                nameColumn = column;
-                                break;
-                            case 'subtitle':
-                                subtitleColumn = column;
-                                break;
-                            case 'description':
-                                descriptionColumn = column;
-                                break;
-                            case 'hidden':
-                                break;
-                            default:
-                                cardColumns.push(column);
-                                break;
-                        }
-                        break;
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        return {
-            nameColumn: nameColumn,
-            subtitleColumn: subtitleColumn,
-            descriptionColumn: descriptionColumn,
-            countColumns: countColumns,
-            cardColumns: cardColumns,
-            labelColumn: labelColumn,
-        };
-    }, [columns]);
-    var nameColumn = data.nameColumn, subtitleColumn = data.subtitleColumn, descriptionColumn = data.descriptionColumn, countColumns = data.countColumns, cardColumns = data.cardColumns, labelColumn = data.labelColumn;
-    return (0, react_1.useMemo)(function () {
-        return function (item) {
-            var _a, _b;
-            var hasDescription = descriptionColumn && (!descriptionColumn.value || descriptionColumn.value(item));
-            var pageTableCard = {
-                id: keyFn(item),
-                icon: (_a = nameColumn === null || nameColumn === void 0 ? void 0 : nameColumn.icon) === null || _a === void 0 ? void 0 : _a.call(nameColumn, item),
-                title: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: nameColumn, item: item }),
-                subtitle: subtitleColumn && (!subtitleColumn.value || subtitleColumn.value(item)) && ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: subtitleColumn, item: item })),
-                cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: [hasDescription && ((0, jsx_runtime_1.jsx)(PageDetail_1.PageDetail, { children: descriptionColumn.type === 'description' ? ((0, jsx_runtime_1.jsx)("div", { children: descriptionColumn.value(item) })) : ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: descriptionColumn, item: item })) }, descriptionColumn.id)), cardColumns
-                                .filter(function (column) { return !column.value || column.value(item); })
-                                .map(function (column) { return ((0, jsx_runtime_1.jsx)(PageDetail_1.PageDetail, __assign({ label: column.header }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) }), column.id)); }), countColumns.length > 0 && ((0, jsx_runtime_1.jsx)(PageDetail_1.PageDetail, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: 16, marginTop: 8, flexWrap: 'wrap' } }, { children: countColumns.map(function (column, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', gap: 6, alignItems: 'baseline' } }, { children: [(0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }), (0, jsx_runtime_1.jsx)("small", __assign({ style: { opacity: 0.7 } }, { children: column.header }))] }), i)); }) })) }))] })) })),
-                labels: labelColumn && ((_b = labelColumn.value(item)) === null || _b === void 0 ? void 0 : _b.map(function (label) { return ({ label: label }); })),
-            };
-            if (!hasDescription && cardColumns.length === 0 && countColumns.length === 0) {
-                pageTableCard.cardBody = undefined;
-            }
-            return pageTableCard;
-        };
-    }, [
-        cardColumns,
-        countColumns,
-        descriptionColumn,
-        labelColumn,
-        nameColumn,
-        subtitleColumn,
-        keyFn,
-    ]);
-}
-exports.useColumnsToTableCardFn = useColumnsToTableCardFn;

package/cjs/PageTable/PageTableCards.js

@@ -1,38 +0,0 @@
-"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 PageGrid_1 = require("../components/PageGrid");
-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.defaultSubtitle;
-    var itemToCardFn = (0, PageTableCard_1.useColumnsToTableCardFn)(tableColumns, keyFn);
-    var catalogCards = (0, react_1.useMemo)(function () {
-        return ((0, jsx_runtime_1.jsx)(PageGrid_1.PageGrid, __assign({ size: 400 }, { 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;