@ansible/ansible-ui-framework 0.0.279 → 0.0.280

package/cjs/BulkActionDialog.d.ts

@@ -1,30 +1,27 @@
 /// <reference types="react" />
 import { ITableColumn } from './PageTable';
-export interface BulkActionDialogProps {
-    isDanger?: boolean;
-}
-export declare function BulkActionDialog<T extends object>(props: {
+export interface BulkActionDialogProps<T extends object> {
+    /** The title of the model.
+     * @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs
+     */
     title: string;
-    prompt?: string;
-    submitting: string;
-    submittingTitle: string;
-    submitText: string;
-    confirmText: string;
-    cancelText?: string;
-    error: string;
-    closeText?: string;
-    successText?: string;
-    pendingText?: string;
-    isDanger?: boolean;
+    /** The items to confirm for the bulk action. */
     items: T[];
-    /** These are the columns shown when confirming the bulk actions. */
-    columns: ITableColumn<T>[];
-    /**
-     * These are the columns shown when processing the bulk actions plus an error column.
-     * @note This is usually the name column, unless the name column is not unique enough to identify the item.
-     */
-    errorColumns: ITableColumn<T>[];
+    /** A function that gets a unique key for each item. */
     keyFn: (item: T) => string | number;
-    action: (item: T) => Promise<void>;
-    onClose?: (items: T[]) => void;
-}): JSX.Element;
+    /** The columns to display when processing the actions. */
+    actionColumns: ITableColumn<T>[];
+    /** The action function to perform on each item. */
+    actionFn: (item: T, signal: AbortSignal) => Promise<unknown>;
+    /** Callback when all the actions are complete. Returns the successful items. */
+    onComplete?: (successfulItems: T[]) => void;
+    /** Callback called when the dialog closes. */
+    onClose?: () => void;
+    /** The text to show for each item when the action is happening.
+     * @example Deleting jobs...
+     */
+    processingText?: string;
+    /** Indicates if this is a destructive operation */
+    isDanger?: boolean;
+}
+export declare function useBulkActionDialog<T extends object>(): import("react").Dispatch<import("react").SetStateAction<BulkActionDialogProps<T> | undefined>>;

package/cjs/BulkActionDialog.js

@@ -62,6 +62,17 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -75,79 +86,114 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BulkActionDialog = void 0;
+exports.useBulkActionDialog = 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 p_limit_1 = __importDefault(require("p-limit"));
 var react_1 = require("react");
