@ansible/ansible-ui-framework 0.0.232 → 0.0.234

package/mjs/PageHeader.js

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

package/mjs/PageTable.d.ts

@@ -1,5 +1,6 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { PageHeaderProps } from './PageHeader';
+import { PageTableViewType } from './PageTableViewType';
 import { IToolbarFilter } from './PageToolbar';
 import { ITypedAction } from './TypedActions';
 export declare type TablePageProps<T extends object> = PageHeaderProps & PageTableProps<T> & {
@@ -43,7 +44,12 @@ export declare type PageTableProps<T extends object> = {
     emptyStateButtonClick?: () => void;
     t?: (t: string) => string;
     showSelect?: boolean;
-    ColumnManagement?: boolean;
+    disableTableView?: boolean;
+    disableListView?: boolean;
+    disableCardView?: boolean;
+    defaultTableView?: PageTableViewType;
+    disableBodyPadding?: boolean;
+    defaultCardSubtitle?: ReactNode;
 };
 export declare function PageTable<T extends object>(props: PageTableProps<T>): JSX.Element;
 declare type CellFn<T extends object> = (item: T) => ReactNode;
@@ -64,5 +70,8 @@ export interface ITableColumn<T extends object> {
      * @deprecated The method should not be used
      */
     sortFn?: (l: T, r: T) => number;
+    card?: 'description' | 'hidden';
+    list?: 'primary' | 'secondary';
+    hideLabel?: boolean;
 }
 export {};

package/mjs/PageTable.js

@@ -4,19 +4,41 @@ import { ExclamationCircleIcon, PlusCircleIcon, SearchIcon } from '@patternfly/r
 import { ActionsColumn, TableComposable, Tbody, Td, Th, Thead, Tr, } from '@patternfly/react-table';
 import useResizeObserver from '@react-hook/resize-observer';
 import { Fragment, useCallback, useEffect, useRef, useState, } from 'react';
+import { Scrollable } from './components/Scrollable';
 import { useBreakpoint } from './components/useBreakPoint';
 import { PageBody } from './PageBody';
 import { useColumnModal } from './PageColumnModal';
 import { PageHeader } from './PageHeader';
 import { PageLayout } from './PageLayout';
 import { PagePagination } from './PagePagination';
+import { PageTableCards } from './PageTableCards';
+import { PageTableList } from './PageTableList';
+import { PageTableViewTypeE } from './PageTableViewType';
 import { PageTableToolbar } from './PageToolbar';
 import { useSettings } from './Settings';
 import { TypedActionType, useTypedActionsToTableActions } from './TypedActions';
 export function TablePage(props) {
-    return (_jsx(_Fragment, { children: _jsxs(PageLayout, { children: [_jsx(PageHeader, { ...props }), _jsx(PageBody, { children: _jsx(PageTable, { ...props }) })] }) }));
+    return (_jsxs(PageLayout, { children: [_jsx(PageHeader, { ...props }), _jsx(PageTable, { ...props })] }));
 }
 export function PageTable(props) {
+    let { disableBodyPadding } = props;
+    disableBodyPadding = true;
+    const { toolbarActions } = props;
+    const { openColumnModal, columnModal, managedColumns } = useColumnModal(props.tableColumns);
+    const showSelect = toolbarActions?.find((toolbarAction) => TypedActionType.bulk === toolbarAction.type) !==
+        undefined;
+    const hasTableViewType = !props.disableTableView;
+    const hasListViewType = !props.disableListView;
+    // const hasCardViewType = !props.disableCardView
+    const [viewType, setViewType] = useState(() => props.defaultTableView ??
+        (hasTableViewType
+            ? PageTableViewTypeE.Table
+            : hasListViewType
+                ? PageTableViewTypeE.List
+                : PageTableViewTypeE.Cards));
+    return (_jsxs(_Fragment, { children: [_jsx(PageTableToolbar, { ...props, openColumnModal: openColumnModal, showSelect: showSelect, viewType: viewType, setViewType: setViewType }), viewType === PageTableViewTypeE.Table && (_jsx(PageBody, { disablePadding: disableBodyPadding, children: _jsx(PageTableView, { ...props, tableColumns: managedColumns }) })), viewType === PageTableViewTypeE.List && (_jsx(PageBody, { disablePadding: true, children: _jsx(Scrollable, { children: _jsx(PageTableList, { ...props, showSelect: showSelect }) }) })), viewType === PageTableViewTypeE.Cards && (_jsx(Scrollable, { children: _jsx(PageTableCards, { ...props, showSelect: showSelect }) })), (!props.autoHidePagination || (props.itemCount ?? 0) > props.perPage) && (_jsx(PagePagination, { ...props })), columnModal] }));
+}
+function PageTableView(props) {
     const { tableColumns, pageItems, selectItem, unselectItem, isSelected, keyFn, rowActions, toolbarActions, itemCount, perPage, clearAllFilters, filters, error, onSelect, unselectAll, } = props;
     let { t } = props;
     t = t ? t : (t) => t;
@@ -44,7 +66,6 @@ export function PageTable(props) {
     useResizeObserver(containerRef, () => updateScroll(containerRef.current));
     useEffect(() => updateScroll(containerRef.current), [updateScroll]);
     const settings = useSettings();
-    const { openColumnModal, columnModal, managedColumns } = useColumnModal(tableColumns);
     if (error) {
         return (_jsx("div", { style: {
                 backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
@@ -56,11 +77,11 @@ export function PageTable(props) {
     if (itemCount === 0 && Object.keys(filters ?? {}).length === 0) {
         return (_jsxs(EmptyState, { variant: EmptyStateVariant.large, style: { paddingTop: 64 }, children: [_jsx(EmptyStateIcon, { icon: PlusCircleIcon }), _jsx(Title, { headingLevel: "h4", size: "lg", children: props.emptyStateTitle }), props.emptyStateDescription && (_jsx(EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && (_jsx(Button, { variant: "primary", onClick: props.emptyStateButtonClick, children: props.emptyStateButtonText }))] }));
     }
-    return (_jsxs(Fragment, { children: [columnModal, _jsx(PageTableToolbar, { ...props, openColumnModal: openColumnModal, showSelect: showSelect }), _jsxs("div", { className: "pf-c-scroll-inner-wrapper", style: { height: '100%' }, ref: containerRef, onScroll: onScroll, children: [_jsxs(TableComposable, { "aria-label": "Simple table", variant: props.compact ? 'compact' : settings.tableLayout === 'compact' ? 'compact' : undefined, gridBreakPoint: "", isStickyHeader: true, children: [itemCount === undefined ? (_jsx(Thead, { children: _jsx(Tr, { children: _jsx(Th, { children: _jsx(Skeleton, {}) }) }) })) : (_jsx(TableHead, { ...props, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, tableColumns: managedColumns, onSelect: onSelect })), _jsx(Tbody, { children: itemCount === undefined
-                                    ? new Array(perPage).fill(0).map((_, index) => (_jsx(Tr, { children: _jsx(Td, { children: _jsx("div", { style: { paddingTop: 5, paddingBottom: 5 }, children: _jsx(Skeleton, { height: "27px" }) }) }) }, index)))
-                                    : pageItems === undefined
-                                        ? new Array(Math.min(perPage, itemCount)).fill(0).map((_, index) => (_jsxs(Tr, { children: [showSelect && _jsx(Td, {}), _jsx(Td, { colSpan: managedColumns.length, children: _jsx("div", { style: { paddingTop: 5, paddingBottom: 5 }, children: _jsx(Skeleton, { height: "27px" }) }) })] }, index)))
-                                        : pageItems?.map((item, rowIndex) => (_jsx(TableRow, { columns: managedColumns, item: item, isItemSelected: isSelected?.(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect }, keyFn ? keyFn(item) : rowIndex))) })] }), itemCount === 0 && (_jsx("div", { style: { margin: 'auto' }, children: _jsxs(EmptyState, { children: [_jsx(EmptyStateIcon, { icon: SearchIcon }), _jsx(Title, { headingLevel: "h2", size: "lg", children: t('No results found') }), _jsx(EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && (_jsx(EmptyStateSecondaryActions, { children: _jsx(Button, { variant: "link", onClick: clearAllFilters, children: t('Clear all filters') }) }))] }) }))] }), (!props.autoHidePagination || (itemCount ?? 0) > perPage) && _jsx(PagePagination, { ...props })] }));
+    return (_jsxs("div", { className: "pf-c-scroll-inner-wrapper", style: { height: '100%', marginBottom: -1 }, ref: containerRef, onScroll: onScroll, children: [_jsxs(TableComposable, { "aria-label": "Simple table", variant: props.compact ? 'compact' : settings.tableLayout === 'compact' ? 'compact' : undefined, gridBreakPoint: "", isStickyHeader: true, children: [itemCount === undefined ? (_jsx(Thead, { children: _jsx(Tr, { children: _jsx(Th, { children: _jsx(Skeleton, {}) }) }) })) : (_jsx(TableHead, { ...props, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, tableColumns: tableColumns, onSelect: onSelect })), _jsx(Tbody, { children: itemCount === undefined
+                            ? new Array(perPage).fill(0).map((_, index) => (_jsx(Tr, { children: _jsx(Td, { children: _jsx("div", { style: { paddingTop: 5, paddingBottom: 5 }, children: _jsx(Skeleton, { height: "27px" }) }) }) }, index)))
+                            : pageItems === undefined
+                                ? new Array(Math.min(perPage, itemCount)).fill(0).map((_, index) => (_jsxs(Tr, { children: [showSelect && _jsx(Td, {}), _jsx(Td, { colSpan: tableColumns.length, children: _jsx("div", { style: { paddingTop: 5, paddingBottom: 5 }, children: _jsx(Skeleton, { height: "27px" }) }) })] }, index)))
+                                : pageItems?.map((item, rowIndex) => (_jsx(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected?.(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect }, keyFn ? keyFn(item) : rowIndex))) })] }), itemCount === 0 && (_jsx("div", { style: { margin: 'auto' }, children: _jsxs(EmptyState, { children: [_jsx(EmptyStateIcon, { icon: SearchIcon }), _jsx(Title, { headingLevel: "h2", size: "lg", children: t('No results found') }), _jsx(EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && (_jsx(EmptyStateSecondaryActions, { children: _jsx(Button, { variant: "link", onClick: clearAllFilters, children: t('Clear all filters') }) }))] }) }))] }));
 }
 function TableHead(props) {
     const { tableColumns: columns, rowActions: itemActions, sort, setSort, sortDirection, setSortDirection, showSelect, onSelect, } = props;

package/mjs/PageTableCard.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { LabelColor } from './components/patternfly-colors';
+import { ITableColumn } from './PageTable';
+import { ITypedAction } from './TypedActions';
+export interface IPageTableCard {
+    id: string | number;
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    cardBody: ReactNode;
+    labels?: {
+        label: string;
+        color?: LabelColor;
+    }[];
+    badge?: string;
+    badgeColor?: LabelColor;
+    badgeTooltip?: string;
+    badgeTooltipTitle?: string;
+    alertTitle?: string;
+    alertContent?: ReactNode;
+    alertVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
+}
+export declare function PageTableCard<T extends object>(props: {
+    item: T;
+    itemToCardFn: (item: T) => IPageTableCard;
+    isSelected?: (item: T) => boolean;
+    selectItem?: (item: T) => void;
+    unselectItem?: (item: T) => void;
+    itemActions?: ITypedAction<T>[];
+    showSelect?: boolean;
+    defaultCardSubtitle?: ReactNode;
+}): JSX.Element;
+export declare function useColumnsToTableCardFn<T extends object>(columns: ITableColumn<T>[], keyFn: (item: T) => string | number): (item: T) => IPageTableCard;

package/mjs/PageTableCard.js

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

package/mjs/PageTableCards.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PageTableProps } from './PageTable';
+export declare type PageTableCardsProps<T extends object> = PageTableProps<T>;
+export declare function PageTableCards<T extends object>(props: PageTableCardsProps<T>): JSX.Element;

package/mjs/PageTableCards.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageSection } from '@patternfly/react-core';
+import { useMemo } from 'react';
+import { Grid } from './components/Grid';
+import { PageTableCard, useColumnsToTableCardFn } from './PageTableCard';
+export function PageTableCards(props) {
+    const { keyFn, pageItems: items, tableColumns, isSelected, selectItem, unselectItem, rowActions, showSelect, defaultCardSubtitle, } = props;
+    const itemToCardFn = useColumnsToTableCardFn(tableColumns, keyFn);
+    const catalogCards = useMemo(() => {
+        return (_jsx(Grid, { size: 470, children: items?.map((item) => (_jsx(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 _jsx(PageSection, { style: { flexGrow: 1 }, children: catalogCards });
+}

package/mjs/PageTableList.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { ITableColumn, PageTableProps } from './PageTable';
+import { ITypedAction } from './TypedActions';
+export declare type PageTableListProps<T extends object> = PageTableProps<T>;
+export declare function PageTableList<T extends object>(props: PageTableListProps<T>): JSX.Element;
+export declare function useColumnsToDataList<T extends object>(tableColumns: ITableColumn<T>[], keyFn: (item: T) => string | number, isSelected?: (item: T) => boolean, selectItem?: (item: T) => void, unselectItem?: (item: T) => void, rowActions?: ITypedAction<T>[], defaultCardSubtitle?: ReactNode, showSelect?: boolean): (item: T) => ReactNode;

package/mjs/PageTableList.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DataList, DataListAction, DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, DropdownPosition, Flex, Stack, Text, Title, } from '@patternfly/react-core';
+import { useCallback, useMemo } from 'react';
+import { TypedActions } from './TypedActions';
+export function PageTableList(props) {
+    const { keyFn, pageItems, tableColumns, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect, } = props;
+    const columnsToDataList = useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect);
+    return (_jsx(DataList, { "aria-label": "TODO", style: { marginTop: -1 }, children: pageItems?.map(columnsToDataList) }));
+}
+export function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect) {
+    const data = useMemo(() => {
+        let cols = tableColumns.filter((column) => column.card !== 'hidden');
+        const nameColumn = cols.shift();
+        const descriptionColumn = cols.find((column) => column.card === 'description');
+        if (descriptionColumn) {
+            cols = cols.filter((column) => column !== descriptionColumn);
+        }
+        return {
+            nameColumn: nameColumn,
+            descriptionColumn: descriptionColumn,
+            columns: cols.filter((column) => column.list !== 'secondary'),
+            secondary: cols.filter((column) => column.list === 'secondary'),
+        };
+    }, [tableColumns]);
+    const onSelectClick = useCallback((item) => {
+        if (isSelected?.(item)) {
+            unselectItem?.(item);
+        }
+        else {
+            selectItem?.(item);
+        }
+    }, [isSelected, selectItem, unselectItem]);
+    return useCallback((item) => {
+        const key = keyFn(item);
+        const isItemSelected = isSelected?.(item);
+        return (_jsx(DataListItem, { "aria-labelledby": `data-list-${key}`, isExpanded: isItemSelected, children: _jsxs(DataListItemRow, { children: [showSelect && (_jsx(DataListCheck, { "aria-labelledby": `data-list-check-${key}`, name: `data-list-check-${key}`, isChecked: isSelected?.(item), onClick: () => onSelectClick(item) })), _jsx(DataListItemCells, { dataListCells: [
+                            _jsx(DataListCell, { children: _jsx(Flex, { children: _jsxs(Stack, { hasGutter: true, children: [_jsxs(Stack, { children: [_jsx(Title, { headingLevel: "h2", style: { marginTop: -4 }, children: _jsx("span", { id: `data-list-${key}`, children: data.nameColumn?.cell(item) }) }), data.descriptionColumn ? (_jsx(Text, { component: "small", style: { opacity: 0.7 }, children: data.descriptionColumn.cell(item) })) : (defaultCardSubtitle && (_jsx(Text, { component: "small", style: { opacity: 0.7 }, children: defaultCardSubtitle })))] }), _jsx(DescriptionList, { isCompact: true, children: data.columns.map((column) => {
+                                                    const value = column.cell(item);
+                                                    if (!value)
+                                                        return _jsx(_Fragment, {});
+                                                    return (_jsxs(DescriptionListGroup, { children: [!column.hideLabel && (_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: column.header }) })), _jsx(DescriptionListDescription, { children: column.cell(item) })] }, column.header));
+                                                }) })] }) }) }, "primary"),
+                            _jsx(DataListCell, { children: _jsx(Flex, { children: _jsx(DescriptionList, { isCompact: true, children: data.secondary.map((column) => {
+                                            const value = column.cell(item);
+                                            if (!value)
+                                                return _jsx(_Fragment, {});
+                                            return (_jsxs(DescriptionListGroup, { children: [!column.hideLabel && (_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: column.header }) })), _jsx(DescriptionListDescription, { children: column.cell(item) })] }, column.header));
+                                        }) }) }) }, "secondary"),
+                        ] }), rowActions && (_jsx(DataListAction, { "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' }, children: _jsx(TypedActions, { actions: rowActions, position: DropdownPosition.right, selectedItem: item }) }))] }) }, key));
+    }, [
+        data.columns,
+        data.descriptionColumn,
+        data.nameColumn,
+        data.secondary,
+        defaultCardSubtitle,
+        isSelected,
+        keyFn,
+        onSelectClick,
+        rowActions,
+        showSelect,
+    ]);
+}

package/mjs/PageTableViewType.d.ts

@@ -0,0 +1,6 @@
+export declare enum PageTableViewTypeE {
+    Table = "table",
+    List = "list",
+    Cards = "cards"
+}
+export declare type PageTableViewType = 'table' | 'list' | 'cards';

package/mjs/PageTableViewType.js

@@ -0,0 +1,6 @@
+export var PageTableViewTypeE;
+(function (PageTableViewTypeE) {
+    PageTableViewTypeE["Table"] = "table";
+    PageTableViewTypeE["List"] = "list";
+    PageTableViewTypeE["Cards"] = "cards";
+})(PageTableViewTypeE || (PageTableViewTypeE = {}));

package/mjs/PageToolbar.d.ts

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
+import { PageTableViewType } from './PageTableViewType';
 import { ITypedAction } from './TypedActions';
 export interface IItemFilter<T extends object> {
     label: string;
@@ -53,5 +54,7 @@ export declare type PagetableToolbarProps<T extends object> = {
     onSelect?: (item: T) => void;
     disableBorderBottom?: boolean;
     showSelect?: boolean;
+    viewType: PageTableViewType;
+    setViewType: (viewType: PageTableViewType) => void;
 };
 export declare function PageTableToolbar<T extends object>(props: PagetableToolbarProps<T>): JSX.Element;

package/mjs/PageToolbar.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Flex, FlexItem, InputGroup, Pagination, PaginationVariant, Select, SelectOption, SelectVariant, Skeleton, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Toolbar, ToolbarContent, ToolbarFilter, ToolbarGroup, ToolbarItem, ToolbarToggleGroup, Tooltip, } from '@patternfly/react-core';
-import { ArrowRightIcon, ColumnsIcon, FilterIcon, TimesIcon } from '@patternfly/react-icons';
+import { Button, Flex, FlexItem, InputGroup, Pagination, PaginationVariant, Select, SelectOption, SelectVariant, Skeleton, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, ToggleGroup, ToggleGroupItem, Toolbar, ToolbarContent, ToolbarFilter, ToolbarGroup, ToolbarItem, ToolbarToggleGroup, Tooltip, } from '@patternfly/react-core';
+import { ArrowRightIcon, ColumnsIcon, FilterIcon, ListIcon, TableIcon, ThLargeIcon, TimesIcon, } from '@patternfly/react-icons';
 import { Fragment, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BulkSelector } from './components/BulkSelector';
 import { SingleSelect2 } from './components/SingleSelect';
 import { useBreakpoint } from './components/useBreakPoint';
+import { PageTableViewTypeE } from './PageTableViewType';
 import { useSettings } from './Settings';
 import { TypedActions, TypedActionType } from './TypedActions';
 export function toolbarActionsHaveBulkActions(actions) {
@@ -20,6 +21,7 @@ export function toolbarActionsHaveBulkActions(actions) {
 export function PageTableToolbar(props) {
     const { itemCount, page, perPage, setPage, setPerPage, toolbarFilters, selectedItems, filters, setFilters, clearAllFilters, openColumnModal, disableBorderBottom, } = props;
     const sm = useBreakpoint('md');
+    const { viewType, setViewType } = props;
     let { toolbarActions } = props;
     toolbarActions = toolbarActions ?? [];
     const onSetPage = useCallback((_event, page) => setPage(page), [setPage]);
@@ -96,7 +98,29 @@ export function PageTableToolbar(props) {
                                             return newState;
                                         });
                                     }, showToolbarItem: false, children: _jsx(_Fragment, {}) }, filter.label));
-                            })] }) })), _jsx(ToolbarGroup, { variant: "button-group", style: { zIndex: 302 }, children: _jsx(ToolbarItem, { children: _jsx(TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: ToolbarItem }) }) }), _jsx(ToolbarGroup, { variant: "button-group", style: { zIndex: 302 }, children: openColumnModal && (_jsx(ToolbarItem, { children: _jsx(Tooltip, { content: 'Manage columns', children: _jsx(Button, { variant: "plain", icon: _jsx(ColumnsIcon, {}), onClick: openColumnModal }) }) })) }), _jsx(ToolbarItem, { variant: "pagination", visibility: { default: 'hidden', '2xl': 'visible' }, children: _jsx(Pagination, { variant: PaginationVariant.top, isCompact: true, itemCount: itemCount, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: { marginTop: -8, marginBottom: -8 } }) })] }) }));
+                            })] }) })), _jsx(ToolbarGroup, { variant: "button-group", style: { zIndex: 302 }, children: _jsx(ToolbarItem, { children: _jsx(TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: ToolbarItem }) }) }), _jsx("div", { style: { flexGrow: 1 } }), _jsxs(ToolbarGroup, { variant: "button-group", style: { zIndex: 302 }, children: [openColumnModal && viewType === 'table' && (_jsx(ToolbarItem, { children: _jsx(Tooltip, { content: 'Manage columns', children: _jsx(Button, { variant: "plain", icon: _jsx(ColumnsIcon, {}), onClick: openColumnModal }) }) })), _jsx(ToolbarItem, { children: _jsx(ToggleGroup, { children: [PageTableViewTypeE.Table, PageTableViewTypeE.List, PageTableViewTypeE.Cards]
+                                    // .filter((vt) => {
+                                    //   switch (vt) {
+                                    //     case PageTableViewTypeE.Cards:
+                                    //       return props.itemToCardFn !== undefined
+                                    //     case PageTableViewTypeE.list:
+                                    //       return false
+                                    //     case PageTableViewTypeE.table:
+                                    //       return props.tableColumns !== undefined
+                                    //     default:
+                                    //       return false
+                                    //   }
+                                    // })
+                                    .map((vt) => {
+                                    switch (vt) {
+                                        case PageTableViewTypeE.Cards:
+                                            return (_jsx(Tooltip, { content: 'Card view', position: "top-end", enableFlip: false, children: _jsx(ToggleGroupItem, { icon: _jsx(ThLargeIcon, {}), isSelected: viewType === PageTableViewTypeE.Cards, onClick: () => setViewType?.(PageTableViewTypeE.Cards) }) }, vt));
+                                        case PageTableViewTypeE.List:
+                                            return (_jsx(Tooltip, { content: 'List view', position: "top-end", enableFlip: false, children: _jsx(ToggleGroupItem, { icon: _jsx(ListIcon, {}), isSelected: viewType === PageTableViewTypeE.List, onClick: () => setViewType?.(PageTableViewTypeE.List) }) }));
+                                        case PageTableViewTypeE.Table:
+                                            return (_jsx(Tooltip, { content: 'Table view', position: "top-end", enableFlip: false, children: _jsx(ToggleGroupItem, { icon: _jsx(TableIcon, {}), isSelected: viewType === PageTableViewTypeE.Table, onClick: () => setViewType?.(PageTableViewTypeE.Table) }) }));
+                                    }
+                                }) }) })] }), _jsx(ToolbarItem, { visibility: { default: 'hidden', '2xl': 'visible' }, children: _jsx(Pagination, { variant: PaginationVariant.top, isCompact: true, itemCount: itemCount, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: { marginTop: -8, marginBottom: -8 } }) })] }) }));
 }
 function ToolbarFilterInput(props) {
     const { filter } = props;

package/mjs/TypedActions/TypedActions.d.ts

@@ -45,17 +45,20 @@ export declare function TypedActionsDropdown<T extends object>(props: {
     label?: string;
     isPrimary?: boolean;
     selectedItems?: T[];
+    selectedItem?: T;
     position?: DropdownPosition;
 }): JSX.Element;
 export declare function DropdownActionItem<T extends object>(props: {
     action: ITypedAction<T>;
     selectedItems: T[];
+    selectedItem?: T;
     hasIcons: boolean;
     index: number;
 }): JSX.Element;
 export declare function TypedActions<T extends object>(props: {
     actions: ITypedAction<T>[];
     selectedItems?: T[];
+    selectedItem?: T;
     wrapper?: ComponentClass | FunctionComponent;
     collapse?: WindowSize;
     noPrimary?: boolean;

package/mjs/TypedActions/TypedActions.js

@@ -3,7 +3,7 @@ import { ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggl
 import { CircleIcon } from '@patternfly/react-icons';
 import { useCallback, useMemo, useState } from 'react';
 import { useBreakpoint } from '../components/useBreakPoint';
-import { TypedActionsButtons, TypedActionButton } from './TypedActionsButtons';
+import { TypedActionButton, TypedActionsButtons } from './TypedActionsButtons';
 export var TypedActionType;
 (function (TypedActionType) {
     TypedActionType["seperator"] = "seperator";
@@ -13,7 +13,7 @@ export var TypedActionType;
     TypedActionType["dropdown"] = "dropdown";
 })(TypedActionType || (TypedActionType = {}));
 export function TypedActionsDropdown(props) {
-    const { actions, label, isPrimary = false, selectedItems } = props;
+    const { actions, label, isPrimary = false, selectedItems, selectedItem } = props;
     const [dropdownOpen, setDropdownOpen] = useState(false);
     const hasItemActions = useMemo(() => !actions.every((action) => action.type !== TypedActionType.bulk), [actions]);
     const hasIcons = useMemo(() => actions.find((action) => action.type !== TypedActionType.seperator && action.icon !== undefined) !== undefined, [actions]);
@@ -24,12 +24,21 @@ export function TypedActionsDropdown(props) {
                 ? {
                     color: 'var(--pf-global--Color--light-100)',
                 }
-                : {}, children: label }), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map((action, index) => (_jsx(DropdownActionItem, { action: action, selectedItems: selectedItems ?? [], hasIcons: hasIcons, index: index }, 'label' in action ? action.label : `action-${index}`))), position: props.position, style: { zIndex: 201 } }));
+                : {}, children: label }), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map((action, index) => (_jsx(DropdownActionItem, { action: action, selectedItems: selectedItems ?? [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : `action-${index}`))), position: props.position, style: { zIndex: 201 } }));
 }
 export function DropdownActionItem(props) {
-    const { action, selectedItems, hasIcons, index } = props;
-    // TODO case TypedActionType.single?
+    const { action, selectedItems, selectedItem, hasIcons, index } = props;
     switch (action.type) {
+        case TypedActionType.single: {
+            let Icon = action.icon;
+            if (!Icon && hasIcons)
+                Icon = TransparentIcon;
+            const tooltip = action.tooltip;
+            const isDisabled = false;
+            return (_jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(DropdownItem, { onClick: () => selectedItem && action.onClick(selectedItem), isAriaDisabled: isDisabled, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, style: {
+                        color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
+                    }, children: action.label }) }, action.label));
+        }
         case TypedActionType.button:
         case TypedActionType.bulk: {
             let Icon = action.icon;

package/mjs/components/Details.d.ts

@@ -32,7 +32,7 @@ export declare function DetailsList(props: {
     children?: ReactNode;
 }): JSX.Element;
 export declare function Detail(props: {
-    label: string;
+    label?: string;
     children?: ReactNode;
 }): JSX.Element;
 export declare function DetailsSkeleton(): JSX.Element;

package/mjs/components/Details.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Skeleton, Split, SplitItem, Stack, } from '@patternfly/react-core';
+import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Skeleton, Split, SplitItem, Stack, Text, } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { CopyCell, SinceCell } from '../PageCells';
 import { useSettings } from '../Settings';
