@ansible/ansible-ui-framework 0.0.532 → 0.0.534
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageCells/CapacityCell.js +3 -3
- package/cjs/PageDetails/PageDetails.js +1 -1
- package/cjs/PageForm/PageForm.js +3 -1
- package/cjs/PageHeader.js +5 -3
- package/cjs/PageTable/PagePagination.js +1 -1
- package/cjs/PageTable/PageTable.js +1 -1
- package/cjs/PageTable/PageToolbar.js +2 -2
- package/cjs/Settings.js +1 -1
- package/cjs/useSelectDialog.js +4 -3
- package/cjs/useSelectMultipleDialog.js +1 -1
- package/package.json +1 -1
@@ -43,9 +43,9 @@ function CapacityCell(props) {
|
|
43
43
|
: ratio >= 0.5
|
44
44
|
? 'var(--pf-global--palette--gold'
|
45
45
|
: 'var(--pf-global--palette--green';
|
46
|
-
var color1 = settings.
|
47
|
-
var color2 = settings.
|
48
|
-
var borderColor = settings.
|
46
|
+
var color1 = settings.activeTheme === 'light' ? "".concat(base, "-100)") : "".concat(base, "-600)");
|
47
|
+
var color2 = settings.activeTheme === 'light' ? "".concat(base, "-400)") : "".concat(base, "-200)");
|
48
|
+
var borderColor = settings.activeTheme === 'light' ? "#0002" : "#fff2";
|
49
49
|
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: {
|
50
50
|
width: 18,
|
51
51
|
height: 25,
|
@@ -22,7 +22,7 @@ function PageDetails(props) {
|
|
22
22
|
var columns = settings.formColumns;
|
23
23
|
var isCompact = false;
|
24
24
|
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ padding: { default: 'noPadding' }, style: {
|
25
|
-
backgroundColor: settings.
|
25
|
+
backgroundColor: settings.activeTheme === 'dark'
|
26
26
|
? 'var(--pf-global--BackgroundColor--300)'
|
27
27
|
: 'var(--pf-global--BackgroundColor--100)',
|
28
28
|
} }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: {
|
package/cjs/PageForm/PageForm.js
CHANGED
@@ -128,7 +128,9 @@ function PageForm(props) {
|
|
128
128
|
overflow: props.disableScrolling ? undefined : 'hidden',
|
129
129
|
gap: 0,
|
130
130
|
} }, { 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: {
|
131
|
-
backgroundColor: settings.
|
131
|
+
backgroundColor: settings.activeTheme === 'dark'
|
132
|
+
? 'var(--pf-global--BackgroundColor--400)'
|
133
|
+
: undefined,
|
132
134
|
padding: disablePadding ? undefined : 24,
|
133
135
|
} }, { 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 })))] })) })));
|
134
136
|
if (!disableBody) {
|
package/cjs/PageHeader.js
CHANGED
@@ -69,7 +69,7 @@ function PageHeader(props) {
|
|
69
69
|
paddingLeft: 0,
|
70
70
|
paddingTop: 0,
|
71
71
|
paddingBottom: 0,
|
72
|
-
borderTop: settings.
|
72
|
+
borderTop: settings.activeTheme !== 'light' && settings.borders
|
73
73
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
74
74
|
: undefined,
|
75
75
|
borderBottom: !props.disableBorderBottom && settings.borders
|
@@ -79,13 +79,15 @@ function PageHeader(props) {
|
|
79
79
|
} }, { 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: {
|
80
80
|
paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
|
81
81
|
paddingBottom: xl ? 16 : 12,
|
82
|
-
borderTop: !navigation && settings.
|
82
|
+
borderTop: !navigation && settings.activeTheme !== 'light' && settings.borders
|
83
83
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
84
84
|
: undefined,
|
85
85
|
borderBottom: !props.disableBorderBottom && settings.borders
|
86
86
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
87
87
|
: undefined,
|
88
|
-
backgroundColor: settings.
|
88
|
+
backgroundColor: settings.activeTheme !== 'light'
|
89
|
+
? 'var(--pf-global--BackgroundColor--300)'
|
90
|
+
: undefined,
|
89
91
|
} }, { 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: {
|
90
92
|
padding: 0,
|
91
93
|
marginTop: 1,
|
@@ -25,6 +25,6 @@ function PagePagination(props) {
|
|
25
25
|
var settings = (0, Settings_1.useSettings)();
|
26
26
|
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,
|
27
27
|
// marginTop: -1,
|
28
|
-
paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, backgroundColor: settings.
|
28
|
+
paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
|
29
29
|
}
|
30
30
|
exports.PagePagination = PagePagination;
|
@@ -90,7 +90,7 @@ function PageTable(props) {
|
|
90
90
|
var usePadding = (0, useBreakPoint_1.useBreakpoint)('md') && props.disableBodyPadding !== true;
|
91
91
|
if (error) {
|
92
92
|
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
93
|
-
backgroundColor: settings.
|
93
|
+
backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
94
94
|
height: '100%',
|
95
95
|
} }, { 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 })] })) })));
|
96
96
|
}
|
@@ -109,7 +109,7 @@ function PageTableToolbar(props) {
|
|
109
109
|
: 'thin solid var(--pf-global--BorderColor--100)',
|
110
110
|
paddingBottom: sm ? undefined : 8,
|
111
111
|
paddingTop: sm ? undefined : 8,
|
112
|
-
backgroundColor: settings.
|
112
|
+
backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
113
113
|
} }, { 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" }) })) }) })));
|
114
114
|
}
|
115
115
|
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ clearAllFilters: clearAllFilters, style: {
|
@@ -118,7 +118,7 @@ function PageTableToolbar(props) {
|
|
118
118
|
: 'thin solid var(--pf-global--BorderColor--100)',
|
119
119
|
paddingBottom: sm ? undefined : 8,
|
120
120
|
paddingTop: sm ? undefined : 8,
|
121
|
-
backgroundColor: settings.
|
121
|
+
backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
122
122
|
} }, { 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) {
|
123
123
|
var _a;
|
124
124
|
var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
|
package/cjs/Settings.js
CHANGED
@@ -74,7 +74,7 @@ function SettingsProvider(props) {
|
|
74
74
|
localStorage.setItem('formColumns', (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple');
|
75
75
|
localStorage.setItem('formLayout', (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical');
|
76
76
|
localStorage.setItem('borders', settings.borders ? 'true' : 'false');
|
77
|
-
var activeTheme = settings.theme
|
77
|
+
var activeTheme = settings.theme !== 'light' && settings.theme !== 'dark'
|
78
78
|
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
79
79
|
? 'dark'
|
80
80
|
: 'light'
|
package/cjs/useSelectDialog.js
CHANGED
@@ -67,15 +67,16 @@ function SelectDialog(props) {
|
|
67
67
|
}, isAriaDisabled: view.selectedItems.length === 0 }, { children: confirm }), "confirm"),
|
68
68
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: cancel }), "cancel"),
|
69
69
|
], 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) {
|
70
|
+
var _a;
|
70
71
|
if (tableColumns && tableColumns.length > 0) {
|
71
|
-
return (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { item: item, column: tableColumns[0] }, i);
|
72
|
+
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));
|
72
73
|
}
|
73
74
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
74
75
|
}), (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: {
|
75
76
|
display: 'flex',
|
76
77
|
flexDirection: 'column',
|
77
|
-
maxHeight:
|
78
|
+
maxHeight: 500,
|
78
79
|
overflow: 'hidden',
|
79
|
-
} }, { 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 })) })) }))] })));
|
80
|
+
} }, { 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 })) })) }))] })));
|
80
81
|
}
|
81
82
|
exports.SelectDialog = SelectDialog;
|
@@ -51,7 +51,7 @@ function SelectMultipleDialog(props) {
|
|
51
51
|
flexDirection: 'column',
|
52
52
|
maxHeight: 500,
|
53
53
|
overflow: 'hidden',
|
54
|
-
} }, { 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 })) })) })));
|
54
|
+
} }, { 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 })) })) })));
|
55
55
|
}
|
56
56
|
exports.SelectMultipleDialog = SelectMultipleDialog;
|
57
57
|
function useSelectMultipleDialog() {
|