@ansible/ansible-ui-framework 0.0.259 → 0.0.261

package/mjs/PageTable.js

@@ -1,191 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateSecondaryActions, EmptyStateVariant, Skeleton, Title, } from '@patternfly/react-core';
-import { ExclamationCircleIcon, PlusCircleIcon, SearchIcon } from '@patternfly/react-icons';
-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 (_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;
-    const showSelect = props.showSelect ||
-        toolbarActions?.find((toolbarAction) => TypedActionType.bulk === toolbarAction.type) !==
-            undefined;
-    const containerRef = useRef(null);
-    const [scroll, setScroll] = useState({
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-    });
-    const updateScroll = useCallback((div) => {
-        if (!div)
-            return;
-        setScroll({
-            top: div.scrollTop,
-            bottom: div.scrollHeight - div.clientHeight - div.scrollTop,
-            left: div.scrollLeft,
-            right: div.scrollWidth - div.clientWidth - div.scrollLeft,
-        });
-    }, []);
-    const onScroll = useCallback((event) => updateScroll(event.currentTarget), [updateScroll]);
-    useResizeObserver(containerRef, () => updateScroll(containerRef.current));
-    useEffect(() => updateScroll(containerRef.current), [updateScroll]);
-    const settings = useSettings();
-    if (error) {
-        return (_jsx("div", { style: {
-                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-                height: '100%',
-            }, children: _jsxs(EmptyState, { variant: EmptyStateVariant.small, style: {
-                    paddingTop: 64,
-                }, children: [_jsx(EmptyStateIcon, { icon: ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), _jsx(Title, { headingLevel: "h2", size: "lg", children: props.errorStateTitle }), _jsx(EmptyStateBody, { children: error.message })] }) }));
-    }
-    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("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;
-    const settings = useSettings();
-    const getColumnSort = useCallback((columnIndex, column) => {
-        if (!column.sort)
-            return undefined;
-        return {
-            onSort: (_event, _columnIndex, sortByDirection) => {
-                if (column.sort) {
-                    setSort?.(column.sort);
-                    setSortDirection?.(sortByDirection);
-                }
-            },
-            sortBy: {
-                index: column.sort === sort ? columnIndex : undefined,
-                direction: column.sort === sort ? sortDirection : undefined,
-                defaultDirection: column.defaultSortDirection,
-            },
-            columnIndex,
-        };
-    }, [setSort, setSortDirection, sort, sortDirection]);
-    return (_jsx(Thead, { children: _jsxs(Tr, { children: [(showSelect || onSelect) && (_jsx(Th, { isStickyColumn: true, style: {
-                        width: '0%',
-                        backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-                    }, stickyMinWidth: "45px", hasRightBorder: props.scrollLeft, children: "\u00A0" })), columns
-                    .filter((column) => column.enabled !== false)
-                    .map((column, index) => {
-                    return (_jsx(Th, { modifier: "fitContent", style: {
-                            minWidth: column.minWidth,
-                            maxWidth: column.maxWidth,
-                            backgroundColor: settings.theme === 'dark'
-                                ? 'var(--pf-global--BackgroundColor--300)'
-                                : undefined,
-                        }, sort: getColumnSort(index, column), children: column.header }, column.header));
-                }), itemActions !== undefined && (_jsx(Th, { style: {
-                        paddingRight: 8,
-                        paddingLeft: 0,
-                        width: '0%',
-                        right: 0,
-                        backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-                    }, isStickyColumn: true, stickyMinWidth: "45px", className: props.scrollRight ? 'pf-m-border-left' : undefined, children: "\u00A0" }))] }) }));
-}
-function TableRow(props) {
-    const { columns, selectItem, unselectItem, unselectAll, isItemSelected, item, rowActions, rowIndex, showSelect, onSelect, } = props;
-    const md = useBreakpoint('xl');
-    return (_jsxs(Tr, { className: isItemSelected ? 'selected' : undefined, 
-        // style={{ backgroundColor: theme === ThemeE.Dark ? 'transparent' : undefined }}
-        isRowSelected: isItemSelected, style: { boxShadow: 'unset' }, children: [showSelect && (_jsx(Th, { select: isItemSelected !== undefined
-                    ? {
-                        onSelect: (_event, isSelecting) => {
-                            if (isSelecting) {
-                                selectItem?.(item);
-                            }
-                            else {
-                                unselectItem?.(item);
-                            }
-                        },
-                        isSelected: isItemSelected,
-                    }
-                    : undefined, style: { width: '0%', paddingLeft: md ? undefined : 20, paddingRight: 16 }, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && (_jsx(Td, { select: {
-                    rowIndex,
-                    onSelect: () => {
-                        unselectAll?.();
-                        selectItem?.(item);
-                        onSelect?.(item);
-                    },
-                    isSelected: isItemSelected ?? false,
-                    // disable: !isRepoSelectable(repo),
-                    variant: 'radio',
-                }, style: {
-                    width: '0%',
-                    paddingLeft: md ? undefined : 20,
-                    position: 'sticky',
-                    left: 0,
-                    background: 'var(--pf-c-table__sticky-column--BackgroundColor)',
-                    zIndex: 1,
-                } })), _jsx(TableCells, { rowIndex: rowIndex, columns: columns, item: item, rowActions: rowActions, scrollLeft: props.scrollLeft, scrollRight: props.scrollRight })] }));
-}
-function TableCells(props) {
-    const { columns, item, rowActions, rowIndex } = props;
-    const actions = useTypedActionsToTableActions({
-        actions: rowActions ?? [],
-        item,
-        collapse: 'xxl',
-    });
-    return (_jsxs(Fragment, { children: [columns
-                .filter((column) => column.enabled !== false)
-                .map((column) => {
-                return (_jsx(Td, { dataLabel: column.header, modifier: "nowrap", children: column.cell(item) }, column.header));
-            }), actions !== undefined && actions.length > 0 && (_jsx(Th
-            // isActionCell
-            , { 
-                // isActionCell
-                style: {
-                    zIndex: 100 - rowIndex,
-                    paddingRight: 8,
-                    paddingLeft: 8,
-                    width: '0%',
-                    right: 0,
-                    // display: 'flex',
-                }, isStickyColumn: true, stickyMinWidth: "0px", className: props.scrollRight ? 'pf-m-border-left' : undefined, children: _jsx("div", { style: { display: 'flex' }, children: _jsx(ActionsColumn
-                    // dropdownDirection="up" // TODO handle....
-                    , { 
-                        // dropdownDirection="up" // TODO handle....
-                        items: actions }) }) }))] }));
-}

package/mjs/PageTableCard.js

@@ -1,69 +0,0 @@
-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.js

@@ -1,23 +0,0 @@
-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/PageTableDetails.js

@@ -1,11 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { DescriptionList } from '@patternfly/react-core';
-import { Detail } from './components/Details';
-export function TableDetails(props) {
-    const { item, columns } = props;
-    if (!item)
-        return _jsx(_Fragment, {});
-    return (_jsx(DescriptionList, { isCompact: true, children: columns.map((column) => (_jsx(Detail, { label: column.hideLabel ? undefined : column.header, children: column.cell(item) }, column.id))) }));
-}

package/mjs/PageTableList.js

@@ -1,62 +0,0 @@
-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"),
-                            data.secondary.length > 0 ? (_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")) : null,
-                        ] }), 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.js

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

package/mjs/PageTabs.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider, Flex, FlexItem, PageSection, PageSectionTypes, Skeleton, Tab, Tabs, } from '@patternfly/react-core';
-import { Children, isValidElement, useCallback, useState, } from 'react';
-export function PageTabs(props) {
-    const [activeKey, setActiveKey] = useState(0);
-    const onSelect = useCallback((_, key) => setActiveKey(key), [setActiveKey]);
-    const children = Children.toArray(props.children);
-    const tabs = children.map((child, index) => {
-        if (isValidElement(child)) {
-            if (child.type === PageTab) {
-                const title = child.props.title;
-                return (_jsx(Tab, { title: title ? title : _jsx(Skeleton, { width: "60px" }), eventKey: index }, title ?? index));
-            }
-        }
-        return child;
-    });
-    const content = children[activeKey];
-    return (_jsxs(_Fragment, { children: [_jsx(PageSection, { type: PageSectionTypes.tabs, children: _jsxs(Flex, { spaceItems: { default: 'spaceItemsNone' }, children: [props.preComponents && (_jsxs(_Fragment, { children: [_jsx(FlexItem
-                                // style={{ paddingLeft: 16 }}
-                                , { children: props.preComponents }), _jsx(Divider, { orientation: { default: 'vertical' }, component: "div" })] })), _jsx(FlexItem, { grow: { default: 'grow' }, children: _jsx(Tabs, { activeKey: activeKey, onSelect: onSelect, inset: props.preComponents
-                                    ? undefined
-                                    : {
-                                        default: 'insetNone',
-                                        sm: 'insetNone',
-                                        md: 'insetNone',
-                                        lg: 'insetNone',
-                                        xl: 'insetSm',
-                                        ['2xl']: 'insetSm',
-                                    }, hasBorderBottom: false, children: tabs }) }), props.postComponents && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: { default: 'vertical' } }), _jsx(FlexItem, { style: { paddingRight: 16 }, children: props.postComponents })] }))] }) }), _jsx(Divider, {}), content] }));
-}
-export function PageTab(props) {
-    return _jsx(_Fragment, { children: props.children });
-}
-export function PageTabsOld(props) {
-    const { activeKey, setActiveKey } = props;
-    const onSelect = useCallback((_, key) => setActiveKey(key), [setActiveKey]);
-    return (_jsx(PageSection, { type: PageSectionTypes.tabs, style: { flexGrow: 1 }, children: _jsx(Tabs, { activeKey: activeKey, onSelect: onSelect, inset: {
-                default: 'insetNone',
-                sm: 'insetNone',
-                md: 'insetNone',
-                lg: 'insetNone',
-                xl: 'insetSm',
-                ['2xl']: 'insetSm',
-            }, children: props.children }) }));
-}

