@ansible/ansible-ui-framework 0.0.538 → 0.0.540

package/cjs/PageBody.js

@@ -34,11 +34,9 @@ exports.PageBody = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
 var useBreakPoint_1 = require("./components/useBreakPoint");
-var Settings_1 = require("./Settings");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 function PageBody(props) {
     var usePadding = (0, useBreakPoint_1.useBreakpoint)('xxl') && props.disablePadding !== true;
-    var settings = (0, Settings_1.useSettings)();
     var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
     return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: translations.errorText }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: __assign({ display: 'flex', flexDirection: 'column', height: '100%', maxHeight: '100%', overflow: 'hidden', backgroundColor: 'var(--pf-c-page__main-section--BackgroundColor)' }, props.style) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                     display: 'flex',
@@ -47,9 +45,7 @@ function PageBody(props) {
                     maxHeight: '100%',
                     margin: usePadding ? 24 : 0,
                     overflow: 'hidden',
-                    border: settings.borders && usePadding
-                        ? 'thin solid var(--pf-global--BorderColor--100)'
-                        : undefined,
+                    border: 'thin solid var(--pf-global--BorderColor--100)',
                     backgroundColor: 'var(--pf-global--BackgroundColor--100)',
                 } }, { children: props.children })) })) })));
 }

package/cjs/PageDetails/PageDetails.js

@@ -21,11 +21,7 @@ function PageDetails(props) {
     var orientation = settings.formLayout;
     var columns = settings.formColumns;
     var isCompact = false;
-    return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ padding: { default: 'noPadding' }, style: {
-            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: {
+    return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: "light", padding: { default: 'noPadding' }, className: "dark-1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: {
                 sm: orientation,
                 md: orientation,
                 lg: orientation,

package/cjs/PageForm/PageForm.js

@@ -127,12 +127,7 @@ function PageForm(props) {
                 flexGrow: 1,
                 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.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 })))] })) })));