@@ -61,7 +61,7 @@ export function DetailsList(props) {
 export function Detail(props) {
     if (!props.children)
         return _jsx(_Fragment, {});
-    return (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: props.label }), _jsx(DescriptionListDescription, { id: props.label.toLowerCase().split(' ').join('-'), children: props.children })] }));
+    return (_jsxs(DescriptionListGroup, { children: [props.label && (_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: props.label }) })), _jsx(DescriptionListDescription, { id: props.label?.toLowerCase().split(' ').join('-'), children: props.children })] }));
 }
 export function DetailsSkeleton() {
     return (_jsxs(Stack, { hasGutter: true, children: [_jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {})] }));

package/mjs/components/patternfly-colors.d.ts

@@ -11,3 +11,13 @@ export declare const pfDanger = "var(--pf-global--danger-color--100)";
 export declare const pfWarning = "var(--pf-global--warning-color--100)";
 export declare const pfInfo = "var(--pf-global--info-color--100)";
 export declare const pfDisabled = "var(--pf-global--disabled-color--100)";
+export declare enum LabelColorE {
+    blue = "blue",
+    cyan = "cyan",
+    green = "green",
+    orange = "orange",
+    purple = "purple",
+    red = "red",
+    grey = "grey"
+}
+export declare type LabelColor = 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';