-var Collapse_1 = require("./components/Collapse");
+var pfcolors_1 = require("./components/pfcolors");
 var PageDialog_1 = require("./PageDialog");
 var PageTable_1 = require("./PageTable");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 var useTableItems_1 = require("./useTableItems");
 function BulkActionDialog(props) {
-    var _a, _b, _c, _d, _e;
-    var _f = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _f[0], setDialog = _f[1];
-    var _g = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _g[0];
-    var _h = __read((0, react_1.useState)(false), 2), isSubmitting = _h[0], setSubmitting = _h[1];
-    var _j = __read((0, react_1.useState)(false), 2), isSubmited = _j[0], setSubmited = _j[1];
-    var _k = __read((0, react_1.useState)(0), 2), progress = _k[0], setProgress = _k[1];
-    var _l = __read((0, react_1.useState)(''), 2), error = _l[0], setError = _l[1];
-    var _m = __read((0, react_1.useState)(), 2), statuses = _m[0], setStatuses = _m[1];
-    var onClose = (0, react_1.useCallback)(function () {
-        var _a;
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, props.items.filter(function (item) { return (statuses === null || statuses === void 0 ? void 0 : statuses[props.keyFn(item)]) === null; }));
+    var title = props.title, items = props.items, keyFn = props.keyFn, actionColumns = props.actionColumns, actionFn = props.actionFn, onComplete = props.onComplete, onClose = props.onClose, processingText = props.processingText, isDanger = props.isDanger;
+    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
+    var _b = __read((0, react_1.useState)(true), 2), isProcessing = _b[0], setProcessing = _b[1];
+    var _c = __read((0, react_1.useState)(false), 2), isCanceled = _c[0], setCanceled = _c[1];
+    var _d = __read((0, react_1.useState)(0), 2), progress = _d[0], setProgress = _d[1];
+    var _e = __read((0, react_1.useState)(''), 2), error = _e[0], setError = _e[1];
+    var _f = __read((0, react_1.useState)(), 2), statuses = _f[0], setStatuses = _f[1];
+    var _g = __read((0, react_1.useState)(function () { return new AbortController(); }), 1), abortController = _g[0];
+    var _h = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _h[0], setDialog = _h[1];
+    var onCancelClicked = (0, react_1.useCallback)(function () {
+        setCanceled(true);
+        abortController.abort();
+        setProcessing(false);
+        setStatuses(function (statuses) {
+            var e_1, _a;
+            var newStatuses = __assign({}, statuses);
+            try {
+                for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
+                    var item = items_1_1.value;
+                    var key = keyFn(item);
+                    if (newStatuses[key] === undefined) {
+                        newStatuses[key] = 'Cancelled';
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return newStatuses;
+        });
+    }, [abortController, items, keyFn]);
+    var onCloseClicked = (0, react_1.useCallback)(function () {
         setDialog(undefined);
-    }, [props, setDialog, statuses]);
-    var onConfirm = function () {
-        function handleConfirm() {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose, setDialog]);
+    (0, react_1.useEffect)(function () {
+        function process() {
             return __awaiter(this, void 0, void 0, function () {
-                var limit, progress;
+                var limit, progress, successfulItems;
                 var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
                             limit = (0, p_limit_1.default)(5);
-                            setSubmitting(true);
                             progress = 0;
-                            return [4 /*yield*/, Promise.all(props.items.map(function (item) {
+                            successfulItems = [];
+                            return [4 /*yield*/, Promise.all(items.map(function (item) {
                                     return limit(function () { return __awaiter(_this, void 0, void 0, function () {
                                         var key, err_1, message_1;
                                         return __generator(this, function (_a) {
                                             switch (_a.label) {
                                                 case 0:
-                                                    key = props.keyFn(item);
+                                                    if (abortController.signal.aborted)
+                                                        return [2 /*return*/];
+                                                    key = keyFn(item);
                                                     _a.label = 1;
                                                 case 1:
                                                     _a.trys.push([1, 3, 4, 5]);
-                                                    return [4 /*yield*/, props.action(item)];
+                                                    return [4 /*yield*/, actionFn(item, abortController.signal)];
                                                 case 2:
                                                     _a.sent();
-                                                    setStatuses(function (statuses) {
-                                                        var _a;
-                                                        return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = null, _a)));
-                                                    });
-                                                    return [3 /*break*/, 5];
-                                                case 3:
-                                                    err_1 = _a.sent();
-                                                    if (err_1 instanceof Error) {
-                                                        message_1 = err_1.message;
+                                                    if (!abortController.signal.aborted) {
                                                         setStatuses(function (statuses) {
                                                             var _a;
-                                                            return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = message_1, _a)));
+                                                            return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = null, _a)));
                                                         });
                                                     }
-                                                    else {
-                                                        setStatuses(function (statuses) {
-                                                            var _a;
-                                                            return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = "Unknown error", _a)));
-                                                        });
+                                                    successfulItems.push(item);
+                                                    return [3 /*break*/, 5];
+                                                case 3:
+                                                    err_1 = _a.sent();
+                                                    if (!abortController.signal.aborted) {
+                                                        if (err_1 instanceof Error) {
+                                                            message_1 = err_1.message;
+                                                            setStatuses(function (statuses) {
+                                                                var _a;
+                                                                return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = message_1, _a)));
+                                                            });
+                                                        }
+                                                        else {
+                                                            setStatuses(function (statuses) {
+                                                                var _a;
+                                                                return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = "Unknown error", _a)));
+                                                            });
+                                                        }
+                                                        setError(translations.errorText);
                                                     }
-                                                    setError(props.error);
                                                     return [3 /*break*/, 5];
                                                 case 4:
-                                                    setProgress(++progress);
+                                                    if (!abortController.signal.aborted) {
+                                                        setProgress(++progress);
+                                                    }
                                                     return [7 /*endfinally*/];
                                                 case 5: return [2 /*return*/];
                                             }
@@ -156,62 +202,76 @@ function BulkActionDialog(props) {
                                 }))];
                         case 1:
                             _a.sent();
-                            setSubmitting(false);
-                            setSubmited(true);
+                            if (!abortController.signal.aborted) {
+                                setProcessing(false);
+                            }
+                            onComplete === null || onComplete === void 0 ? void 0 : onComplete(successfulItems);
                             return [2 /*return*/];
                     }
                 });
             });
         }
