@ansible/ansible-ui-framework 0.0.190

package/mjs/framework/PageTable.js

@@ -0,0 +1,170 @@
+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 { 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 { 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 }) })] }) }));
+}
+export function PageTable(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();
+    const { openColumnModal, columnModal, managedColumns } = useColumnModal(tableColumns);
+    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(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 })] }));
+}
+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/framework/PageTabs.d.ts

@@ -0,0 +1,15 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+export declare function PageTabs(props: {
+    children: ReactNode;
+    preComponents?: ReactNode;
+    postComponents?: ReactNode;
+}): JSX.Element;
+export declare function PageTab(props: {
+    title?: string;
+    children: ReactNode;
+}): JSX.Element;
+export declare function PageTabsOld(props: {
+    activeKey: string | number;
+    setActiveKey: Dispatch<SetStateAction<string | number>>;
+    children: ReactNode;
+}): JSX.Element;

package/mjs/framework/PageTabs.js

@@ -0,0 +1,45 @@
+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/framework/PageToolbar.d.ts

@@ -0,0 +1,57 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ITypedAction } from './TypedActions';
+export interface IItemFilter<T extends object> {
+    label: string;
+    type?: 'search' | 'filter';
+    options: {
+        label: string;
+        value: string;
+    }[];
+    filter: (item: T, values: string[]) => boolean;
+}
+export declare type SetFilterValues<T extends object> = (filter: IItemFilter<T>, values: string[]) => void;
+export declare function toolbarActionsHaveBulkActions<T extends object>(actions?: ITypedAction<T>[]): boolean;
+export interface IToolbarStringFilter {
+    key: string;
+    label: string;
+    type: 'string';
+    query: string;
+    placeholder?: string;
+}
+export interface IToolbarSelectFilter {
+    key: string;
+    label: string;
+    type: 'select';
+    options: {
+        label: string;
+        value: string;
+    }[];
+    query: string;
+    placeholder?: string;
+}
+export declare type IToolbarFilter = IToolbarStringFilter | IToolbarSelectFilter;
+export declare type IFilterState = Record<string, string[] | undefined>;
+export declare type PagetableToolbarProps<T extends object> = {
+    openColumnModal?: () => void;
+    keyFn: (item: T) => string | number;
+    itemCount?: number;
+    toolbarActions?: ITypedAction<T>[];
+    toolbarFilters?: IToolbarFilter[];
+    filters?: Record<string, string[]>;
+    setFilters?: Dispatch<SetStateAction<Record<string, string[]>>>;
+    clearAllFilters?: () => void;
+    page: number;
+    perPage: number;
+    setPage: (page: number) => void;
+    setPerPage: (perPage: number) => void;
+    isSelected?: (item: T) => boolean;
+    selectedItems?: T[];
+    selectItem?: (item: T) => void;
+    unselectItem?: (item: T) => void;
+    selectItems?: (items: T[]) => void;
+    unselectAll?: () => void;
+    onSelect?: (item: T) => void;
+    disableBorderBottom?: boolean;
+    showSelect?: boolean;
+};
+export declare function PageTableToolbar<T extends object>(props: PagetableToolbarProps<T>): JSX.Element;

package/mjs/framework/PageToolbar.js

@@ -0,0 +1,148 @@
+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 { 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 { 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');
+    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));
+                            })] }) })), _jsxs(ToolbarGroup, { variant: "button-group", style: { zIndex: 302 }, children: [_jsx(TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: ToolbarItem }), 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 } }) })] }) }));
+}
+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))) }) }));
+}

package/mjs/framework/Settings.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface Settings {
+    theme?: 'system' | 'light' | 'dark';
+    tableLayout?: 'compact' | 'comfortable';
+    formColumns?: 'single' | 'multiple';
+    formLayout?: 'vertical' | 'horizontal';
+    borders?: boolean;
+}
+export declare const SettingsContext: import("react").Context<[Settings, (settings: Settings) => void]>;
+export declare function useSettings(): Settings;
+export declare function SettingsProvider(props: {
+    children?: ReactNode;
+}): JSX.Element;
+export declare function useSettingsDialog(t: (t: string) => string): () => void;
+export declare function SettingsDialog(props: {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    t: (t: string) => string;
+}): JSX.Element;