package/mjs/components/patternfly-colors.js

@@ -26,3 +26,13 @@ export const pfDanger = 'var(--pf-global--danger-color--100)';
 export const pfWarning = 'var(--pf-global--warning-color--100)';
 export const pfInfo = 'var(--pf-global--info-color--100)';
 export const pfDisabled = 'var(--pf-global--disabled-color--100)';
+export var LabelColorE;
+(function (LabelColorE) {
+    LabelColorE["blue"] = "blue";
+    LabelColorE["cyan"] = "cyan";
+    LabelColorE["green"] = "green";
+    LabelColorE["orange"] = "orange";
+    LabelColorE["purple"] = "purple";
+    LabelColorE["red"] = "red";
+    LabelColorE["grey"] = "grey";
+})(LabelColorE || (LabelColorE = {}));

package/mjs/index.d.ts

@@ -6,7 +6,6 @@ export * from './components/Help';
 export * from './components/patternfly-colors';
 export * from './components/useBreakPoint';
 export * from './PageBody';
-export * from './PageCatalog';
 export * from './PageCells';
 export * from './PageDataList';
 export * from './PageDialog';
@@ -15,6 +14,7 @@ export * from './PageFramework';
 export * from './PageHeader';
 export * from './PageLayout';
 export * from './PageTable';
+export * from './PageTableCards';
 export * from './PageTabs';
 export * from './PageToolbar';
 export * from './TypedActions';

package/mjs/index.js

@@ -6,7 +6,6 @@ export * from './components/Help';
 export * from './components/patternfly-colors';
 export * from './components/useBreakPoint';
 export * from './PageBody';
-export * from './PageCatalog';
 export * from './PageCells';
 export * from './PageDataList';
 export * from './PageDialog';
@@ -15,6 +14,7 @@ export * from './PageFramework';
 export * from './PageHeader';
 export * from './PageLayout';
 export * from './PageTable';
+export * from './PageTableCards';
 export * from './PageTabs';
 export * from './PageToolbar';
 export * from './TypedActions';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "Framework for building consistent responsive web applications using PatternFly.",
-  "version": "0.0.232",
+  "version": "0.0.234",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {