@ansible/ansible-ui-framework 0.0.532 → 0.0.533

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.532",
+  "version": "0.0.533",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",