@ansible/ansible-ui-framework 0.0.190

package/cjs/framework/PageTable.js

@@ -0,0 +1,205 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageTable = exports.TablePage = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_icons_1 = require("@patternfly/react-icons");
+var react_table_1 = require("@patternfly/react-table");
+var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
+var react_1 = require("react");
+var useBreakPoint_1 = require("./components/useBreakPoint");
+var PageBody_1 = require("./PageBody");
+var PageColumnModal_1 = require("./PageColumnModal");
+var PageHeader_1 = require("./PageHeader");
+var PageLayout_1 = require("./PageLayout");
+var PagePagination_1 = require("./PagePagination");
+var PageToolbar_1 = require("./PageToolbar");
+var Settings_1 = require("./Settings");
+var TypedActions_1 = require("./TypedActions");
+function TablePage(props) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: (0, jsx_runtime_1.jsx)(PageTable, __assign({}, props)) })] }) }));
+}
+exports.TablePage = TablePage;
+function PageTable(props) {
+    var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, filters = props.filters, error = props.error, onSelect = props.onSelect, unselectAll = props.unselectAll;
+    var t = props.t;
+    t = t ? t : function (t) { return t; };
+    var showSelect = props.showSelect ||
+        (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; })) !==
+            undefined;
+    var containerRef = (0, react_1.useRef)(null);
+    var _a = __read((0, react_1.useState)({
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+    }), 2), scroll = _a[0], setScroll = _a[1];
+    var updateScroll = (0, react_1.useCallback)(function (div) {
+        if (!div)
+            return;
+        setScroll({
+            top: div.scrollTop,
+            bottom: div.scrollHeight - div.clientHeight - div.scrollTop,
+            left: div.scrollLeft,
+            right: div.scrollWidth - div.clientWidth - div.scrollLeft,
+        });
+    }, []);
+    var onScroll = (0, react_1.useCallback)(function (event) { return updateScroll(event.currentTarget); }, [updateScroll]);
+    (0, resize_observer_1.default)(containerRef, function () { return updateScroll(containerRef.current); });
+    (0, react_1.useEffect)(function () { return updateScroll(containerRef.current); }, [updateScroll]);
+    var settings = (0, Settings_1.useSettings)();
+    var _b = (0, PageColumnModal_1.useColumnModal)(tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+                height: '100%',
+            } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: {
+                    paddingTop: 64,
+                } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
+    }
+    if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
+        return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [columnModal, (0, jsx_runtime_1.jsx)(PageToolbar_1.PageTableToolbar, __assign({}, props, { openColumnModal: openColumnModal, showSelect: showSelect })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "pf-c-scroll-inner-wrapper", style: { height: '100%' }, ref: containerRef, onScroll: onScroll }, { children: [(0, jsx_runtime_1.jsxs)(react_table_1.TableComposable, __assign({ "aria-label": "Simple table", variant: props.compact ? 'compact' : settings.tableLayout === 'compact' ? 'compact' : undefined, gridBreakPoint: "", isStickyHeader: true }, { children: [itemCount === undefined ? ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Th, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}) }) }) })) : ((0, jsx_runtime_1.jsx)(TableHead, __assign({}, props, { showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, tableColumns: managedColumns, onSelect: onSelect }))), (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: itemCount === undefined
+                                    ? new Array(perPage).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Td, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }) }, index)); })
+                                    : pageItems === undefined
+                                        ? new Array(Math.min(perPage, itemCount)).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [showSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, {}), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: managedColumns.length }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }))] }, index)); })
+                                        : pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: managedColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : 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 && ((0, jsx_runtime_1.jsx)("div", __assign({ style: { margin: 'auto' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] }) })))] })), (!props.autoHidePagination || (itemCount !== null && itemCount !== void 0 ? itemCount : 0) > perPage) && (0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))] }));
+}
+exports.PageTable = PageTable;
+function TableHead(props) {
+    var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect;
+    var settings = (0, Settings_1.useSettings)();
+    var getColumnSort = (0, react_1.useCallback)(function (columnIndex, column) {
+        if (!column.sort)
+            return undefined;
+        return {
+            onSort: function (_event, _columnIndex, sortByDirection) {
+                if (column.sort) {
+                    setSort === null || setSort === void 0 ? void 0 : setSort(column.sort);
+                    setSortDirection === null || setSortDirection === void 0 ? void 0 : setSortDirection(sortByDirection);
+                }
+            },
+            sortBy: {
+                index: column.sort === sort ? columnIndex : undefined,
+                direction: column.sort === sort ? sortDirection : undefined,
+                defaultDirection: column.defaultSortDirection,
+            },
+            columnIndex: columnIndex,
+        };
+    }, [setSort, setSortDirection, sort, sortDirection]);
+    return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [(showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, style: {
+                        width: '0%',
+                        backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+                    }, stickyMinWidth: "45px", hasRightBorder: props.scrollLeft }, { children: "\u00A0" }))), columns
+                    .filter(function (column) { return column.enabled !== false; })
+                    .map(function (column, index) {
+                    return ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ 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 && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ 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) {
+    var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, unselectAll = props.unselectAll, isItemSelected = props.isItemSelected, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect;
+    var md = (0, useBreakPoint_1.useBreakpoint)('xl');
+    return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, 
+        // style={{ backgroundColor: theme === ThemeE.Dark ? 'transparent' : undefined }}
+        isRowSelected: isItemSelected, style: { boxShadow: 'unset' } }, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { select: isItemSelected !== undefined
+                    ? {
+                        onSelect: function (_event, isSelecting) {
+                            if (isSelecting) {
+                                selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+                            }
+                            else {
+                                unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
+                            }
+                        },
+                        isSelected: isItemSelected,
+                    }
+                    : undefined, style: { width: '0%', paddingLeft: md ? undefined : 20, paddingRight: 16 }, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
+                    rowIndex: rowIndex,
+                    onSelect: function () {
+                        unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
+                        selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+                        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
+                    },
+                    isSelected: isItemSelected !== null && isItemSelected !== void 0 ? 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,
+                } })), (0, jsx_runtime_1.jsx)(TableCells, { rowIndex: rowIndex, columns: columns, item: item, rowActions: rowActions, scrollLeft: props.scrollLeft, scrollRight: props.scrollRight })] })));
+}
+function TableCells(props) {
+    var columns = props.columns, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex;
+    var actions = (0, TypedActions_1.useTypedActionsToTableActions)({
+        actions: rowActions !== null && rowActions !== void 0 ? rowActions : [],
+        item: item,
+        collapse: 'xxl',
+    });
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [columns
+                .filter(function (column) { return column.enabled !== false; })
+                .map(function (column) {
+                return ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ dataLabel: column.header, modifier: "nowrap" }, { children: column.cell(item) }), column.header));
+            }), actions !== undefined && actions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Th
+            // isActionCell
+            , __assign({ 
+                // 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: (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex' } }, { children: (0, jsx_runtime_1.jsx)(react_table_1.ActionsColumn
+                    // dropdownDirection="up" // TODO handle....
+                    , { 
+                        // dropdownDirection="up" // TODO handle....
+                        items: actions }) })) })))] }));
+}

