@ansible/ansible-ui-framework 0.0.556 → 0.0.557

package/cjs/PageForm/Inputs/PageFormMultiInput.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { FieldPath, FieldValues, Validate, ValidationRule } from 'react-hook-form';
+import { PageFormGroupProps } from './PageFormGroup';
+export type PageFormMultiInputProps<T, TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TFieldName;
+    minLength?: number | ValidationRule<number>;
+    maxLength?: number | ValidationRule<number>;
+    pattern?: ValidationRule<RegExp>;
+    validate?: Validate<T[], TFieldValues>;
+    selectTitle?: string;
+    selectOpen?: (callback: (selection: T[]) => void, title: string) => void;
+} & Omit<PageFormGroupProps, 'onChange' | 'value'>;
+interface FieldValuesWithArray<T> extends FieldValues {
+    [key: string]: T[];
+}
+export declare function PageFormMultiInput<T extends {
+    id: number;
+    name: string;
+}, TFieldValues extends FieldValuesWithArray<T> = FieldValuesWithArray<T>, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormMultiInputProps<T, TFieldValues, TFieldName>): JSX.Element;
+export {};

package/cjs/PageForm/Inputs/PageFormMultiInput.js

@@ -0,0 +1,86 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageFormMultiInput = 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_i18next_1 = require("react-i18next");
+var react_hook_form_1 = require("react-hook-form");
+var styled_components_1 = __importDefault(require("styled-components"));
+var capitalize_1 = require("../../utils/capitalize");
+var PageFormGroup_1 = require("./PageFormGroup");
+var ChipHolder = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --pf-c-form-control--Height: auto;\n  background-color: ", ";\n"], ["\n  --pf-c-form-control--Height: auto;\n  background-color: ", ";\n"])), function (props) {
+    return props.isDisabled ? 'var(--pf-global--disabled-color--300)' : null;
+});
+function PageFormMultiInput(props) {
+    var validate = props.validate, selectTitle = props.selectTitle, selectOpen = props.selectOpen, formGroupInputProps = __rest(props, ["validate", "selectTitle", "selectOpen"]);
+    var label = props.label, name = props.name, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern;
+    var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
+            var _b;
+            var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
+            var removeItem = function (item) {
+                onChange(value.filter(function (i) { return i.id !== item.id; }));
+            };
+            return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message) }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(ChipHolder, __assign({ isDisabled: isSubmitting, className: "pf-c-form-control" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, __assign({ numChips: 5, expandedText: t('Show less'), collapsedText: t("".concat((value === null || value === void 0 ? void 0 : value.length) - 5, " more")) }, { children: value === null || value === void 0 ? void 0 : value.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Chip, __assign({ onClick: function () { return removeItem(item); } }, { children: item.name }), item.id)); }) })) })), selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
+                                return selectOpen === null || selectOpen === void 0 ? void 0 : selectOpen(function (items) {
+                                    setValue(name, items, {
+                                        shouldValidate: true,
+                                    });
+                                }, props.selectTitle);
+                            }, "aria-label": "Options menu", isDisabled: isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.SearchIcon, {}) })))] }) })));
+        }, rules: {
+            required: typeof label === 'string' && typeof isRequired === 'boolean'
+                ? {
+                    value: true,
+                    message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " is required."),
+                }
+                : isRequired,
+            minLength: typeof label === 'string' && typeof minLength === 'number'
+                ? {
+                    value: minLength,
+                    message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " must be at least ").concat(minLength, " characters."),
+                }
+                : minLength,
+            maxLength: typeof label === 'string' && typeof maxLength === 'number'
+                ? {
+                    value: maxLength,
+                    message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " cannot be greater than ").concat(maxLength, " characters."),
+                }
+                : maxLength,
+            pattern: pattern,
+            validate: validate,
+        } }));
+}
+exports.PageFormMultiInput = PageFormMultiInput;
+var templateObject_1;

package/cjs/PageForm/Inputs/PageFormTextInput.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageFormTextInput = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -20,16 +31,16 @@ var capitalize_1 = require("../../utils/capitalize");
 var FormGroupTextInput_1 = require("./FormGroupTextInput");
 /** PatternFly TextInput wrapper for use with react-hook-form */
 function PageFormTextInput(props) {
-    var label = props.label, name = props.name, isReadOnly = props.isReadOnly, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern, validate = props.validate, selectTitle = props.selectTitle;
+    var isReadOnly = props.isReadOnly, validate = props.validate, selectTitle = props.selectTitle, selectValue = props.selectValue, selectOpen = props.selectOpen, formGroupInputProps = __rest(props, ["isReadOnly", "validate", "selectTitle", "selectValue", "selectOpen"]);
+    var label = props.label, name = props.name, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern;
     var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
     return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
             var _b;
             var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
-            return ((0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, props, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), value: value, onChange: onChange, helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message), isReadOnly: isReadOnly || isSubmitting, minLength: undefined, maxLength: undefined }, { children: selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
-                        var _a;
-                        return (_a = props.selectOpen) === null || _a === void 0 ? void 0 : _a.call(props, function (item) {
-                            if (props.selectValue) {
-                                var value_1 = props.selectValue(item);
+            return ((0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), value: value, onChange: onChange, helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message), isReadOnly: isReadOnly || isSubmitting, minLength: undefined, maxLength: undefined }, { children: selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
+                        return selectOpen === null || selectOpen === void 0 ? void 0 : selectOpen(function (item) {
+                            if (selectValue) {
+                                var value_1 = selectValue(item);
                                 setValue(name, value_1, {
                                     shouldValidate: true,
                                 });

package/cjs/PageTable/PageTable.d.ts

@@ -24,6 +24,7 @@ export type PageTableProps<T extends object> = {
     setPerPage: (perPage: number) => void;
     autoHidePagination?: boolean;
     isSelected?: (item: T) => boolean;
+    isSelectMultiple?: boolean;
     selectedItems?: T[];
     selectItem?: (item: T) => void;
     unselectItem?: (item: T) => void;

package/cjs/PageTable/PageTable.js

@@ -107,7 +107,7 @@ function PageTable(props) {
 }
 exports.PageTable = PageTable;
 function PageTableView(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, onSelect = props.onSelect, unselectAll = props.unselectAll, expandedRow = props.expandedRow;
+    var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, isSelectMultiple = props.isSelectMultiple, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll, expandedRow = props.expandedRow;
     var t = props.t;
     t = t ? t : function (t) { return t; };
     var showSelect = props.showSelect ||
@@ -138,7 +138,7 @@ function PageTableView(props) {
                             ? 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: tableColumns.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: tableColumns, 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, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { 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') })) }))] })))] })));
+                                : pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), isSelectMultiple: isSelectMultiple, selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { 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') })) }))] })))] })));
 }
 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, expandedRow = props.expandedRow;
@@ -181,7 +181,7 @@ function TableHead(props) {
                     }, 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, expandedRow = props.expandedRow;
+    var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, unselectAll = props.unselectAll, isItemSelected = props.isItemSelected, isSelectMultiple = props.isSelectMultiple, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
     var _a = __read((0, react_1.useState)(false), 2), expanded = _a[0], setExpanded = _a[1];
     var settings = (0, Settings_1.useSettings)();
     var expandedContent = expandedRow === null || expandedRow === void 0 ? void 0 : expandedRow(item);
@@ -209,12 +209,14 @@ function TableRow(props) {
                             : undefined, 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();
+                                if (!isSelectMultiple) {
+                                    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,
-                            variant: 'radio',
+                            variant: isSelectMultiple ? 'checkbox' : 'radio',
                         }, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), (0, jsx_runtime_1.jsx)(TableCells, { columns: columns, item: item, rowActions: rowActions, scrollLeft: props.scrollLeft, scrollRight: props.scrollRight })] })), expandedRow && expanded && expandedContent && ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, isExpanded: expanded, style: { boxShadow: 'unset' } }, { children: [(0, jsx_runtime_1.jsx)(react_table_1.Td, {}), showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, { isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft }), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: columns.filter(function (column) { return column.enabled !== false; }).length, style: { paddingBottom: settings.tableLayout === 'compact' ? 12 : 24, paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_table_1.CollapseColumn, { children: expandedContent }) })), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
                             right: 0,
                             padding: 0,

package/cjs/useSelectDialog.d.ts

@@ -3,7 +3,7 @@ import { ITableColumn } from './PageTable/PageTable';
 import { IToolbarFilter } from './PageTable/PageToolbar';
 import { ISelected } from './PageTable/useTableItems';
 import { IView } from './useView';
-interface ISelectDialogOptions<T extends object> {
+interface ISelectDialogOptions<T extends object, TMultiple> {
     view: IView & ISelected<T> & {
         itemCount?: number;
         pageItems: T[] | undefined;
@@ -13,18 +13,20 @@ interface ISelectDialogOptions<T extends object> {
     confirm: string;
     cancel: string;
     selected: string;
+    isMultiple?: TMultiple extends true ? true : false;
 }
 export declare function useSelectDialog<T extends {
     id: number;
-}>(options: ISelectDialogOptions<T>): (onSelect?: ((item: T) => void) | undefined, title?: string) => void;
-export type SelectDialogProps<T extends object> = {
+}, TMultiple = false>(options: ISelectDialogOptions<T, TMultiple>): (onSelect?: (TMultiple extends true ? (item: T[]) => void : (item: T) => void) | undefined, title?: string) => void;
+export type SelectDialogProps<T extends object, TMultiple> = {
     title: string;
     open: boolean;
+    isMultiple?: TMultiple extends true ? true : false;
     setOpen: (open: boolean) => void;
-    onSelect: (item: T) => void;
+    onSelect: TMultiple extends true ? (item: T[]) => void : (item: T) => void;
     keyFn: (item: T) => string | number;
-} & ISelectDialogOptions<T>;
+} & ISelectDialogOptions<T, TMultiple>;
 export declare function SelectDialog<T extends {
     id: number;
-}>(props: SelectDialogProps<T>): JSX.Element;
+}, TMultiple = false>(props: SelectDialogProps<T, TMultiple>): JSX.Element;
 export {};

package/cjs/useSelectDialog.js

@@ -35,7 +35,7 @@ var Collapse_1 = require("./components/Collapse");
 var PageDialog_1 = require("./PageDialog");
 var PageTable_1 = require("./PageTable/PageTable");
 function useSelectDialog(options) {
-    var view = options.view, tableColumns = options.tableColumns, toolbarFilters = options.toolbarFilters, confirm = options.confirm, cancel = options.cancel, selected = options.selected;
+    var view = options.view, tableColumns = options.tableColumns, toolbarFilters = options.toolbarFilters, confirm = options.confirm, cancel = options.cancel, selected = options.selected, isMultiple = options.isMultiple;
     var _a = __read((0, react_1.useState)(''), 2), title = _a[0], setTitle = _a[1];
     var _b = __read((0, react_1.useState)(), 2), onSelect = _b[0], setOnSelect = _b[1];
     var openSetting = (0, react_1.useCallback)(function (onSelect, title) {
@@ -45,24 +45,38 @@ function useSelectDialog(options) {
     var _c = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _c[0], setDialog = _c[1];
     (0, react_1.useEffect)(function () {
         if (onSelect !== undefined) {
-            setDialog((0, jsx_runtime_1.jsx)(SelectDialog, { title: title, open: true, setOpen: function () { return setOnSelect(undefined); }, onSelect: onSelect, view: view, tableColumns: tableColumns, toolbarFilters: toolbarFilters, confirm: confirm, cancel: cancel, selected: selected, keyFn: view.keyFn }));
+            setDialog((0, jsx_runtime_1.jsx)(SelectDialog, { title: title, open: true, isMultiple: isMultiple, setOpen: function () { return setOnSelect(undefined); }, onSelect: onSelect, view: view, tableColumns: tableColumns, toolbarFilters: toolbarFilters, confirm: confirm, cancel: cancel, selected: selected, keyFn: view.keyFn }));
         }
         else {
             setDialog(undefined);
             view.unselectAll();
         }
-    }, [cancel, confirm, onSelect, selected, setDialog, tableColumns, title, toolbarFilters, view]);
+    }, [
+        cancel,
+        confirm,
+        onSelect,
+        selected,
+        setDialog,
+        tableColumns,
+        title,
+        toolbarFilters,
+        view,
+        isMultiple,
+    ]);
     return openSetting;
 }
 exports.useSelectDialog = useSelectDialog;
 function SelectDialog(props) {
-    var title = props.title, open = props.open, setOpen = props.setOpen, onSelect = props.onSelect, view = props.view, tableColumns = props.tableColumns, toolbarFilters = props.toolbarFilters, confirm = props.confirm, cancel = props.cancel, selected = props.selected;
+    var title = props.title, open = props.open, _a = props.isMultiple, isMultiple = _a === void 0 ? false : _a, setOpen = props.setOpen, onSelect = props.onSelect, view = props.view, tableColumns = props.tableColumns, toolbarFilters = props.toolbarFilters, confirm = props.confirm, cancel = props.cancel, selected = props.selected;
     var onClose = function () { return setOpen(false); };
     return ((0, jsx_runtime_1.jsxs)(react_core_1.Modal, __assign({ title: title, isOpen: 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: function () {
-                    if (view.selectedItems.length > 0) {
+                    if (!isMultiple && view.selectedItems.length > 0) {
                         onSelect(view.selectedItems[0]);
                     }
+                    else if (isMultiple) {
+                        onSelect(view.selectedItems);
+                    }
                     onClose();
                 }, isAriaDisabled: view.selectedItems.length === 0 }, { children: confirm }), "confirm"),
             (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: cancel }), "cancel"),
@@ -77,6 +91,6 @@ function SelectDialog(props) {
                         flexDirection: 'column',
                         maxHeight: 500,
                         overflow: 'hidden',
-                    } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations" }, view, { onSelect: function () { return null; }, disableCardView: true, disableListView: true, disableColumnManagement: true, compact: true })) })) }))] })));
+                    } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations" }, view, { isSelectMultiple: isMultiple, onSelect: function () { return null; }, disableCardView: true, disableListView: true, disableColumnManagement: true, compact: true })) })) }))] })));
 }
 exports.SelectDialog = SelectDialog;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.556",
+  "version": "0.0.557",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",