package/mjs/PageToolbar.js

@@ -1,172 +0,0 @@
-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, 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) {
-    if (!actions)
-        return false;
-    for (const action of actions) {
-        if (action.type === 'bulk')
-            return true;
-    }
-    return false;
-}
-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]);
-    const onPerPageSelect = useCallback((_event, perPage) => setPerPage(perPage), [setPerPage]);
-    const showSearchAndFilters = toolbarFilters !== undefined;
-    const showToolbarActions = toolbarActions !== undefined && toolbarActions.length > 0;
-    const showSelect = props.showSelect === true ||
-        (selectedItems !== undefined &&
-            toolbarActions &&
-            toolbarActions.find((toolbarAction) => TypedActionType.bulk === toolbarAction.type));
-    const showToolbar = showSelect || showSearchAndFilters || showToolbarActions;
-    const [selectedFilter, setSeletedFilter] = useState(() => toolbarFilters ? (toolbarFilters?.length > 0 ? toolbarFilters[0].key : '') : '');
-    const settings = useSettings();
-    if (!showToolbar) {
-        return _jsx(Fragment, {});
-    }
-    if (itemCount === undefined) {
-        return (_jsx(Toolbar, { style: {
-                borderBottom: disableBorderBottom
-                    ? undefined
-                    : 'thin solid var(--pf-global--BorderColor--100)',
-                paddingBottom: sm ? undefined : 8,
-                paddingTop: sm ? undefined : 8,
-                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-            }, children: _jsx(ToolbarContent, { children: _jsx(ToolbarItem, { style: { width: '100%' }, children: _jsx(Skeleton, { height: "36px" }) }) }) }));
-    }
-    return (_jsx(Toolbar, { clearAllFilters: clearAllFilters, style: {
-            borderBottom: disableBorderBottom
-                ? undefined
-                : 'thin solid var(--pf-global--BorderColor--100)',
-            paddingBottom: sm ? undefined : 8,
-            paddingTop: sm ? undefined : 8,
-            backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-        }, children: _jsxs(ToolbarContent, { children: [showSelect && (_jsx(ToolbarGroup, { children: _jsx(ToolbarItem, { variant: "bulk-select", children: _jsx(BulkSelector, { ...props }) }) })), toolbarFilters && toolbarFilters.length > 0 && (_jsx(ToolbarToggleGroup, { toggleIcon: _jsx(FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 }, children: _jsxs(ToolbarGroup, { variant: "filter-group", children: [_jsx(ToolbarItem, { children: _jsx(SingleSelect2, { onChange: setSeletedFilter, value: selectedFilter, children: toolbarFilters.map((filter) => (_jsx(SelectOption, { value: filter.key, children: _jsxs(Flex, { spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' }, children: [_jsx(FlexItem, { style: { paddingLeft: 4, paddingRight: 8 }, children: _jsx(FilterIcon, {}) }), _jsx(FlexItem, { children: filter.label })] }) }, filter.key))) }) }), _jsx(ToolbarItem, { children: _jsx(ToolbarFilterInput, { filter: toolbarFilters.find((filter) => filter.key === selectedFilter), addFilter: (value) => {
-                                        let values = filters?.[selectedFilter];
-                                        if (!values)
-                                            values = [];
-                                        if (!values.includes(value))
-                                            values.push(value);
-                                        setFilters?.({ ...filters, [selectedFilter]: values });
-                                    }, removeFilter: (value) => {
-                                        let values = filters?.[selectedFilter];
-                                        if (!values)
-                                            values = [];
-                                        values = values.filter((v) => v !== value);
-                                        setFilters?.({ ...filters, [selectedFilter]: values });
-                                    }, values: filters?.[selectedFilter] ?? [] }) }), toolbarFilters.map((filter) => {
-                                const values = filters?.[filter.key] ?? [];
-                                return (_jsx(ToolbarFilter, { categoryName: filter.label, chips: values.map((value) => {
-                                        return 'options' in filter
-                                            ? filter.options.find((o) => o.value === value)?.label ?? value
-                                            : value;
-                                    }), deleteChip: (_group, value) => {
-                                        setFilters?.((filters) => {
-                                            //TODO bug here where value is actually select filter option label... need to map
-                                            const newState = { ...filters };
-                                            value = typeof value === 'string' ? value : value.key;
-                                            let values = filters[filter.key];
-                                            if (values) {
-                                                values = values.filter((v) => v !== value);
-                                                if (values.length === 0) {
-                                                    delete newState[filter.key];
-                                                }
-                                                else {
-                                                    newState[filter.key] = values;
-                                                }
-                                            }
-                                            return newState;
-                                        });
-                                    }, deleteChipGroup: () => {
-                                        setFilters?.((filters) => {
-                                            const newState = { ...filters };
-                                            delete newState[filter.key];
-                                            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("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;
-    switch (filter?.type) {
-        case 'string':
-            return _jsx(ToolbarTextFilter, { ...props, placeholder: filter.placeholder });
-        case 'select':
-            return (_jsx(ToolbarSelectFilter, { ...props, options: filter.options, placeholder: filter.placeholder }));
-    }
-    return _jsx(_Fragment, {});
-}
-function ToolbarTextFilter(props) {
-    const [value, setValue] = useState('');
-    return (_jsxs(InputGroup, { children: [_jsxs(TextInputGroup, { style: { minWidth: 220 }, children: [_jsx(TextInputGroupMain
-                    // ref={ref}
-                    , { 
-                        // ref={ref}
-                        value: value, onChange: setValue, onKeyUp: (event) => {
-                            if (value && event.key === 'Enter') {
-                                props.addFilter(value);
-                                setValue('');
-                                // ref.current?.focus() // Does not work because PF does not expose ref
-                            }
-                        }, placeholder: props.placeholder }), value !== '' && (_jsx(TextInputGroupUtilities, { children: _jsx(Button, { variant: "plain", "aria-label": "add filter", onClick: () => setValue(''), style: { opacity: value ? undefined : 0 }, 
-                            // tabIndex={value ? undefined : -1}
-                            tabIndex: -1, children: _jsx(TimesIcon, {}) }) }))] }), !value ? (_jsx(_Fragment, {})) : (
-            // <Button variant={'control'} aria-label="add filter">
-            //     <SearchIcon />
-            // </Button>
-            _jsx(Button, { variant: value ? 'primary' : 'control', "aria-label": "add filter", onClick: () => {
-                    props.addFilter(value);
-                    setValue('');
-                }, children: _jsx(ArrowRightIcon, {}) }))] }));
-}
-function ToolbarSelectFilter(props) {
-    const { t } = useTranslation();
-    const { addFilter, removeFilter, options, values } = props;
-    const [open, setOpen] = useState(false);
-    const onSelect = useCallback((e, value) => {
-        if (values.includes(value.toString())) {
-            removeFilter(value.toString());
-        }
-        else {
-            addFilter(value.toString());
-        }
-    }, [addFilter, removeFilter, values]);
-    const selections = values;
-    return (_jsx(_Fragment, { children: _jsx(Select, { variant: SelectVariant.checkbox, isOpen: open, onToggle: setOpen, selections: selections, onSelect: onSelect, placeholderText: values.length ? t('Selected') : _jsx("span", { style: { opacity: 0.7 }, children: props.placeholder }), children: options.map((option) => (_jsx(SelectOption, { id: option.value, value: option.value, children: option.label }, option.value))) }) }));
-}