+            } }, { 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({ className: "dark-2 border-top", style: { 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) {
         Component = (0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: Component });
     }

package/cjs/PageFramework.css

@@ -0,0 +1,27 @@
+.border-top {
+  border-top: thin solid var(--pf-global--BorderColor--100);
+}
+
+.border-bottom {
+  border-bottom: thin solid var(--pf-global--BorderColor--100);
+}
+
+.light {
+  background-color: var(--pf-global--BackgroundColor--100);
+}
+
+:root:where(.pf-theme-dark) .dark-0 {
+  background-color: var(--pf-global--BackgroundColor--200);
+}
+
+:root:where(.pf-theme-dark) .dark-1 {
+  background-color: var(--pf-global--BackgroundColor--100);
+}
+
+:root:where(.pf-theme-dark) .dark-2 {
+  background-color: var(--pf-global--BackgroundColor--300);
+}
+
+:root:where(.pf-theme-dark) .dark-3 {
+  background-color: var(--pf-global--BackgroundColor--400);
+}

package/cjs/PageFramework.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import './PageFramework.css';
 /**
  * The `PageFramework` component bundles up all the context providers in the Ansible UI framework in a convienent component for framework consumers. Examples of internal context providers are translations, navigation, settings, alerts, and dialogs.
  *

package/cjs/PageFramework.js

@@ -16,6 +16,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var usePageNavigate_1 = require("./components/usePageNavigate");
 var PageAlertToaster_1 = require("./PageAlertToaster");
 var PageDialog_1 = require("./PageDialog");
+require("./PageFramework.css");
 var Settings_1 = require("./Settings");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 /**

package/cjs/PageHeader.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import './PageFramework.css';
 export interface ICatalogBreadcrumb {
     id?: string;
     label?: string;
@@ -17,7 +18,6 @@ export interface PageHeaderProps {
     controls?: ReactNode;
     headerActions?: ReactNode;
     t?: (t: string) => string;
-    disableBorderBottom?: boolean;
 }
 /**
  * PageHeader enables the responsive layout of the header.

package/cjs/PageHeader.js

@@ -20,7 +20,7 @@ var react_2 = require("react");
 var useBreakPoint_1 = require("./components/useBreakPoint");
 var usePageNavigate_1 = require("./components/usePageNavigate");
 var PageAlerts_1 = require("./PageAlerts");
-var Settings_1 = require("./Settings");
+require("./PageFramework.css");
 function Breadcrumbs(props) {
     var navigate = (0, usePageNavigate_1.usePageNavigate)();
     if (!props.breadcrumbs)
@@ -62,32 +62,11 @@ function PageHeader(props) {
     var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
     var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
     var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
-    var settings = (0, Settings_1.useSettings)();
     var t = props.t;
     t = t ? t : function (t) { return t; };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navigation && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
-                    paddingLeft: 0,
-                    paddingTop: 0,
-                    paddingBottom: 0,
-                    borderTop: 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: 'var(--pf-global--BackgroundColor--100)',
-                } }, { 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: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navigation && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top dark-1", style: { paddingLeft: 0, paddingTop: 0, paddingBottom: 0 } }, { 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, className: "border-top border-bottom dark-3", style: {
                             paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
                             paddingBottom: xl ? 16 : 12,
-                            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.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

@@ -16,15 +16,13 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 var useBreakPoint_1 = require("../components/useBreakPoint");
-var Settings_1 = require("../Settings");
 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)('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, 
+    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), { boxShadow: 'none', zIndex: 301, 
             // marginTop: -1,
-            paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
+            paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6 }), className: "dark-2" }));
 }
 exports.PagePagination = PagePagination;

package/cjs/PageTable/PageTable.js

@@ -86,13 +86,9 @@ function PageTable(props) {
                 ? PageTableViewType_1.PageTableViewTypeE.List
                 : PageTableViewType_1.PageTableViewTypeE.Cards);
     }), 2), viewType = _c[0], setViewType = _c[1];
-    var settings = (0, Settings_1.useSettings)();
     var usePadding = (0, useBreakPoint_1.useBreakpoint)('md') && props.disableBodyPadding !== true;
     if (error) {
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                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 })] })) })));
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "dark-2", style: { 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 })] })) })));
     }
     if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
         return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })) }));
@@ -146,7 +142,6 @@ function PageTableView(props) {
 }
 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;
-    var settings = (0, Settings_1.useSettings)();
     var getColumnSort = (0, react_1.useCallback)(function (columnIndex, column) {
         if (!column.sort)
             return undefined;
@@ -165,9 +160,7 @@ function TableHead(props) {
             columnIndex: columnIndex,
         };
     }, [setSort, setSortDirection, sort, sortDirection]);
-    return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ style: {
-                backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : 'white',
-            } }, { children: [expandedRow && (0, jsx_runtime_1.jsx)(react_table_1.Th, { style: { padding: 0, backgroundColor: 'inherit' } }), (showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft, style: { backgroundColor: 'inherit' } }, { children: "\u00A0" }))), columns
+    return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: "light dark-2" }, { children: [expandedRow && (0, jsx_runtime_1.jsx)(react_table_1.Th, { style: { padding: 0, backgroundColor: 'inherit' } }), (showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft, style: { backgroundColor: 'inherit' } }, { children: "\u00A0" }))), columns
                     .filter(function (column) { return column.enabled !== false; })
                     .map(function (column, index) {
                     return ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ sort: getColumnSort(index, column), style: {

package/cjs/PageTable/PageToolbar.css

@@ -0,0 +1,7 @@
+.pf-c-toolbar__content-section {
+  row-gap: 16px !important;
+}
+
+.pf-c-toolbar__expandable-content.pf-m-expanded {
+  z-index: 400;
+}

package/cjs/PageTable/PageToolbar.d.ts

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { IPageAction } from '../PageActions/PageAction';
 import { PageTableViewType } from './PageTableViewType';
+import './PageToolbar.css';
 export interface IItemFilter<T extends object> {
     label: string;
     type?: 'search' | 'filter';
@@ -52,7 +53,6 @@ export type PagetableToolbarProps<T extends object> = {
     selectItems?: (items: T[]) => void;
     unselectAll?: () => void;
     onSelect?: (item: T) => void;
-    disableBorderBottom?: boolean;
     showSelect?: boolean;
     viewType: PageTableViewType;
     setViewType: (viewType: PageTableViewType) => void;

package/cjs/PageTable/PageToolbar.js

@@ -48,9 +48,9 @@ var useBreakPoint_1 = require("../components/useBreakPoint");
 var PageActions_1 = require("../PageActions/PageActions");
 var PageActionType_1 = require("../PageActions/PageActionType");
 var FormGroupSelect_1 = require("../PageForm/Inputs/FormGroupSelect");
-var Settings_1 = require("../Settings");
 var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
 var PageTableViewType_1 = require("./PageTableViewType");
+require("./PageToolbar.css");
 function toolbarActionsHaveBulkActions(actions) {
     var e_1, _a;
     if (!actions)
@@ -74,7 +74,7 @@ function toolbarActionsHaveBulkActions(actions) {
 exports.toolbarActionsHaveBulkActions = toolbarActionsHaveBulkActions;
 function PageTableToolbar(props) {
     var _a;
-    var itemCount = props.itemCount, page = props.page, perPage = props.perPage, setPage = props.setPage, setPerPage = props.setPerPage, toolbarFilters = props.toolbarFilters, selectedItems = props.selectedItems, filters = props.filters, setFilters = props.setFilters, clearAllFilters = props.clearAllFilters, openColumnModal = props.openColumnModal, disableBorderBottom = props.disableBorderBottom;
+    var itemCount = props.itemCount, page = props.page, perPage = props.perPage, setPage = props.setPage, setPerPage = props.setPerPage, toolbarFilters = props.toolbarFilters, selectedItems = props.selectedItems, filters = props.filters, setFilters = props.setFilters, clearAllFilters = props.clearAllFilters, openColumnModal = props.openColumnModal;
     var sm = (0, useBreakPoint_1.useBreakpoint)('md');
     var viewType = props.viewType, setViewType = props.setViewType;
     var toolbarActions = props.toolbarActions;
@@ -91,7 +91,6 @@ function PageTableToolbar(props) {
     var _b = __read((0, react_1.useState)(function () {
         return toolbarFilters ? ((toolbarFilters === null || toolbarFilters === void 0 ? void 0 : toolbarFilters.length) > 0 ? toolbarFilters[0].key : '') : '';
     }), 2), selectedFilter = _b[0], setSeletedFilter = _b[1];
-    var settings = (0, Settings_1.useSettings)();
     var viewTypeCount = 0;
     if (!props.disableTableView)
         viewTypeCount++;
@@ -103,23 +102,9 @@ function PageTableToolbar(props) {
         return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
     }
     if (itemCount === undefined) {
-        return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ style: {
-                borderBottom: disableBorderBottom
-                    ? undefined
-                    : 'thin solid var(--pf-global--BorderColor--100)',
-                paddingBottom: sm ? undefined : 8,
-                paddingTop: sm ? undefined : 8,
-                backgroundColor: settings.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({ className: "border-bottom dark-2", style: { paddingBottom: sm ? undefined : 8, paddingTop: sm ? undefined : 8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarContent, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ style: { width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "36px" }) })) }) })));
     }
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ clearAllFilters: clearAllFilters, style: {
-            borderBottom: disableBorderBottom
-                ? undefined
-                : 'thin solid var(--pf-global--BorderColor--100)',
-            paddingBottom: sm ? undefined : 8,
-            paddingTop: sm ? undefined : 8,
-            backgroundColor: settings.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) {
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ clearAllFilters: clearAllFilters, className: "dark-2", style: { paddingBottom: sm ? undefined : 8, paddingTop: sm ? undefined : 8 } }, { 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];
                                         if (!values)

package/cjs/PageTabs.js

@@ -50,7 +50,7 @@ function PageTabs(props) {
     if (loading) {
         return ((0, jsx_runtime_1.jsx)(PageTabs, { children: (0, jsx_runtime_1.jsx)(PageTab, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: "light" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}) })) }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ type: react_core_1.PageSectionTypes.tabs }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' } }, { children: [props.preComponents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ type: react_core_1.PageSectionTypes.tabs, className: "border-bottom" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' } }, { children: [props.preComponents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem
                                 // style={{ paddingLeft: 16 }}
                                 , { children: props.preComponents }), (0, jsx_runtime_1.jsx)(react_core_1.Divider, { orientation: { default: 'vertical' }, component: "div" })] })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tabs, __assign({ activeKey: activeKey, onSelect: onSelect, inset: props.preComponents
                                     ? undefined
@@ -62,7 +62,7 @@ function PageTabs(props) {
                                             xl: 'insetSm'
                                         },
                                         _a['2xl'] = 'insetSm',
-                                        _a), hasBorderBottom: false }, { children: tabs })) })), props.postComponents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Divider, { orientation: { default: 'vertical' } }), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingRight: 16 } }, { children: props.postComponents }))] }))] })) })), (0, jsx_runtime_1.jsx)(react_core_1.Divider, {}), content] }));
+                                        _a), hasBorderBottom: false }, { children: tabs })) })), props.postComponents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Divider, { orientation: { default: 'vertical' } }), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingRight: 16 } }, { children: props.postComponents }))] }))] })) })), content] }));
 }
 exports.PageTabs = PageTabs;
 function PageTab(props) {

package/cjs/Settings.d.ts

@@ -5,7 +5,6 @@ export interface Settings {
     tableLayout?: 'compact' | 'comfortable';
     formColumns?: 'single' | 'multiple';
     formLayout?: 'vertical' | 'horizontal';
-    borders?: boolean;
 }
 export declare const SettingsContext: import("react").Context<[Settings, (settings: Settings) => void]>;
 export declare function useSettings(): Settings;

package/cjs/Settings.js

@@ -57,7 +57,6 @@ function SettingsProvider(props) {
             tableLayout: localStorage.getItem('tableLayout'),
             formColumns: localStorage.getItem('formColumns'),
             formLayout: localStorage.getItem('formLayout'),
-            borders: localStorage.getItem('borders') !== 'false',
         };
         if (activeTheme === 'dark') {
             document.documentElement.classList.add('pf-theme-dark');
@@ -73,7 +72,6 @@ function SettingsProvider(props) {
         localStorage.setItem('tableLayout', (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable');
         localStorage.setItem('formColumns', (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple');
         localStorage.setItem('formLayout', (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical');
-        localStorage.setItem('borders', settings.borders ? 'true' : 'false');
         var activeTheme = settings.theme !== 'light' && settings.theme !== 'dark'
             ? window.matchMedia('(prefers-color-scheme: dark)').matches
                 ? 'dark'
@@ -121,6 +119,6 @@ function SettingsDialog(props) {
                         return setSettings(__assign(__assign({}, settings), { formColumns: formColumns }));
                     }, placeholderText: "Select form columns" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-layout", label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onSelect: function (_, formLayout) {
                         return setSettings(__assign(__assign({}, settings), { formLayout: formLayout }));
-                    }, placeholderText: "Select form layout" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "borders", label: "Borders", value: settings.borders ? 'true' : 'false', onSelect: function (_, value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); }, placeholderText: "Select borders" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: 'Yes' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: 'No' }))] }))] })) })));
+                    }, placeholderText: "Select form layout" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] }))] })) })));
 }
 exports.SettingsDialog = SettingsDialog;

package/cjs/components/Collapse.css

@@ -0,0 +1,12 @@
+.collapsed {
+  max-height: 0;
+  transition: max-height 0.15s ease-out, opacity 0.15s ease-out;
+  overflow: hidden;
+  opacity: 0;
+}
+
+.expanded {
+  max-height: 500px;
+  transition: max-height 0.25s ease-in, opacity 0.25s ease-in;
+  opacity: 1;
+}

package/cjs/components/Collapse.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import './Collapse.css';
 export declare function Collapse(props: {
     open: boolean;
     children: ReactNode;

package/cjs/components/Collapse.js

@@ -13,6 +13,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Collapse = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+require("./Collapse.css");
 function Collapse(props) {
     var className = 'collapsed';
     if (props.open)

package/package.json

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