package/cjs/framework/PageTabs.js

@@ -0,0 +1,82 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageTabsOld = exports.PageTab = exports.PageTabs = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+function PageTabs(props) {
+    var _a;
+    var _b = __read((0, react_1.useState)(0), 2), activeKey = _b[0], setActiveKey = _b[1];
+    var onSelect = (0, react_1.useCallback)(function (_, key) { return setActiveKey(key); }, [setActiveKey]);
+    var children = react_1.Children.toArray(props.children);
+    var tabs = children.map(function (child, index) {
+        if ((0, react_1.isValidElement)(child)) {
+            if (child.type === PageTab) {
+                var title = child.props.title;
+                return ((0, jsx_runtime_1.jsx)(react_core_1.Tab, { title: title ? title : (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "60px" }), eventKey: index }, title !== null && title !== void 0 ? title : index));
+            }
+        }
+        return child;
+    });
+    var content = children[activeKey];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ type: react_core_1.PageSectionTypes.tabs }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' } }, { children: [props.preComponents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem
+                                // style={{ paddingLeft: 16 }}
+                                , { children: props.preComponents }), (0, jsx_runtime_1.jsx)(react_core_1.Divider, { orientation: { default: 'vertical' }, component: "div" })] })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tabs, __assign({ activeKey: activeKey, onSelect: onSelect, inset: props.preComponents
+                                    ? undefined
+                                    : (_a = {
+                                            default: 'insetNone',
+                                            sm: 'insetNone',
+                                            md: 'insetNone',
+                                            lg: 'insetNone',
+                                            xl: 'insetSm'
+                                        },
+                                        _a['2xl'] = 'insetSm',
+                                        _a), hasBorderBottom: false }, { children: tabs })) })), props.postComponents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Divider, { orientation: { default: 'vertical' } }), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingRight: 16 } }, { children: props.postComponents }))] }))] })) })), (0, jsx_runtime_1.jsx)(react_core_1.Divider, {}), content] }));
+}
+exports.PageTabs = PageTabs;
+function PageTab(props) {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
+}
+exports.PageTab = PageTab;
+function PageTabsOld(props) {
+    var _a;
+    var activeKey = props.activeKey, setActiveKey = props.setActiveKey;
+    var onSelect = (0, react_1.useCallback)(function (_, key) { return setActiveKey(key); }, [setActiveKey]);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ type: react_core_1.PageSectionTypes.tabs, style: { flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tabs, __assign({ activeKey: activeKey, onSelect: onSelect, inset: (_a = {
+                    default: 'insetNone',
+                    sm: 'insetNone',
+                    md: 'insetNone',
+                    lg: 'insetNone',
+                    xl: 'insetSm'
+                },
+                _a['2xl'] = 'insetSm',
+                _a) }, { children: props.children })) })));
+}
+exports.PageTabsOld = PageTabsOld;

package/cjs/framework/PageToolbar.js

@@ -0,0 +1,209 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageTableToolbar = exports.toolbarActionsHaveBulkActions = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_icons_1 = require("@patternfly/react-icons");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var BulkSelector_1 = require("./components/BulkSelector");
+var SingleSelect_1 = require("./components/SingleSelect");
+var useBreakPoint_1 = require("./components/useBreakPoint");
+var Settings_1 = require("./Settings");
+var TypedActions_1 = require("./TypedActions");
+function toolbarActionsHaveBulkActions(actions) {
+    var e_1, _a;
+    if (!actions)
+        return false;
+    try {
+        for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
+            var action = actions_1_1.value;
+            if (action.type === 'bulk')
+                return true;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (actions_1_1 && !actions_1_1.done && (_a = actions_1.return)) _a.call(actions_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return false;
+}
+exports.toolbarActionsHaveBulkActions = toolbarActionsHaveBulkActions;
+function PageTableToolbar(props) {
+    var _a;
+    var itemCount = props.itemCount, page = props.page, perPage = props.perPage, setPage = props.setPage, setPerPage = props.setPerPage, toolbarFilters = props.toolbarFilters, selectedItems = props.selectedItems, filters = props.filters, setFilters = props.setFilters, clearAllFilters = props.clearAllFilters, openColumnModal = props.openColumnModal, disableBorderBottom = props.disableBorderBottom;
+    var sm = (0, useBreakPoint_1.useBreakpoint)('md');
+    var toolbarActions = props.toolbarActions;
+    toolbarActions = toolbarActions !== null && toolbarActions !== void 0 ? toolbarActions : [];
+    var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
+    var onPerPageSelect = (0, react_1.useCallback)(function (_event, perPage) { return setPerPage(perPage); }, [setPerPage]);
+    var showSearchAndFilters = toolbarFilters !== undefined;
+    var showToolbarActions = toolbarActions !== undefined && toolbarActions.length > 0;
+    var showSelect = props.showSelect === true ||
+        (selectedItems !== undefined &&
+            toolbarActions &&
+            toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; }));
+    var showToolbar = showSelect || showSearchAndFilters || showToolbarActions;
+    var _b = __read((0, react_1.useState)(function () {
+        return toolbarFilters ? ((toolbarFilters === null || toolbarFilters === void 0 ? void 0 : toolbarFilters.length) > 0 ? toolbarFilters[0].key : '') : '';
+    }), 2), selectedFilter = _b[0], setSeletedFilter = _b[1];
+    var settings = (0, Settings_1.useSettings)();
+    if (!showToolbar) {
+        return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+    }
+    if (itemCount === undefined) {
+        return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ 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: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarContent, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ style: { width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "36px" }) })) }) })));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ 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: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(SingleSelect_1.SingleSelect2, __assign({ onChange: setSeletedFilter, value: selectedFilter }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
+                                        var _a;
+                                        var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
+                                        if (!values)
+                                            values = [];
+                                        if (!values.includes(value))
+                                            values.push(value);
+                                        setFilters === null || setFilters === void 0 ? void 0 : setFilters(__assign(__assign({}, filters), (_a = {}, _a[selectedFilter] = values, _a)));
+                                    }, removeFilter: function (value) {
+                                        var _a;
+                                        var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
+                                        if (!values)
+                                            values = [];
+                                        values = values.filter(function (v) { return v !== value; });
+                                        setFilters === null || setFilters === void 0 ? void 0 : setFilters(__assign(__assign({}, filters), (_a = {}, _a[selectedFilter] = values, _a)));
+                                    }, values: (_a = filters === null || filters === void 0 ? void 0 : filters[selectedFilter]) !== null && _a !== void 0 ? _a : [] }) }), toolbarFilters.map(function (filter) {
+                                var _a;
+                                var values = (_a = filters === null || filters === void 0 ? void 0 : filters[filter.key]) !== null && _a !== void 0 ? _a : [];
+                                return ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarFilter, __assign({ categoryName: filter.label, chips: values.map(function (value) {
+                                        var _a, _b;
+                                        return 'options' in filter
+                                            ? (_b = (_a = filter.options.find(function (o) { return o.value === value; })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : value
+                                            : value;
+                                    }), deleteChip: function (_group, value) {
+                                        setFilters === null || setFilters === void 0 ? void 0 : setFilters(function (filters) {
+                                            //TODO bug here where value is actually select filter option label... need to map
+                                            var newState = __assign({}, filters);
+                                            value = typeof value === 'string' ? value : value.key;
+                                            var values = filters[filter.key];
+                                            if (values) {
+                                                values = values.filter(function (v) { return v !== value; });
+                                                if (values.length === 0) {
+                                                    delete newState[filter.key];
+                                                }
+                                                else {
+                                                    newState[filter.key] = values;
+                                                }
+                                            }
+                                            return newState;
+                                        });
+                                    }, deleteChipGroup: function () {
+                                        setFilters === null || setFilters === void 0 ? void 0 : setFilters(function (filters) {
+                                            var newState = __assign({}, filters);
+                                            delete newState[filter.key];
+                                            return newState;
+                                        });
+                                    }, showToolbarItem: false }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), filter.label));
+                            })] })) }))), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [(0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }), openColumnModal && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) }))] })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "pagination", visibility: { default: 'hidden', '2xl': 'visible' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.top, isCompact: true, itemCount: itemCount, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: { marginTop: -8, marginBottom: -8 } }) }))] }) })));
+}
+exports.PageTableToolbar = PageTableToolbar;
+function ToolbarFilterInput(props) {
+    var filter = props.filter;
+    switch (filter === null || filter === void 0 ? void 0 : filter.type) {
+        case 'string':
+            return (0, jsx_runtime_1.jsx)(ToolbarTextFilter, __assign({}, props, { placeholder: filter.placeholder }));
+        case 'select':
+            return ((0, jsx_runtime_1.jsx)(ToolbarSelectFilter, __assign({}, props, { options: filter.options, placeholder: filter.placeholder })));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+}
+function ToolbarTextFilter(props) {
+    var _a = __read((0, react_1.useState)(''), 2), value = _a[0], setValue = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.TextInputGroup, __assign({ style: { minWidth: 220 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupMain
+                    // ref={ref}
+                    , { 
+                        // ref={ref}
+                        value: value, onChange: setValue, onKeyUp: function (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 !== '' && ((0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupUtilities, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "plain", "aria-label": "add filter", onClick: function () { return setValue(''); }, style: { opacity: value ? undefined : 0 }, 
+                            // tabIndex={value ? undefined : -1}
+                            tabIndex: -1 }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.TimesIcon, {}) })) }))] })), !value ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) : (
+            // <Button variant={'control'} aria-label="add filter">
+            //     <SearchIcon />
+            // </Button>
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: value ? 'primary' : 'control', "aria-label": "add filter", onClick: function () {
+                    props.addFilter(value);
+                    setValue('');
+                } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ArrowRightIcon, {}) })))] }));
+}
+function ToolbarSelectFilter(props) {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var addFilter = props.addFilter, removeFilter = props.removeFilter, options = props.options, values = props.values;
+    var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
+    var onSelect = (0, react_1.useCallback)(function (e, value) {
+        if (values.includes(value.toString())) {
+            removeFilter(value.toString());
+        }
+        else {
+            addFilter(value.toString());
+        }
+    }, [addFilter, removeFilter, values]);
+    var selections = values;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ variant: react_core_1.SelectVariant.checkbox, isOpen: open, onToggle: setOpen, selections: selections, onSelect: onSelect, placeholderText: values.length ? t('Selected') : (0, jsx_runtime_1.jsx)("span", __assign({ style: { opacity: 0.7 } }, { children: props.placeholder })) }, { children: options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ id: option.value, value: option.value }, { children: option.label }), option.value)); }) })) }));
+}

package/cjs/framework/Settings.js

@@ -0,0 +1,122 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsDialog = exports.useSettingsDialog = exports.SettingsProvider = exports.useSettings = exports.SettingsContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var SingleSelect_1 = require("./components/SingleSelect");
+var PageDialog_1 = require("./PageDialog");
+exports.SettingsContext = (0, react_1.createContext)([
+    {},
+    function () { return null; },
+]);
+function useSettings() {
+    var _a = __read((0, react_1.useContext)(exports.SettingsContext), 1), settings = _a[0];
+    return settings;
+}
+exports.useSettings = useSettings;
+function SettingsProvider(props) {
+    var _a = __read((0, react_1.useState)(function () {
+        var settings = {
+            theme: localStorage.getItem('theme'),
+            tableLayout: localStorage.getItem('tableLayout'),
+            formColumns: localStorage.getItem('formColumns'),
+            formLayout: localStorage.getItem('formLayout'),
+            borders: localStorage.getItem('borders') !== 'false',
+        };
+        var 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;
+    }), 2), settings = _a[0], setSettingsState = _a[1];
+    var setSettings = (0, react_1.useCallback)(function (settings) {
+        var _a, _b, _c, _d;
+        localStorage.setItem('theme', (_a = settings.theme) !== null && _a !== void 0 ? _a : 'system');
+        localStorage.setItem('tableLayout', (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable');
+        localStorage.setItem('formColumns', (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple');
+        localStorage.setItem('formLayout', (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical');
+        localStorage.setItem('borders', settings.borders ? 'true' : 'false');
+        setSettingsState(settings);
+        var 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 ((0, jsx_runtime_1.jsx)(exports.SettingsContext.Provider, __assign({ value: [settings, setSettings] }, { children: props.children })));
+}
+exports.SettingsProvider = SettingsProvider;
+function useSettingsDialog(t) {
+    var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
+    var openSetting = (0, react_1.useCallback)(function () { return setOpen(true); }, []);
+    var _b = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _b[0], setDialog = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (open) {
+            setDialog((0, jsx_runtime_1.jsx)(SettingsDialog, { open: open, setOpen: setOpen, t: t }));
+        }
+        else {
+            setDialog(undefined);
+        }
+    }, [open, setDialog, t]);
+    return openSetting;
+}
+exports.useSettingsDialog = useSettingsDialog;
+function SettingsDialog(props) {
+    var _a, _b, _c, _d;
+    var onClose = function () { return props.setOpen(false); };
+    var _e = __read((0, react_1.useContext)(exports.SettingsContext), 2), settings = _e[0], setSettings = _e[1];
+    var t = props.t;
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ title: "Settings", isOpen: props.open, onClose: onClose, variant: react_core_1.ModalVariant.medium, tabIndex: 0, actions: [
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: t('Close') }), "close"),
+        ] }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, __assign({ isHorizontal: settings.formLayout === 'horizontal' }, { children: [(0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Theme", value: (_a = settings.theme) !== null && _a !== void 0 ? _a : 'system', onChange: function (theme) {
+                        return setSettings(__assign(__assign({}, settings), { theme: theme }));
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: t('System default') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: t('Light') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: t('Dark') }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Table Layout", value: (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable', onChange: function (tableLayout) {
+                        return setSettings(__assign(__assign({}, settings), { tableLayout: tableLayout }));
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: t('Comfortable') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: t('Compact') }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Form Columns", value: (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple', onChange: function (formColumns) {
+                        return setSettings(__assign(__assign({}, settings), { formColumns: formColumns }));
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: t('Multiple columns') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: t('Single column') }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onChange: function (formLayout) {
+                        return setSettings(__assign(__assign({}, settings), { formLayout: formLayout }));
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: t('Vertical labels') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: t('Horizontal labels') }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Borders", value: settings.borders ? 'true' : 'false', onChange: function (value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); }, style: { paddingBottom: 120 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: t('Yes') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: t('No') }))] }))] })) })));
+}
+exports.SettingsDialog = SettingsDialog;