-        void handleConfirm();
-    };
-    var _o = (0, useTableItems_1.usePaged)(props.items), paged = _o.paged, page = _o.page, perPage = _o.perPage, setPage = _o.setPage, setPerPage = _o.setPerPage;
-    var _p = __read((0, react_1.useState)(!props.confirmText), 2), confirmed = _p[0], setConfirmed = _p[1];
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ titleIconVariant: props.isDanger ? 'warning' : undefined, title: props.title, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: onClose, actions: !isSubmited
+        void process();
+    }, [abortController, actionFn, items, keyFn, onComplete, translations.errorText]);
+    var _j = (0, useTableItems_1.usePaged)(items), paged = _j.paged, page = _j.page, perPage = _j.perPage, setPage = _j.setPage, setPerPage = _j.setPerPage;
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Modal, __assign({ titleIconVariant: isDanger ? 'warning' : undefined, title: title, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: function () {
+            onCancelClicked();
+            onCloseClicked();
+        }, actions: isProcessing
             ? [
-                (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: props.isDanger ? 'danger' : 'primary', onClick: onConfirm, isDisabled: !confirmed || isSubmitting || isSubmited, isLoading: isSubmitting }, { children: isSubmitting
-                        ? (_a = props.submitting) !== null && _a !== void 0 ? _a : translations.submittingText
-                        : (_b = props.submitText) !== null && _b !== void 0 ? _b : translations.submitText }), "submit"),
-                (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: (_c = props.cancelText) !== null && _c !== void 0 ? _c : translations.cancelText }), "cancel"),
+                (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onCancelClicked }, { children: translations.cancelText }), "cancel"),
             ]
             : [
-                (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "secondary", onClick: onClose }, { children: (_d = props.closeText) !== null && _d !== void 0 ? _d : translations.closeText }), "close"),
-            ], description: (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: !isSubmitting && !isSubmited }, { children: props.prompt })), hasNoBodyWrapper: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ModalBoxBody, __assign({ style: { paddingLeft: 0, paddingRight: 0 } }, { children: [(0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: isSubmitting || isSubmited }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Progress, { value: (progress / props.items.length) * 100, title: error
-                                ? props.error
-                                : progress === props.items.length
-                                    ? (_e = props.successText) !== null && _e !== void 0 ? _e : translations.successText
-                                    : props.submittingTitle, size: react_core_1.ProgressSize.lg, variant: error
-                                ? react_core_1.ProgressVariant.danger
-                                : progress === props.items.length
-                                    ? react_core_1.ProgressVariant.success
-                                    : undefined, measureLocation: error && progress === props.items.length ? react_core_1.ProgressMeasureLocation.none : undefined }) })) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "secondary", onClick: onCloseClicked }, { children: translations.closeText }), "close"),
+            ], hasNoBodyWrapper: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { paddingBottom: 0, paddingLeft: 0, paddingRight: 0 } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                         display: 'flex',
                         flexDirection: 'column',
