@ansible/ansible-ui-framework 0.0.356 → 0.0.357

package/cjs/PageTable.d.ts

@@ -67,11 +67,10 @@ export type PageTableProps<T extends object> = {
  * ```
  */
 export declare function PageTable<T extends object>(props: PageTableProps<T>): JSX.Element;
-type CellFn<T extends object> = (item: T) => ReactNode;
-export interface ITableColumn<T extends object> {
+type CellFn<T extends object, R> = (item: T) => R;
+export interface ITableColumnCommon<T extends object> {
     id?: string;
     header: string;
-    cell: CellFn<T>;
     minWidth?: number;
     maxWidth?: number;
     enabled?: boolean;
@@ -79,17 +78,48 @@ export interface ITableColumn<T extends object> {
     sort?: string;
     defaultSortDirection?: 'asc' | 'desc';
     defaultSort?: boolean;
-    /**
-     * @deprecated The method should not be used
-     */
-    type?: 'labels' | 'progress' | 'date';
-    /**
-     * @deprecated The method should not be used
-     */
-    sortFn?: (l: T, r: T) => number;
-    card?: 'description' | 'hidden' | 'count';
-    list?: 'primary' | 'secondary';
-    hideLabel?: boolean;
-    primary?: boolean;
+    icon?: (item: T) => ReactNode;
+    card?: 'name' | 'subtitle' | 'description' | 'hidden';
+    list?: 'name' | 'subtitle' | 'description' | 'hidden' | 'primary' | 'secondary';
 }
+export declare enum TableColumnSomething {
+    'id' = 0,
+    'name' = 1,
+    'description' = 2
+}
+export declare enum TableColumnCardType {
+    'description' = 0,
+    'hidden' = 1,
+    'count' = 2
+}
+export interface ITableColumnTypeReactNode<T extends object> extends ITableColumnCommon<T> {
+    type?: undefined;
+    value?: CellFn<T, string | string[] | number | boolean>;
+    cell: CellFn<T, ReactNode | undefined>;
+}
+export interface ITableColumnTypeCount<T extends object> extends ITableColumnCommon<T> {
+    type: 'count';
+    value: CellFn<T, number | undefined>;
+}
+export interface ITableColumnTypeLabels<T extends object> extends ITableColumnCommon<T> {
+    type: 'labels';
+    value: CellFn<T, string[] | undefined>;
+}
+export interface ITableColumnTypeDateTime<T extends object> extends ITableColumnCommon<T> {
+    type: 'datetime';
+    value: CellFn<T, number | string | undefined>;
+}
+export interface ITableColumnTypeDescription<T extends object> extends ITableColumnCommon<T> {
+    type: 'description';
+    value: CellFn<T, string | undefined>;
+}
+export interface ITableColumnTypeText<T extends object> extends ITableColumnCommon<T> {
+    type: 'text';
+    value: CellFn<T, string | undefined>;
+}
+export type ITableColumn<T extends object> = ITableColumnTypeReactNode<T> | ITableColumnTypeDateTime<T> | ITableColumnTypeLabels<T> | ITableColumnTypeCount<T> | ITableColumnTypeText<T> | ITableColumnTypeDescription<T>;
+export declare function TableColumnCell<T extends object>(props: {
+    item: T;
+    column?: ITableColumn<T>;
+}): JSX.Element;
 export {};

package/cjs/PageTable.js

@@ -30,13 +30,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageTable = exports.TablePage = void 0;
+exports.TableColumnCell = exports.TableColumnCardType = exports.TableColumnSomething = exports.PageTable = exports.TablePage = 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 DateTimeCell_1 = require("./cells/DateTimeCell");
+var LabelsCell_1 = require("./cells/LabelsCell");
+var TextCell_1 = require("./cells/TextCell");
 var Scrollable_1 = require("./components/Scrollable");
 var useBreakPoint_1 = require("./components/useBreakPoint");
 var PageBody_1 = require("./PageBody");
@@ -71,7 +74,7 @@ exports.TablePage = TablePage;
  */
 function PageTable(props) {
     var _a;
-    var disableBodyPadding = props.disableBodyPadding;
+    // const { disableBodyPadding } = props
     var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
     var _b = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
     var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; })) !==
@@ -88,6 +91,7 @@ function PageTable(props) {
                 : PageTableViewType_1.PageTableViewTypeE.Cards);
     }), 2), viewType = _c[0], setViewType = _c[1];
     var settings = (0, Settings_1.useSettings)();
+    var usePadding = (0, useBreakPoint_1.useBreakpoint)('md') && props.disableBodyPadding !== true;
     if (error) {
         return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
                 backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
@@ -102,7 +106,14 @@ function PageTable(props) {
     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 })), 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, { 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] }));
+    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: true }, { 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 || ((_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) {
@@ -229,7 +240,7 @@ function TableCells(props) {
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [columns
                 .filter(function (column) { return column.enabled !== false; })
                 .map(function (column) {
-                return ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ dataLabel: column.header, modifier: "nowrap" }, { children: column.cell(item) }), column.header));
+                return ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ dataLabel: column.header, modifier: "nowrap" }, { children: (0, jsx_runtime_1.jsx)(TableColumnCell, { item: item, column: column }) }), column.header));
             }), actions !== undefined && actions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Th
             // isActionCell
             , __assign({ 
@@ -247,3 +258,36 @@ function TableCells(props) {
                         // dropdownDirection="up" // TODO handle....
                         items: actions }) })) })))] }));
 }
+var TableColumnSomething;
+(function (TableColumnSomething) {
+    TableColumnSomething[TableColumnSomething["id"] = 0] = "id";
+    TableColumnSomething[TableColumnSomething["name"] = 1] = "name";
+    TableColumnSomething[TableColumnSomething["description"] = 2] = "description";
+})(TableColumnSomething = exports.TableColumnSomething || (exports.TableColumnSomething = {}));
+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/PageTableCard.d.ts

@@ -6,7 +6,7 @@ export interface IPageTableCard {
     id: string | number;
     icon?: ReactNode;
     title: ReactNode;
-    description?: ReactNode;
+    subtitle?: ReactNode;
     cardBody: ReactNode;
     labels?: {
         label: string;

package/cjs/PageTableCard.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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");
@@ -19,6 +30,7 @@ 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 PageTable_1 = require("./PageTable");
 var TypedActions_1 = require("./TypedActions");
 function PageTableCard(props) {
     var _a;
@@ -38,65 +50,107 @@ function PageTableCard(props) {
     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, 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, 
+            maxWidth: '100%',
+            overflow: 'hidden',
+        } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%', overflow: 'hidden' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+                            display: 'flex',
+                            flexWrap: 'nowrap',
+                            maxWidth: '100%',
+                            overflow: 'hidden',
+                        } }, { 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: 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)(TypedActions_1.TypedActions, { 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: {
+                                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));
+                    } }, { 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 cardData = (0, react_1.useMemo)(function () {
-        var _a;
-        var cols = columns.filter(function (column) { return column.card !== 'hidden'; });
-        var countColumns = cols.filter(function (column) { return column.card === 'count'; });
-        cols = cols.filter(function (column) { return column.card !== 'count'; });
-        var nameColumn = (_a = cols.find(function (column) { return column.primary; })) !== null && _a !== void 0 ? _a : cols[0];
-        cols = cols.filter(function (column) { return column !== nameColumn; });
-        var descriptionColumn = cols.find(function (column) { return column.card === 'description'; });
-        if (descriptionColumn) {
-            cols = cols.filter(function (column) { return column !== descriptionColumn; });
+    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,
-            columns: cols,
+            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 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.jsxs)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: [cardData.columns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.hideLabel ? undefined : column.header }, { children: column.cell(item) }), column.id)); }), cardData.countColumns.length > 0 && ((0, jsx_runtime_1.jsx)(Details_1.Detail, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: 16 } }, { children: cardData.countColumns.map(function (column, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', gap: 6, alignItems: 'baseline' } }, { children: [column.cell(item), (0, jsx_runtime_1.jsx)("small", __assign({ style: { opacity: 0.7 } }, { children: column.header }))] }), i)); }) })) }))] })) })),
-                // labels: [{ label: 'hhh' }],
+                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: [descriptionColumn && (!descriptionColumn.value || descriptionColumn.value(item)) && ((0, jsx_runtime_1.jsx)(Details_1.Detail, { 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.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __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)(Details_1.Detail, { 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 (cardData.columns.length === 0 && cardData.countColumns.length === 0) {
+            if (!descriptionColumn && cardColumns.length === 0 && countColumns.length === 0) {
                 pageTableCard.cardBody = undefined;
             }
             return pageTableCard;
         };
-    }, [
-        cardData.columns,
-        cardData.countColumns,
-        cardData.descriptionColumn,
-        cardData.nameColumn,
-        keyFn,
-    ]);
+    }, [cardColumns, countColumns, descriptionColumn, labelColumn, nameColumn, subtitleColumn, keyFn]);
 }
 exports.useColumnsToTableCardFn = useColumnsToTableCardFn;

package/cjs/PageTableCards.js

@@ -21,7 +21,7 @@ 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))); }) })));
+        return ((0, jsx_runtime_1.jsx)(Grid_1.Grid, __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,

package/cjs/PageTableDetails.js

@@ -17,10 +17,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-empty-function */
 var react_core_1 = require("@patternfly/react-core");
 var Details_1 = require("./components/Details");
+var PageTable_1 = require("./PageTable");
 function TableDetails(props) {
     var item = props.item, columns = props.columns;
     if (!item)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: columns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.hideLabel ? undefined : column.header }, { children: column.cell(item) }), column.id)); }) })));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: columns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.header }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) }), column.id)); }) })));
 }
 exports.TableDetails = TableDetails;

package/cjs/PageTableList.js

@@ -10,33 +10,95 @@ var __assign = (this && this.__assign) || function () {
     };
     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.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 IconWrapper_1 = require("./components/IconWrapper");
+var PageTable_1 = require("./PageTable");
 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) })));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "TODO", style: { marginTop: -1, maxWidth: '100%', overflow: 'hidden' } }, { 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 _a;
-        var cols = tableColumns.filter(function (column) { return column.card !== 'hidden'; });
-        var nameColumn = (_a = cols.find(function (column) { return column.primary; })) !== null && _a !== void 0 ? _a : cols[0];
-        cols = cols.filter(function (column) { return column !== nameColumn; });
-        var descriptionColumn = cols.find(function (column) { return column.card === 'description'; });
-        if (descriptionColumn) {
-            cols = cols.filter(function (column) { return column !== descriptionColumn; });
+        var e_1, _a;
+        var nameColumn;
+        var subtitleColumn;
+        var descriptionColumn;
+        var countColumns = [];
+        var labelColumn;
+        var primaryColumns = [];
+        var secondaryColumns = [];
+        try {
+            for (var tableColumns_1 = __values(tableColumns), tableColumns_1_1 = tableColumns_1.next(); !tableColumns_1_1.done; tableColumns_1_1 = tableColumns_1.next()) {
+                var column = tableColumns_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.list) {
+                            case 'name':
+                                nameColumn = column;
+                                break;
+                            case 'subtitle':
+                                subtitleColumn = column;
+                                break;
+                            case 'description':
+                                descriptionColumn = column;
+                                break;
+                            case 'hidden':
+                                break;
+                            case 'secondary':
+                                secondaryColumns.push(column);
+                                break;
+                            default:
+                                primaryColumns.push(column);
+                                break;
+                        }
+                        break;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (tableColumns_1_1 && !tableColumns_1_1.done && (_a = tableColumns_1.return)) _a.call(tableColumns_1);
+            }
+            finally { if (e_1) throw e_1.error; }
         }
         return {
             nameColumn: nameColumn,
+            subtitleColumn: subtitleColumn,
             descriptionColumn: descriptionColumn,
-            columns: cols.filter(function (column) { return column.list !== 'secondary'; }),
-            secondary: cols.filter(function (column) { return column.list === 'secondary'; }),
+            countColumns: countColumns,
+            primaryColumns: primaryColumns,
+            secondaryColumns: secondaryColumns,
+            labelColumn: labelColumn,
         };
     }, [tableColumns]);
     var onSelectClick = (0, react_1.useCallback)(function (item) {
@@ -47,35 +109,45 @@ function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unsel
             selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
         }
     }, [isSelected, selectItem, unselectItem]);
+    var nameColumn = data.nameColumn, subtitleColumn = data.subtitleColumn, descriptionColumn = data.descriptionColumn, countColumns = data.countColumns, primaryColumns = data.primaryColumns, secondaryColumns = data.secondaryColumns, labelColumn = data.labelColumn;
     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, __assign({ width: 5 }, { 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", style: { marginTop: -4 } }, { 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 }))))] }), data.columns.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { 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: [!column.hideLabel && ((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, whiteSpace: 'nowrap' } }, { children: column.header })) })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
-                                                }) })))] })) }) }), "primary"),
-                            data.secondary.length > 0 ? ((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, __assign({ isCompact: true }, { 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: [!column.hideLabel && ((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, whiteSpace: 'nowrap' } }, { children: column.header })) })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
-                                        }) })) }) }, "secondary")) : null,
+                            (0, jsx_runtime_1.jsx)(react_core_1.DataListCell, __assign({ width: 5 }, { 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.Flex, __assign({ alignItems: { default: 'alignItemsCenter' } }, { children: [(nameColumn === null || nameColumn === void 0 ? void 0 : nameColumn.icon) && ((0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "xl" }, { children: nameColumn === null || nameColumn === void 0 ? void 0 : nameColumn.icon(item) }))), (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", style: { marginTop: -4, fontWeight: 'bold' } }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "data-list-".concat(key) }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: nameColumn, item: item }) })) })), subtitleColumn ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: subtitleColumn, item: item }) }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] })] })), (descriptionColumn ||
+                                                primaryColumns.length > 0 ||
+                                                countColumns.length > 0 ||
+                                                labelColumn) && ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: [descriptionColumn &&
+                                                        (!descriptionColumn.value || descriptionColumn.value(item)) && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: descriptionColumn, item: item }) }) }, descriptionColumn.header)), primaryColumns.map(function (column) {
+                                                        if (column.value && !column.value(item))
+                                                            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, whiteSpace: 'nowrap' } }, { children: column.header })) }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) })] }, column.header));
+                                                    }), countColumns.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { 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)); }) })) }) }, "counts")), labelColumn && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: labelColumn, item: item }) }) }, labelColumn.header))] })))] })) }) }), "primary"),
+                            secondaryColumns.length > 0 ? ((0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: secondaryColumns.map(function (column) {
+                                        if (column.value && !column.value(item))
+                                            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, whiteSpace: 'nowrap' } }, { children: column.header })) }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) })] }, column.header));
+                                    }) })) }, "secondary")) : null,
                         ] }), 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, iconOnly: true }) })))] }) }), key));
     }, [
-        data.columns,
-        data.descriptionColumn,
-        data.nameColumn,
-        data.secondary,
-        defaultCardSubtitle,
-        isSelected,
         keyFn,
-        onSelectClick,
-        rowActions,
+        isSelected,
         showSelect,
+        nameColumn,
+        subtitleColumn,
+        defaultCardSubtitle,
+        primaryColumns,
+        descriptionColumn,
+        countColumns,
+        labelColumn,
+        secondaryColumns,
+        rowActions,
+        onSelectClick,
     ]);
 }
 exports.useColumnsToDataList = useColumnsToDataList;

package/cjs/cells/DateTimeCell.d.ts

@@ -3,7 +3,7 @@ export declare function DateCell(props: {
     value: number | string;
 }): JSX.Element;
 export declare function SinceCell(props: {
-    value: string | undefined | null;
+    value: string | number | undefined | null;
     author?: string;
     onClick?: () => void;
     t?: (t: string) => string;

package/cjs/cells/DateTimeCell.js

@@ -43,11 +43,17 @@ function SinceCell(props) {
     var author = props.author, onClick = props.onClick;
     var _a = __read((0, react_1.useState)(null), 2), dateTime = _a[0], setDateTime = _a[1];
     (0, react_1.useEffect)(function () {
-        if (props.value) {
+        if (typeof props.value === 'number') {
+            setDateTime(luxon_1.DateTime.fromMillis(props.value).toRelative());
+        }
+        else if (props.value) {
             setDateTime(luxon_1.DateTime.fromISO(props.value).toRelative());
         }
         var timeout = setInterval(function () {
-            if (props.value) {
+            if (typeof props.value === 'number') {
+                setDateTime(luxon_1.DateTime.fromMillis(props.value).toRelative());
+            }
+            else if (props.value) {
                 setDateTime(luxon_1.DateTime.fromISO(props.value).toRelative());
             }
         }, 1000);

package/cjs/cells/TextCell.js

@@ -20,7 +20,7 @@ var usePageNavigate_1 = require("../components/usePageNavigate");
 function TextCell(props) {
     var _a, _b, _c;
     var navigate = (0, usePageNavigate_1.usePageNavigate)();
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ style: { maxWidth: '100%' } }, { children: [props.icon && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: (_a = props.iconSize) !== null && _a !== void 0 ? _a : 'sm', color: (_b = props.iconColor) !== null && _b !== void 0 ? _b : props.color }, { children: props.icon })) })), props.text && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ style: { maxWidth: '100%' } }, { children: [props.icon && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: (_a = props.iconSize) !== null && _a !== void 0 ? _a : 'sm', color: (_b = props.iconColor) !== null && _b !== void 0 ? _b : props.color, padRight: true }, { children: props.icon })) })), props.text && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                         maxWidth: (_c = props.maxWidth) !== null && _c !== void 0 ? _c : '100%',
                         whiteSpace: 'nowrap',
                         textOverflow: 'ellipsis',

package/cjs/components/IconWrapper.d.ts

@@ -3,6 +3,6 @@ import { PFColor } from './pfcolors';
 export declare function IconWrapper(props: {
     children: ReactNode;
     color?: PFColor;
-    size?: 'sm' | 'md' | 'lg';
-    noPadding?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    padRight?: boolean;
 }): JSX.Element;

package/cjs/components/IconWrapper.js

@@ -20,36 +20,34 @@ function IconWrapper(props) {
     if (props.color) {
         newProps.color = (0, pfcolors_1.getPatternflyColor)(props.color);
     }
-    var marginOffset = undefined;
-    var marginRight = undefined;
     if (props.size) {
         newProps.size = props.size;
+    }
+    var paddingRight = 0;
+    if (props.padRight) {
         switch (props.size) {
             case 'sm':
-                marginRight = 6;
+                paddingRight = 4;
                 break;
             case 'md':
-                marginOffset = -2;
-                marginRight = 6;
+                paddingRight = 6;
                 break;
             case 'lg':
-                marginOffset = -6;
-                marginRight = 6;
+                paddingRight = 8;
+                break;
+            case 'xl':
+                paddingRight = 12;
                 break;
         }
     }
-    if (props.noPadding) {
-        marginRight = undefined;
-    }
     var newChildren = react_1.Children.toArray(props.children).map(function (child) {
         if ((0, react_1.isValidElement)(child)) {
-            var newChild = (0, react_1.cloneElement)(child, newProps);
-            return newChild;
+            return (0, react_1.cloneElement)(child, newProps);
         }
         else {
             return child;
         }
     });
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { marginTop: marginOffset, marginBottom: marginOffset, marginRight: marginRight } }, { children: newChildren })));
+    return (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingRight: paddingRight } }, { children: newChildren }));
 }
 exports.IconWrapper = IconWrapper;

package/cjs/useSelectDialog.js

@@ -66,9 +66,9 @@ function SelectDialog(props) {
                     onClose();
                 }, isAriaDisabled: view.selectedItems.length === 0 }, { children: confirm }), "confirm"),
             (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: cancel }), "cancel"),
-        ], hasNoBodyWrapper: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { overflow: 'hidden' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { opacity: view.selectedItems.length === 0 ? 0 : undefined } }, { children: selected })), (0, jsx_runtime_1.jsxs)("b", { children: [view.selectedItems.map(function (item) {
+        ], hasNoBodyWrapper: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { overflow: 'hidden' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { opacity: view.selectedItems.length === 0 ? 0 : undefined } }, { children: selected })), (0, jsx_runtime_1.jsxs)("b", { children: [view.selectedItems.map(function (item, i) {
                                     if (tableColumns && tableColumns.length > 0) {
-                                        return (0, jsx_runtime_1.jsx)("span", { children: tableColumns[0].cell(item) }, props.keyFn(item));
+                                        return (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { item: item, column: tableColumns[0] }, i);
                                     }
                                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                                 }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })] })) })), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: view.itemCount === undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "80px" }) })), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: view.itemCount !== undefined }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.356",
+  "version": "0.0.357",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {