@ansible/ansible-ui-framework 0.0.531 → 0.0.533

package/cjs/BulkConfirmationDialog.d.ts

@@ -6,10 +6,16 @@ export interface BulkConfirmationDialog<T extends object> {
      * @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs
      */
     title: string;
-    /** The prompt that shows up under the confirmation title. */
+    /** The prompt/description that shows up under the confirmation title. */
     prompt?: string;
+    /** Alert prompts that shows up under the confirmation title. */
+    alertPrompts?: string[];
     /** The items to confirm for the bulk action. */
     items: T[];
+    /** A function that determines that whether an action cannot be performed on a selected item
+     * (so that this item can be identified in the confirmation dialog) and returns a tooltip
+     * that can be displayed with the non-actionable row */
+    isItemNonActionable?: (item: T) => string | undefined;
     /** A function that gets a unique key for each item. */
     keyFn: (item: T) => string | number;
     /** The columns to display for confirmation. */

package/cjs/BulkConfirmationDialog.js

@@ -26,39 +26,82 @@ var __read = (this && this.__read) || function (o, n) {
     }
     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));
+};
 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_icons_1 = require("@patternfly/react-icons");
 var react_1 = require("react");
 var BulkActionDialog_1 = require("./BulkActionDialog");
 var PageDialog_1 = require("./PageDialog");
 var PageTable_1 = require("./PageTable/PageTable");
 var useTableItems_1 = require("./PageTable/useTableItems");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
+var compare_1 = require("./utils/compare");
 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 title = props.title, items = props.items, keyFn = props.keyFn, prompt = props.prompt, alertPrompts = props.alertPrompts, confirmationColumns = props.confirmationColumns, isItemNonActionable = props.isItemNonActionable, 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;
+    // Non-actionable rows appear first
+    var sortedItems = (0, react_1.useMemo)(function () {
+        if (isItemNonActionable && items.some(isItemNonActionable)) {
+            return items.sort(function (l, r) { return (0, compare_1.compareStrings)(isItemNonActionable(l), isItemNonActionable(r)); });
+        }
+        return items;
+    }, [items, isItemNonActionable]);
+    var _c = (0, useTableItems_1.usePaged)(sortedItems), 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 ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prompt }) : undefined, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: onCloseClicked, actions: [
+    /**
+     * If there are non-actionable rows, the first column will contain exclamation icons
+     * to identify the non-actionable rows.
+     */
+    var columnsForConfirmation = (0, react_1.useMemo)(function () {
+        if (isItemNonActionable && items.some(isItemNonActionable)) {
+            return __spreadArray([
+                {
+                    header: '',
+                    cell: function (item) {
+                        return isItemNonActionable(item) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: isItemNonActionable(item), trigger: isItemNonActionable(item) ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, __assign({ status: "danger" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}) })) }))) : null;
+                    },
+                }
+            ], __read(confirmationColumns), false);
+        }
+        return confirmationColumns;
+    }, [confirmationColumns, isItemNonActionable, items]);
+    var actionableItems = (0, react_1.useMemo)(function () {
+        if (isItemNonActionable) {
+            return items.filter(function (item) { return !isItemNonActionable(item); });
+        }
+        return items;
+    }, [isItemNonActionable, items]);
+    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: {
+        ], hasNoBodyWrapper: true }, { children: items.length > 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.ModalBoxBody, __assign({ style: { paddingLeft: 0, paddingRight: 0 } }, { children: [(0, jsx_runtime_1.jsxs)("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 }) })))] })) })));
+                    } }, { children: [alertPrompts &&
+                            alertPrompts.length > 0 &&
+                            alertPrompts.map(function (alertPrompt, i) { return ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { isInline: true, title: alertPrompt, variant: "danger" }, i)); }), (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: items.length, tableColumns: columnsForConfirmation, keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items" }, "items")] })), confirmText && actionableItems.length > 0 && ((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];
@@ -82,7 +125,11 @@ 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); } }));
+        var bulkActionOptions = Object.assign({}, options);
+        if (options.isItemNonActionable && options.isItemNonActionable !== undefined) {
+            bulkActionOptions.items = options.items.filter(function (item) { return options.isItemNonActionable !== undefined && !options.isItemNonActionable(item); });
+        }
+        return bulkConfirmationDialog(__assign(__assign({}, options), { onConfirm: function () { return bulkActionDialog(bulkActionOptions); } }));
     }, [bulkActionDialog, bulkConfirmationDialog]);
 }
 exports.useBulkConfirmation = useBulkConfirmation;

package/cjs/PageCells/CapacityCell.js

@@ -43,9 +43,9 @@ function CapacityCell(props) {
         : ratio >= 0.5
             ? 'var(--pf-global--palette--gold'
             : 'var(--pf-global--palette--green';
-    var color1 = settings.theme === 'light' ? "".concat(base, "-100)") : "".concat(base, "-600)");
-    var color2 = settings.theme === 'light' ? "".concat(base, "-400)") : "".concat(base, "-200)");
-    var borderColor = settings.theme === 'light' ? "#0002" : "#fff2";
+    var color1 = settings.activeTheme === 'light' ? "".concat(base, "-100)") : "".concat(base, "-600)");
+    var color2 = settings.activeTheme === 'light' ? "".concat(base, "-400)") : "".concat(base, "-200)");
+    var borderColor = settings.activeTheme === 'light' ? "#0002" : "#fff2";
     return ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ alignItems: { default: 'alignItemsBaseline' }, spaceItems: { default: 'spaceItemsSm' } }, { children: [props.capacity > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                         width: 18,
                         height: 25,

package/cjs/PageDetails/PageDetails.js

@@ -22,7 +22,7 @@ function PageDetails(props) {
     var columns = settings.formColumns;
     var isCompact = false;
     return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ padding: { default: 'noPadding' }, style: {
-            backgroundColor: settings.theme === 'dark'
+            backgroundColor: settings.activeTheme === 'dark'
                 ? 'var(--pf-global--BackgroundColor--300)'
                 : 'var(--pf-global--BackgroundColor--100)',
         } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: {

package/cjs/PageForm/PageForm.js

@@ -128,7 +128,9 @@ function PageForm(props) {
                 overflow: props.disableScrolling ? undefined : 'hidden',
                 gap: 0,
             } }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: props.children })) }))) : ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, __assign({ style: { height: '100%', flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: props.children })) })) }))), error && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { variant: "danger", title: error !== null && error !== void 0 ? error : '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } })), props.onCancel ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                        backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--400)' : undefined,
+                        backgroundColor: settings.activeTheme === 'dark'
+                            ? 'var(--pf-global--BackgroundColor--400)'
+                            : undefined,
                         padding: disablePadding ? undefined : 24,
                     } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [(0, jsx_runtime_1.jsx)(PageFormSubmitButton, { children: props.submitText }), props.onCancel && ((0, jsx_runtime_1.jsx)(PageFormCancelButton, __assign({ onCancel: props.onCancel }, { children: (_a = props.cancelText) !== null && _a !== void 0 ? _a : frameworkTranslations.cancelText })))] })) }))) : ((0, jsx_runtime_1.jsx)(PageFormSubmitButton, __assign({ style: { marginTop: 48 } }, { children: props.submitText })))] })) })));
     if (!disableBody) {

package/cjs/PageHeader.js

@@ -69,7 +69,7 @@ function PageHeader(props) {
                     paddingLeft: 0,
                     paddingTop: 0,
                     paddingBottom: 0,
-                    borderTop: settings.theme !== 'light' && settings.borders
+                    borderTop: settings.activeTheme !== 'light' && settings.borders
                         ? 'thin solid var(--pf-global--BorderColor--100)'
                         : undefined,
                     borderBottom: !props.disableBorderBottom && settings.borders
@@ -79,13 +79,15 @@ function PageHeader(props) {
                 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageNavigation, __assign({ style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 } }, { children: navigation })) })) }))), true && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
                             paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
                             paddingBottom: xl ? 16 : 12,
-                            borderTop: !navigation && settings.theme !== 'light' && settings.borders
+                            borderTop: !navigation && settings.activeTheme !== 'light' && settings.borders
                                 ? 'thin solid var(--pf-global--BorderColor--100)'
                                 : undefined,
                             borderBottom: !props.disableBorderBottom && settings.borders
                                 ? 'thin solid var(--pf-global--BorderColor--100)'
                                 : undefined,
-                            backgroundColor: settings.theme !== 'light' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+                            backgroundColor: settings.activeTheme !== 'light'
+                                ? 'var(--pf-global--BackgroundColor--300)'
+                                : undefined,
                         } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.titleHelpTitle, bodyContent: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [typeof props.titleHelp === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: props.titleHelp })) : (props.titleHelp.map(function (help, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: help }, index)); })), props.titleDocLink && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), variant: "link", onClick: function () { return window.open(props.titleDocLink, '_blank'); }, isInline: true }, { children: t('Documentation') })) }))] })), position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: [title, (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
                                                             padding: 0,
                                                             marginTop: 1,

package/cjs/PageTable/PagePagination.js

@@ -25,6 +25,6 @@ function PagePagination(props) {
     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 ? 4 : 6, paddingBottom: compact ? 4 : 6, backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
+            paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
 }
 exports.PagePagination = PagePagination;

package/cjs/PageTable/PageTable.js

@@ -90,7 +90,7 @@ function PageTable(props) {
     var usePadding = (0, useBreakPoint_1.useBreakpoint)('md') && props.disableBodyPadding !== true;
     if (error) {
         return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+                backgroundColor: settings.activeTheme === '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: 48 } }, { 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 })] })) })));
     }

package/cjs/PageTable/PageToolbar.js

@@ -109,7 +109,7 @@ function PageTableToolbar(props) {
                     : '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,
+                backgroundColor: settings.activeTheme === '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: {
@@ -118,7 +118,7 @@ function PageTableToolbar(props) {
                 : '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,
+            backgroundColor: settings.activeTheme === '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)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "Select filter" }, { 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, { id: "filter-input", 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];

package/cjs/Settings.js

@@ -74,7 +74,7 @@ function SettingsProvider(props) {
         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');
-        var activeTheme = settings.theme === 'system'
+        var activeTheme = settings.theme !== 'light' && settings.theme !== 'dark'
             ? window.matchMedia('(prefers-color-scheme: dark)').matches
                 ? 'dark'
                 : 'light'

package/cjs/useSelectDialog.js

@@ -67,15 +67,16 @@ function SelectDialog(props) {
                 }, 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"),
         ], hasNoBodyWrapper: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { overflow: 'hidden' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { opacity: view.selectedItems.length === 0 ? 0 : undefined } }, { children: selected })), (0, jsx_runtime_1.jsxs)("b", { children: [view.selectedItems.map(function (item, i) {
+                                    var _a;
                                     if (tableColumns && tableColumns.length > 0) {
-                                        return (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { item: item, column: tableColumns[0] }, i);
+                                        return ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { item: item, column: (_a = tableColumns.find(function (column) { return column.card === 'name' || column.list === 'name'; })) !== null && _a !== void 0 ? _a : tableColumns[0] }, i));
                                     }
                                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                                 }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })] })) })), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: view.itemCount === undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "80px" }) })), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: view.itemCount !== undefined }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                         display: 'flex',
                         flexDirection: 'column',
-                        maxHeight: 400,
+                        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 })) })) }))] })));
+                    } }, { 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 })) })) }))] })));
 }
 exports.SelectDialog = SelectDialog;

package/cjs/useSelectMultipleDialog.js

@@ -51,7 +51,7 @@ function SelectMultipleDialog(props) {
                 flexDirection: 'column',
                 maxHeight: 500,
                 overflow: 'hidden',
-            } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters }, view, { emptyStateTitle: (_a = props.emptyStateTitle) !== null && _a !== void 0 ? _a : translations.noItemsFound, errorStateTitle: (_b = props.errorStateTitle) !== null && _b !== void 0 ? _b : translations.errorText, showSelect: true, disableCardView: true, disableListView: true, disableColumnManagement: true })) })) })));
+            } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters }, view, { emptyStateTitle: (_a = props.emptyStateTitle) !== null && _a !== void 0 ? _a : translations.noItemsFound, errorStateTitle: (_b = props.errorStateTitle) !== null && _b !== void 0 ? _b : translations.errorText, showSelect: true, disableCardView: true, disableListView: true, disableColumnManagement: true, compact: true })) })) })));
 }
 exports.SelectMultipleDialog = SelectMultipleDialog;
 function useSelectMultipleDialog() {

package/package.json

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