-                        maxHeight: 500,
+                        maxHeight: 560,
                         overflow: 'hidden',
                         borderTop: 'thin solid var(--pf-global--BorderColor--100)',
-                    } }, { children: !isSubmitting && !isSubmited ? ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items", disableBodyPadding: true }, "items")) : ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: props.items.length, tableColumns: __spreadArray(__spreadArray([], __read(props.errorColumns), false), [
+                    } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: items.length, tableColumns: __spreadArray(__spreadArray([], __read(actionColumns), false), [
                             {
                                 header: 'Status',
                                 cell: function (item) {
-                                    var _a, _b;
-                                    var key = props.keyFn(item);
+                                    var key = keyFn(item);
                                     var status = statuses === null || statuses === void 0 ? void 0 : statuses[key];
                                     if (status === undefined) {
-                                        return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: {
-                                                color: 'var(--pf-global--info-color--100)',
-                                            } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.PendingIcon, {}), "\u00A0 ", (_a = props.pendingText) !== null && _a !== void 0 ? _a : translations.pendingText, ' ', JSON.stringify(status)] })));
+                                        return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: pfcolors_1.pfInfo } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.PendingIcon, {}), "\u00A0 ", translations.pendingText] })));
                                     }
                                     if (status === null) {
-                                        return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: {
-                                                color: 'var(--pf-global--success-color--100)',
-                                            } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.CheckCircleIcon, {}), "\u00A0", ' ', (_b = props.successText) !== null && _b !== void 0 ? _b : translations.successText] })));
+                                        return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: pfcolors_1.pfSuccess } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.CheckCircleIcon, {}), "\u00A0 ", translations.successText] })));
                                     }
-                                    return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: {
-                                            color: 'var(--pf-global--danger-color--100)',
-                                        } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}), "\u00A0 ", statuses === null || statuses === void 0 ? void 0 : statuses[key]] })));
+                                    return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: pfcolors_1.pfDanger } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}), "\u00A0 ", statuses === null || statuses === void 0 ? void 0 : statuses[key]] })));
                                 },
                             },
-                        ], false), keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items", disableBodyPadding: true }, "status")) })), props.confirmText && ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: !isSubmitting && !isSubmited }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, marginTop: 0, marginBottom: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) })) })))] })) })));
+                        ], false), keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status") })) })), (0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Progress, { value: (progress / items.length) * 100, title: abortController.signal.aborted
+                        ? translations.canceledText
+                        : error
+                            ? translations.errorText
+                            : !isProcessing
+                                ? translations.successText
+                                : processingText !== null && processingText !== void 0 ? processingText : translations.processingText, size: react_core_1.ProgressSize.lg, variant: error || isCanceled
+                        ? react_core_1.ProgressVariant.danger
+                        : progress === items.length
+                            ? react_core_1.ProgressVariant.success
+                            : undefined }) }))] })));
+}
+function useBulkActionDialog() {
+    var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
+    var _b = __read((0, react_1.useState)(), 2), props = _b[0], setProps = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (props) {
+            var onCloseHandler = function () {
+                var _a;
+                setProps(undefined);
+                (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+            };
+            setDialog((0, jsx_runtime_1.jsx)(BulkActionDialog, __assign({}, props, { onClose: onCloseHandler })));
+        }
+        else {
+            setDialog(undefined);
+        }
+    }, [props, setDialog]);
+    return setProps;
 }
-exports.BulkActionDialog = BulkActionDialog;
+exports.useBulkActionDialog = useBulkActionDialog;

package/cjs/BulkConfirmationDialog.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { BulkActionDialogProps } from './BulkActionDialog';
+import { ITableColumn } from './PageTable';
+export interface BulkConfirmationDialog<T extends object> {
+    /** The title of the model.
+     * @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs
+     */
+    title: string;
+    /** The prompt that shows up under the confirmation title. */
+    prompt?: string;
+    /** The items to confirm for the bulk action. */
+    items: T[];
+    /** A function that gets a unique key for each item. */
+    keyFn: (item: T) => string | number;
+    /** The columns to display for confirmation. */
+    confirmationColumns: ITableColumn<T>[];
+    /** Callback called when the user confirms. */
+    onConfirm: () => void;
+    /** Callback called when the dialog closes. */
+    onClose?: () => void;
+    /** The prompt to show for the user to confirm the bulk action. */
+    confirmText: string;
+    /** The button text to perform the action. */
+    actionButtonText: string;
+    /** Indicates if this is a destructive operation */
+    isDanger?: boolean;
+}
+declare function BulkConfirmationDialog<T extends object>(props: BulkConfirmationDialog<T>): JSX.Element;
+export declare function useBulkConfirmation<T extends object>(): (options: Omit<BulkConfirmationDialog<T>, 'onConfirm' | 'onClose'> & Omit<BulkActionDialogProps<T>, 'onClose'>) => void;
+export {};

package/cjs/BulkConfirmationDialog.js

@@ -0,0 +1,88 @@
+"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.useBulkConfirmation = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var BulkActionDialog_1 = require("./BulkActionDialog");
+var PageDialog_1 = require("./PageDialog");
+var PageTable_1 = require("./PageTable");
+var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
+var useTableItems_1 = require("./useTableItems");
+function BulkConfirmationDialog(props) {
+    var title = props.title, items = props.items, keyFn = props.keyFn, confirmationColumns = props.confirmationColumns, onConfirm = props.onConfirm, onClose = props.onClose, confirmText = props.confirmText, actionButtonText = props.actionButtonText, isDanger = props.isDanger;
+    var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
+    var _b = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _b[0];
+    var onCloseClicked = (0, react_1.useCallback)(function () {
+        setDialog(undefined);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose, setDialog]);
+    var _c = (0, useTableItems_1.usePaged)(items), paged = _c.paged, page = _c.page, perPage = _c.perPage, setPage = _c.setPage, setPerPage = _c.setPerPage;
+    var _d = __read((0, react_1.useState)(!confirmText), 2), confirmed = _d[0], setConfirmed = _d[1];
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ titleIconVariant: isDanger ? 'warning' : undefined, title: title, description: prompt, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: onCloseClicked, actions: [
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: isDanger ? 'danger' : 'primary', onClick: function () {
+                    onCloseClicked();
+                    onConfirm();
+                }, isAriaDisabled: !confirmed }, { children: actionButtonText }), "submit"),
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: translations.cancelText }), "cancel"),
+        ], hasNoBodyWrapper: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ModalBoxBody, __assign({ style: { paddingLeft: 0, paddingRight: 0 } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        maxHeight: 560,
+                        overflow: 'hidden',
+                        borderTop: 'thin solid var(--pf-global--BorderColor--100)',
+                    } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: items.length, tableColumns: confirmationColumns, keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items" }, "items") })), confirmText && ((0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, height: 64, display: 'flex', alignItems: 'center' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: confirmText, isChecked: confirmed, onChange: setConfirmed }) })))] })) })));
+}
+function useBulkConfirmationDialog() {
+    var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
+    var _b = __read((0, react_1.useState)(), 2), props = _b[0], setProps = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (props) {
+            var onCloseHandler = function () {
+                var _a;
+                setProps(undefined);
+                (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+            };
+            setDialog((0, jsx_runtime_1.jsx)(BulkConfirmationDialog, __assign({}, props, { onClose: onCloseHandler })));
+        }
+        else {
+            setDialog(undefined);
+        }
+    }, [props, setDialog]);
+    return setProps;
+}
+function useBulkConfirmation() {
+    var bulkConfirmationDialog = useBulkConfirmationDialog();
+    var bulkActionDialog = (0, BulkActionDialog_1.useBulkActionDialog)();
+    return (0, react_1.useCallback)(function (options) {
+        return bulkConfirmationDialog(__assign(__assign({}, options), { onConfirm: function () { return bulkActionDialog(options); } }));
+    }, [bulkActionDialog, bulkConfirmationDialog]);
+}
+exports.useBulkConfirmation = useBulkConfirmation;