package/mjs/framework/Settings.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Form, Modal, ModalVariant, SelectOption } from '@patternfly/react-core';
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { SingleSelect } from './components/SingleSelect';
+import { usePageDialog } from './PageDialog';
+export const SettingsContext = createContext([
+    {},
+    () => null,
+]);
+export function useSettings() {
+    const [settings] = useContext(SettingsContext);
+    return settings;
+}
+export function SettingsProvider(props) {
+    const [settings, setSettingsState] = useState(() => {
+        const settings = {
+            theme: localStorage.getItem('theme'),
+            tableLayout: localStorage.getItem('tableLayout'),
+            formColumns: localStorage.getItem('formColumns'),
+            formLayout: localStorage.getItem('formLayout'),
+            borders: localStorage.getItem('borders') !== 'false',
+        };
+        const activeTheme = settings.theme !== 'dark' && settings.theme !== 'light'
+            ? window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light'
+            : settings.theme;
+        if (activeTheme === 'dark') {
+            document.documentElement.classList.add('pf-theme-dark');
+        }
+        else {
+            document.documentElement.classList.remove('pf-theme-dark');
+        }
+        return settings;
+    });
+    const setSettings = useCallback((settings) => {
+        localStorage.setItem('theme', settings.theme ?? 'system');
+        localStorage.setItem('tableLayout', settings.tableLayout ?? 'comfortable');
+        localStorage.setItem('formColumns', settings.formColumns ?? 'multiple');
+        localStorage.setItem('formLayout', settings.formLayout ?? 'vertical');
+        localStorage.setItem('borders', settings.borders ? 'true' : 'false');
+        setSettingsState(settings);
+        const activeTheme = settings.theme === 'system'
+            ? window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light'
+            : settings.theme;
+        if (activeTheme === 'dark') {
+            document.documentElement.classList.add('pf-theme-dark');
+        }
+        else {
+            document.documentElement.classList.remove('pf-theme-dark');
+        }
+    }, []);
+    return (_jsx(SettingsContext.Provider, { value: [settings, setSettings], children: props.children }));
+}
+export function useSettingsDialog(t) {
+    const [open, setOpen] = useState(false);
+    const openSetting = useCallback(() => setOpen(true), []);
+    const [_, setDialog] = usePageDialog();
+    useEffect(() => {
+        if (open) {
+            setDialog(_jsx(SettingsDialog, { open: open, setOpen: setOpen, t: t }));
+        }
+        else {
+            setDialog(undefined);
+        }
+    }, [open, setDialog, t]);
+    return openSetting;
+}
+export function SettingsDialog(props) {
+    const onClose = () => props.setOpen(false);
+    const [settings, setSettings] = useContext(SettingsContext);
+    const { t } = props;
+    return (_jsx(Modal, { title: "Settings", isOpen: props.open, onClose: onClose, variant: ModalVariant.medium, tabIndex: 0, actions: [
+            _jsx(Button, { variant: "primary", onClick: onClose, children: t('Close') }, "close"),
+        ], children: _jsxs(Form, { isHorizontal: settings.formLayout === 'horizontal', children: [_jsxs(SingleSelect, { label: "Theme", value: settings.theme ?? 'system', onChange: (theme) => setSettings({ ...settings, theme: theme }), children: [_jsx(SelectOption, { value: "system", children: t('System default') }), _jsx(SelectOption, { value: "light", children: t('Light') }), _jsx(SelectOption, { value: "dark", children: t('Dark') })] }), _jsxs(SingleSelect, { label: "Table Layout", value: settings.tableLayout ?? 'comfortable', onChange: (tableLayout) => setSettings({
+                        ...settings,
+                        tableLayout: tableLayout,
+                    }), children: [_jsx(SelectOption, { value: "comfortable", children: t('Comfortable') }), _jsx(SelectOption, { value: "compact", children: t('Compact') })] }), _jsxs(SingleSelect, { label: "Form Columns", value: settings.formColumns ?? 'multiple', onChange: (formColumns) => setSettings({
+                        ...settings,
+                        formColumns: formColumns,
+                    }), children: [_jsx(SelectOption, { value: "multiple", children: t('Multiple columns') }), _jsx(SelectOption, { value: "single", children: t('Single column') })] }), _jsxs(SingleSelect, { label: "Form Layout", value: settings.formLayout ?? 'vertical', onChange: (formLayout) => setSettings({
+                        ...settings,
+                        formLayout: formLayout,
+                    }), children: [_jsx(SelectOption, { value: "vertical", children: t('Vertical labels') }), _jsx(SelectOption, { value: "horizontal", children: t('Horizontal labels') })] }), _jsxs(SingleSelect, { label: "Borders", value: settings.borders ? 'true' : 'false', onChange: (value) => setSettings({ ...settings, borders: value === 'true' }), style: { paddingBottom: 120 }, children: [_jsx(SelectOption, { value: "true", children: t('Yes') }), _jsx(SelectOption, { value: "false", children: t('No') })] })] }) }));
+}

package/mjs/framework/TypedActions.d.ts

@@ -0,0 +1,80 @@
+import { ButtonVariant, DropdownPosition } from '@patternfly/react-core';
+import { IAction } from '@patternfly/react-table';
+import { ComponentClass, FunctionComponent } from 'react';
+import { WindowSize } from './components/useBreakPoint';
+export declare enum TypedActionType {
+    seperator = "seperator",
+    button = "button",
+    single = "single",
+    bulk = "bulk",
+    dropdown = "dropdown"
+}
+export interface ITypedActionSeperator {
+    type: TypedActionType.seperator;
+}
+interface ITypedActionCommon {
+    icon?: ComponentClass;
+    label: string;
+    shortLabel?: string;
+    tooltip?: string;
+    isDanger?: boolean;
+}
+export declare type ITypedActionButton = ITypedActionCommon & {
+    type: TypedActionType.button;
+    variant?: ButtonVariant;
+    onClick: () => void;
+};
+export declare type ITypedBulkAction<T extends object> = ITypedActionCommon & {
+    type: TypedActionType.bulk;
+    variant?: ButtonVariant;
+    onClick: (selectedItems: T[]) => void;
+};
+export declare type ITypedSingleAction<T extends object> = ITypedActionCommon & {
+    type: TypedActionType.single;
+    variant?: ButtonVariant;
+    onClick: (item: T) => void;
+};
+export declare type ITypedDropdownAction<T extends object> = ITypedActionCommon & {
+    type: TypedActionType.dropdown;
+    variant?: ButtonVariant;
+    options: ITypedAction<T>[];
+};
+export declare type ITypedAction<T extends object> = ITypedActionSeperator | ITypedActionButton | ITypedBulkAction<T> | ITypedSingleAction<T> | ITypedDropdownAction<T>;
+export declare function TypedActionsDropdown<T extends object>(props: {
+    actions: ITypedAction<T>[];
+    label?: string;
+    isPrimary?: boolean;
+    selectedItems?: T[];
+    position?: DropdownPosition;
+}): JSX.Element;
+export declare function TypedActionsButtons<T extends object>(props: {
+    actions: ITypedAction<T>[];
+    selectedItems?: T[];
+    wrapper?: ComponentClass | FunctionComponent;
+    noPrimary?: boolean;
+}): JSX.Element;
+export declare function TypedActionButton<T extends object>(props: {
+    action: ITypedAction<T>;
+    selectedItems?: T[];
+    selectedItem?: T;
+    wrapper?: ComponentClass | FunctionComponent;
+    noPrimary?: boolean;
+    iconOnly?: boolean;
+}): JSX.Element;
+export declare function TypedActions<T extends object>(props: {
+    actions: ITypedAction<T>[];
+    selectedItems?: T[];
+    wrapper?: ComponentClass | FunctionComponent;
+    collapse?: WindowSize;
+    noPrimary?: boolean;
+    position?: DropdownPosition;
+}): JSX.Element;
+export declare function useTypedActionsToTableActions<T extends object>(props: {
+    actions: ITypedAction<T>[];
+    item: T;
+    wrapper?: ComponentClass | FunctionComponent;
+    collapse?: WindowSize;
+    noPrimary?: boolean;
+    position?: DropdownPosition;
+}): IAction[];
+export {};