package/cjs/PagePagination.js

@@ -21,10 +21,10 @@ function PagePagination(props) {
     var setPage = props.setPage, setPerPage = props.setPerPage;
     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 compact = !(0, useBreakPoint_1.useBreakpoint)('sm');
+    var compact = !(0, useBreakPoint_1.useBreakpoint)('md');
     var settings = (0, Settings_1.useSettings)();
     return ((0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: __assign(__assign({}, props.style), { borderTop: 'thin solid var(--pf-global--BorderColor--100)', boxShadow: 'none', zIndex: 301, 
             // marginTop: -1,
-            paddingTop: compact ? 6 : undefined, paddingBottom: compact ? 6 : undefined, backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
+            paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
 }
 exports.PagePagination = PagePagination;

package/cjs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './BulkActionDialog';
+export * from './BulkConfirmationDialog';
 export * from './cells/BytesCell';
 export * from './cells/CapacityCell';
 export * from './cells/CopyCell';

package/cjs/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BulkActionDialog"), exports);
+__exportStar(require("./BulkConfirmationDialog"), exports);
 __exportStar(require("./cells/BytesCell"), exports);
 __exportStar(require("./cells/CapacityCell"), exports);
 __exportStar(require("./cells/CopyCell"), exports);

package/cjs/useFrameworkTranslations.d.ts

@@ -1,17 +1,18 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 export interface IFrameworkTranslations {
     cancelText: string;
+    canceledText: string;
     closeText: string;
     confirmText: string;
     errorText: string;
     noItemsFound: string;
+    ofText: string;
     pendingText: string;
     processingText: string;
     selectedText: string;
     submitText: string;
     submittingText: string;
     successText: string;
-    ofText: string;
 }
 export declare function FrameworkTranslationsProvider(props: {
     children: ReactNode;

package/cjs/useFrameworkTranslations.js

@@ -16,17 +16,18 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var defaultTranslations = {
     cancelText: 'Cancel',
+    canceledText: 'Canceled',
     closeText: 'Close',
     confirmText: 'Confirm',
     errorText: 'Error',
     noItemsFound: 'No items found',
+    ofText: 'of',
     pendingText: 'Pending',
     processingText: 'Processing',
+    selectedText: 'Selected',
     submitText: 'Submit',
     submittingText: 'Submitting',
     successText: 'Success',
-    selectedText: 'Selected',
-    ofText: 'of',
 };
 var FrameworkTranslationsContext = (0, react_1.createContext)([defaultTranslations, function () { return alert('Use FrameworkTranslationsProvider'); }]);
 function FrameworkTranslationsProvider(props) {

package/package.json

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

package/cjs/BulkProgressDialog.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import { ITableColumn } from './PageTable';
-export interface BulkProgressDialogProps<T extends object> {
-    title: string;
-    keyFn: (item: T) => string | number;
-    items: T[];
-    columns: ITableColumn<T>[];
-    actionFn: (item: T, signal: AbortSignal) => Promise<unknown>;
-    onClose?: (items: T[]) => void;
-    processingText?: string;
-    errorText?: string;
-    successText?: string;
-    itemPendingText?: string;
-    itemSuccessText?: string;
-    cancelText?: string;
-    closeText?: string;
-    isDanger?: boolean;
-}
-export declare function BulkProgressDialog<T extends object>(props: BulkProgressDialogProps<T>): JSX.Element;
-export declare function useBulkProgressDialog<T extends object>(): import("react").Dispatch<import("react").SetStateAction<BulkProgressDialogProps<T> | undefined>>;

package/cjs/BulkProgressDialog.js

@@ -1,240 +0,0 @@
-"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBulkProgressDialog = exports.BulkProgressDialog = 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 p_limit_1 = __importDefault(require("p-limit"));
-var react_1 = require("react");
-var PageDialog_1 = require("./PageDialog");
-var PageTable_1 = require("./PageTable");
-var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
-var useTableItems_1 = require("./useTableItems");
-function BulkProgressDialog(props) {
-    var title = props.title, keyFn = props.keyFn, items = props.items, columns = props.columns, actionFn = props.actionFn, onClose = props.onClose, processingText = props.processingText, errorText = props.errorText, itemPendingText = props.itemPendingText, itemSuccessText = props.itemSuccessText, successText = props.successText, cancelText = props.cancelText, closeText = props.closeText, isDanger = props.isDanger;
-    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
-    var _b = __read((0, react_1.useState)(true), 2), isProcessing = _b[0], setProcessing = _b[1];
-    var _c = __read((0, react_1.useState)(0), 2), progress = _c[0], setProgress = _c[1];
-    var _d = __read((0, react_1.useState)(''), 2), error = _d[0], setError = _d[1];
-    var _e = __read((0, react_1.useState)(), 2), statuses = _e[0], setStatuses = _e[1];
-    var _f = __read((0, react_1.useState)(function () { return new AbortController(); }), 1), abortController = _f[0];
-    var onCancelClicked = (0, react_1.useCallback)(function () {
-        abortController.abort();
-        setProcessing(false);
-    }, [abortController]);
-    var onCloseClicked = (0, react_1.useCallback)(function () {
-        onClose === null || onClose === void 0 ? void 0 : onClose(items.filter(function (item) { return (statuses === null || statuses === void 0 ? void 0 : statuses[keyFn(item)]) === null; }));
-    }, [items, keyFn, onClose, statuses]);
-    (0, react_1.useEffect)(function () {
-        function process() {
-            return __awaiter(this, void 0, void 0, function () {
-                var limit, progress;
-                var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            limit = (0, p_limit_1.default)(5);
-                            progress = 0;
-                            return [4 /*yield*/, Promise.all(items.map(function (item) {
-                                    return limit(function () { return __awaiter(_this, void 0, void 0, function () {
-                                        var key, err_1, message_1;
-                                        return __generator(this, function (_a) {
-                                            switch (_a.label) {
-                                                case 0:
-                                                    if (abortController.signal.aborted)
-                                                        return [2 /*return*/];
-                                                    key = keyFn(item);
-                                                    _a.label = 1;
-                                                case 1:
-                                                    _a.trys.push([1, 3, 4, 5]);
-                                                    return [4 /*yield*/, actionFn(item, abortController.signal)];
-                                                case 2:
-                                                    _a.sent();
-                                                    if (!abortController.signal.aborted) {
-                                                        setStatuses(function (statuses) {
-                                                            var _a;
-                                                            return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = null, _a)));
-                                                        });
-                                                    }
-                                                    return [3 /*break*/, 5];
-                                                case 3:
-                                                    err_1 = _a.sent();
-                                                    if (!abortController.signal.aborted) {
-                                                        if (err_1 instanceof Error) {
-                                                            message_1 = err_1.message;
-                                                            setStatuses(function (statuses) {
-                                                                var _a;
-                                                                return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = message_1, _a)));
-                                                            });
-                                                        }
-                                                        else {
-                                                            setStatuses(function (statuses) {
-                                                                var _a;
-                                                                return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = "Unknown error", _a)));
-                                                            });
-                                                        }
-                                                        setError(errorText !== null && errorText !== void 0 ? errorText : translations.errorText);
-                                                    }
-                                                    return [3 /*break*/, 5];
-                                                case 4:
-                                                    if (!abortController.signal.aborted) {
-                                                        setProgress(++progress);
-                                                    }
-                                                    return [7 /*endfinally*/];
-                                                case 5: return [2 /*return*/];
-                                            }
-                                        });
-                                    }); });
-                                }))];
-                        case 1:
-                            _a.sent();
-                            if (!abortController.signal.aborted) {
-                                setProcessing(false);
-                            }
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        }
-        void process();
-    }, [abortController, actionFn, errorText, items, keyFn, translations.errorText]);
-    var _g = (0, useTableItems_1.usePaged)(items), paged = _g.paged, page = _g.page, perPage = _g.perPage, setPage = _g.setPage, setPerPage = _g.setPerPage;
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Modal, __assign({ titleIconVariant: isDanger ? 'warning' : undefined, title: title, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: function () {
-            onCancelClicked();
-            onCloseClicked();
-        }, actions: isProcessing
-            ? [
-                (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onCancelClicked }, { children: cancelText !== null && cancelText !== void 0 ? cancelText : translations.cancelText }), "cancel"),
-            ]
-            : [
-                (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "secondary", onClick: onCloseClicked }, { children: closeText !== null && closeText !== void 0 ? closeText : translations.closeText }), "close"),
-            ], hasNoBodyWrapper: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, { children: (0, jsx_runtime_1.jsx)(react_core_1.Progress, { value: (progress / items.length) * 100, title: abortController.signal.aborted
-                        ? 'Cancelled'
-                        : error
-                            ? errorText !== null && errorText !== void 0 ? errorText : translations.errorText
-                            : progress === items.length
-                                ? successText !== null && successText !== void 0 ? successText : translations.successText
-                                : processingText !== null && processingText !== void 0 ? processingText : translations.processingText, size: react_core_1.ProgressSize.lg, variant: error
-                        ? react_core_1.ProgressVariant.danger
-                        : progress === items.length
-                            ? react_core_1.ProgressVariant.success
-                            : undefined }) }), (0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    maxHeight: 560,
-                    overflow: 'hidden',
-                    paddingTop: 16,
-                } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: items.length, tableColumns: __spreadArray(__spreadArray([], __read(columns), false), [
-                        {
-                            header: 'Status',
-                            cell: function (item) {
-                                var key = keyFn(item);
-                                var status = statuses === null || statuses === void 0 ? void 0 : statuses[key];
-                                if (status === undefined) {
-                                    return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: 'var(--pf-global--info-color--100)' } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.PendingIcon, {}), "\u00A0 ", itemPendingText !== null && itemPendingText !== void 0 ? itemPendingText : translations.pendingText, ' ', JSON.stringify(status)] })));
-                                }
-                                if (status === null) {
-                                    return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: {
-                                            color: 'var(--pf-global--success-color--100)',
-                                        } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.CheckCircleIcon, {}), "\u00A0 ", itemSuccessText !== null && itemSuccessText !== void 0 ? itemSuccessText : translations.successText] })));
-                                }
-                                return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: 'var(--pf-global--danger-color--100)' } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}), "\u00A0 ", statuses === null || statuses === void 0 ? void 0 : statuses[key]] })));
-                            },
-                        },
-                    ], false), keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status") }))] })));
-}
-exports.BulkProgressDialog = BulkProgressDialog;
-function useBulkProgressDialog() {
-    var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
-    var _b = __read((0, react_1.useState)(), 2), props = _b[0], setProps = _b[1];
-    (0, react_1.useEffect)(function () {
-        if (props) {
-            var onCloseHandler = function (items) {
-                var _a;
-                setProps(undefined);
-                (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, items);
-            };
-            setDialog((0, jsx_runtime_1.jsx)(BulkProgressDialog, __assign({}, props, { onClose: onCloseHandler })));
-        }
-        else {
-            setDialog(undefined);
-        }
-    }, [props, setDialog]);
-    return setProps;
-}
-exports.useBulkProgressDialog = useBulkProgressDialog;