@ansible/ansible-ui-framework 0.0.218 → 0.0.220

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/cjs/PageHeader.js +6 -0
  2. package/cjs/{TypedActions.js → TypedActions/TypedActions.js} +26 -98
  3. package/cjs/TypedActions/TypedActionsButtons.js +106 -0
  4. package/cjs/TypedActions/index.js +18 -0
  5. package/mjs/PageBody.d.ts +1 -1
  6. package/mjs/PageHeader.js +6 -0
  7. package/mjs/{TypedActions.d.ts → TypedActions/TypedActions.d.ts} +5 -13
  8. package/mjs/{TypedActions.js → TypedActions/TypedActions.js} +22 -92
  9. package/mjs/TypedActions/TypedActionsButtons.d.ts +16 -0
  10. package/mjs/TypedActions/TypedActionsButtons.js +87 -0
  11. package/mjs/TypedActions/index.d.ts +2 -0
  12. package/mjs/TypedActions/index.js +2 -0
  13. package/package.json +1 -1
package/cjs/PageHeader.js CHANGED
@@ -71,6 +71,9 @@ function PageHeader(props) {
71
71
  paddingLeft: 0,
72
72
  paddingTop: 0,
73
73
  paddingBottom: 0,
74
+ borderTop: settings.theme !== 'light' && settings.borders
75
+ ? 'thin solid var(--pf-global--BorderColor--100)'
76
+ : undefined,
74
77
  borderBottom: settings.borders
75
78
  ? 'thin solid var(--pf-global--BorderColor--100)'
76
79
  : undefined,
@@ -78,6 +81,9 @@ function PageHeader(props) {
78
81
  } }, { 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 }, hasOverflowScroll: true }, { children: navigation })) })) }))), (isMdOrLarger || !navigation) && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
79
82
  paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
80
83
  paddingBottom: xl ? 20 : 12,
84
+ borderTop: !navigation && settings.theme !== 'light' && settings.borders
85
+ ? 'thin solid var(--pf-global--BorderColor--100)'
86
+ : undefined,
81
87
  borderBottom: settings.borders
82
88
  ? 'thin solid var(--pf-global--BorderColor--100)'
83
89
  : undefined,
package/cjs/{TypedActions.js → TypedActions/TypedActions.js} RENAMED
@@ -36,12 +36,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
36
36
  return to.concat(ar || Array.prototype.slice.call(from));
37
37
  };
38
38
  Object.defineProperty(exports, "__esModule", { value: true });
39
- exports.useTypedActionsToTableActions = exports.TypedActions = exports.TypedActionButton = exports.TypedActionsButtons = exports.TypedActionsDropdown = exports.TypedActionType = void 0;
39
+ exports.useTypedActionsToTableActions = exports.TypedActions = exports.DropdownActionItem = exports.TypedActionsDropdown = exports.TypedActionType = void 0;
40
40
  var jsx_runtime_1 = require("react/jsx-runtime");
41
41
  var react_core_1 = require("@patternfly/react-core");
42
42
  var react_icons_1 = require("@patternfly/react-icons");
43
43
  var react_1 = require("react");
44
- var useBreakPoint_1 = require("./components/useBreakPoint");
44
+ var useBreakPoint_1 = require("../components/useBreakPoint");
45
+ var TypedActionsButtons_1 = require("./TypedActionsButtons");
45
46
  var TypedActionType;
46
47
  (function (TypedActionType) {
47
48
  TypedActionType["seperator"] = "seperator";
@@ -64,110 +65,37 @@ function TypedActionsDropdown(props) {
64
65
  ? {
65
66
  color: 'var(--pf-global--Color--light-100)',
66
67
  }
67
- : {} }, { children: label })), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map(function (action, index) {
68
- switch (action.type) {
69
- case TypedActionType.button:
70
- case TypedActionType.bulk: {
71
- var Icon = action.icon;
72
- if (!Icon && hasIcons)
73
- Icon = TransparentIcon;
74
- var tooltip = action.tooltip;
75
- var isDisabled = false;
76
- if (action.type === TypedActionType.bulk && (!selectedItems || !selectedItems.length)) {
77
- tooltip = 'No selections';
78
- isDisabled = true;
79
- }
80
- return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: function () { return action.onClick(selectedItems !== null && selectedItems !== void 0 ? selectedItems : []); }, isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined,
81
- // style={{ color: 'var(--pf-global--primary-color--100)' }}
82
- style: {
83
- color: action.isDanger && !isDisabled
84
- ? 'var(--pf-global--danger-color--100)'
85
- : undefined,
86
- } }, { children: action.label })) }), action.label));
87
- }
88
- case TypedActionType.dropdown:
89
- return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
90
- case TypedActionType.seperator:
91
- return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
92
- }
93
- }), position: props.position, style: { zIndex: 201 } }));
68
+ : {} }, { children: label })), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(DropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: 201 } }));
94
69
  }
95
70
  exports.TypedActionsDropdown = TypedActionsDropdown;
96
- function TypedActionsButtons(props) {
97
- var actions = props.actions, selectedItems = props.selectedItems, wrapper = props.wrapper;
98
- if (actions.length === 0)
99
- return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
100
- return ((0, jsx_runtime_1.jsx)(react_core_1.Split, __assign({ hasGutter: true }, { children: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: action, selectedItems: selectedItems, wrapper: wrapper }, index)); }) })));
101
- }
102
- exports.TypedActionsButtons = TypedActionsButtons;
103
- function TypedActionButton(props) {
104
- var _a, _b, _c;
105
- var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper, noPrimary = props.noPrimary;
106
- var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
71
+ function DropdownActionItem(props) {
72
+ var action = props.action, selectedItems = props.selectedItems, hasIcons = props.hasIcons, index = props.index;
73
+ // TODO case TypedActionType.single?
107
74
  switch (action.type) {
108
- case TypedActionType.seperator: {
109
- return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
110
- }
111
- case TypedActionType.single: {
112
- var Icon = action.icon;
113
- var tooltip = action.tooltip;
114
- var isDisabled = false;
115
- var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
116
- if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
117
- variant = react_core_1.ButtonVariant.secondary;
118
- }
119
- if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
120
- variant = react_core_1.ButtonVariant.danger;
121
- }
122
- if (props.iconOnly) {
123
- variant = react_core_1.ButtonVariant.plain;
124
- }
125
- return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { marginLeft: -4, paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: function () { return selectedItem && action.onClick(selectedItem); }, isDanger: action.isDanger }, { children: props.iconOnly && Icon ? ((0, jsx_runtime_1.jsx)(Icon, {})) : action.shortLabel ? (action.shortLabel) : (action.label) })) })) }));
126
- }
75
+ case TypedActionType.button:
127
76
  case TypedActionType.bulk: {
128
77
  var Icon = action.icon;
78
+ if (!Icon && hasIcons)
79
+ Icon = TransparentIcon;
129
80
  var tooltip = action.tooltip;
130
81
  var isDisabled = false;
131
- var variant = (_b = action.variant) !== null && _b !== void 0 ? _b : react_core_1.ButtonVariant.secondary;
132
- if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
133
- variant = react_core_1.ButtonVariant.secondary;
134
- }
135
- if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
136
- variant = react_core_1.ButtonVariant.danger;
137
- }
138
- if (!selectedItems || !selectedItems.length) {
82
+ if (action.type === TypedActionType.bulk && !selectedItems.length) {
139
83
  tooltip = 'No selections';
140
84
  isDisabled = true;
141
85
  }
142
- return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: function () { return action.onClick(selectedItems !== null && selectedItems !== void 0 ? selectedItems : []); }, isDanger: action.isDanger }, { children: action.shortLabel ? action.shortLabel : action.label })) })) }));
143
- }
144
- case TypedActionType.button: {
145
- var Icon = action.icon;
146
- var tooltip = action.tooltip;
147
- var isDisabled = false;
148
- var variant = (_c = action.variant) !== null && _c !== void 0 ? _c : react_core_1.ButtonVariant.secondary;
149
- if (selectedItems && selectedItems.length) {
150
- switch (variant) {
151
- case react_core_1.ButtonVariant.danger:
152
- case react_core_1.ButtonVariant.primary:
153
- variant = react_core_1.ButtonVariant.secondary;
154
- break;
155
- }
156
- }
157
- if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
158
- variant = react_core_1.ButtonVariant.secondary;
159
- }
160
- if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
161
- variant = react_core_1.ButtonVariant.danger;
162
- }
163
- return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: variant, isDanger: action.isDanger, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick }, { children: action.shortLabel ? action.shortLabel : action.label })) })) }));
164
- }
165
- case TypedActionType.dropdown: {
166
- return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { actions: action.options, label: action.label, isPrimary: action.variant === react_core_1.ButtonVariant.primary && !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) }));
167
- }
86
+ return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: function () { return action.onClick(selectedItems); }, isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
87
+ color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
88
+ } }, { children: action.label })) }), action.label));
89
+ }
90
+ case TypedActionType.dropdown:
91
+ return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
92
+ case TypedActionType.seperator:
93
+ return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
94
+ default:
95
+ return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
168
96
  }
169
97
  }
170
- exports.TypedActionButton = TypedActionButton;
98
+ exports.DropdownActionItem = DropdownActionItem;
171
99
  function TypedActions(props) {
172
100
  var _a, _b;
173
101
  var actions = props.actions;
@@ -200,7 +128,7 @@ function TypedActions(props) {
200
128
  dropdownActions.pop();
201
129
  return dropdownActions;
202
130
  }, [collapseButtons, actions, isButtonAction]);
203
- return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(TypedActionsButtons, __assign({}, props, { actions: buttonActions })), (0, jsx_runtime_1.jsx)(TypedActionsDropdown, __assign({}, props, { actions: dropdownActions, position: props.position, isPrimary: !!((_b = props.selectedItems) === null || _b === void 0 ? void 0 : _b.length) }))] })));
131
+ return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionsButtons, __assign({}, props, { actions: buttonActions })), (0, jsx_runtime_1.jsx)(TypedActionsDropdown, __assign({}, props, { actions: dropdownActions, position: props.position, isPrimary: !!((_b = props.selectedItems) === null || _b === void 0 ? void 0 : _b.length) }))] })));
204
132
  }
205
133
  exports.TypedActions = TypedActions;
206
134
  var TransparentIcon = function () { return (0, jsx_runtime_1.jsx)(react_icons_1.CircleIcon, { style: { opacity: 0 } }); };
@@ -250,17 +178,17 @@ function useTypedActionsToTableActions(props) {
250
178
  switch (buttonAction.type) {
251
179
  case TypedActionType.button:
252
180
  return {
253
- title: (0, jsx_runtime_1.jsx)(TypedActionButton, { action: buttonAction }),
181
+ title: (0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionButton, { action: buttonAction }),
254
182
  isOutsideDropdown: true,
255
183
  };
256
184
  case TypedActionType.single:
257
185
  return {
258
- title: ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: __assign(__assign({}, buttonAction), { tooltip: buttonAction.label }), selectedItem: props.item, iconOnly: true })),
186
+ title: ((0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionButton, { action: __assign(__assign({}, buttonAction), { tooltip: buttonAction.label }), selectedItem: props.item, iconOnly: true })),
259
187
  isOutsideDropdown: true,
260
188
  };
261
189
  case TypedActionType.bulk:
262
190
  return {
263
- title: ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: buttonAction, selectedItems: props.item ? [props.item] : [] })),
191
+ title: ((0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionButton, { action: buttonAction, selectedItems: props.item ? [props.item] : [] })),
264
192
  isOutsideDropdown: true,
265
193
  };
266
194
  default:
package/cjs/TypedActions/TypedActionsButtons.js ADDED
@@ -0,0 +1,106 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ Object.defineProperty(exports, "__esModule", { value: true });
14
+ exports.TypedActionButton = exports.TypedActionsButtons = void 0;
15
+ var jsx_runtime_1 = require("react/jsx-runtime");
16
+ var react_1 = require("react");
17
+ var react_core_1 = require("@patternfly/react-core");
18
+ var TypedActions_1 = require("./TypedActions");
19
+ function TypedActionsButtons(props) {
20
+ var actions = props.actions, selectedItems = props.selectedItems, wrapper = props.wrapper;
21
+ if (actions.length === 0)
22
+ return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
23
+ return ((0, jsx_runtime_1.jsx)(react_core_1.Split, __assign({ hasGutter: true }, { children: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: action, selectedItems: selectedItems, wrapper: wrapper }, index)); }) })));
24
+ }
25
+ exports.TypedActionsButtons = TypedActionsButtons;
26
+ function TypedActionButton(props) {
27
+ var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper, noPrimary = props.noPrimary;
28
+ switch (action.type) {
29
+ case TypedActions_1.TypedActionType.seperator: {
30
+ return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
31
+ }
32
+ case TypedActions_1.TypedActionType.single: {
33
+ return ((0, jsx_runtime_1.jsx)(ActionSingleButton, { action: action, selectedItem: selectedItem, noPrimary: noPrimary, iconOnly: props.iconOnly, wrapper: wrapper }));
34
+ }
35
+ case TypedActions_1.TypedActionType.bulk: {
36
+ return ((0, jsx_runtime_1.jsx)(ActionBulkButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
37
+ }
38
+ case TypedActions_1.TypedActionType.button: {
39
+ return (0, jsx_runtime_1.jsx)(ActionButton, { action: action, noPrimary: noPrimary, wrapper: wrapper });
40
+ }
41
+ case TypedActions_1.TypedActionType.dropdown: {
42
+ return ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActionsDropdown, { actions: action.options, selectedItems: selectedItems, label: action.label, isPrimary: action.variant === react_core_1.ButtonVariant.primary && !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) }));
43
+ }
44
+ }
45
+ }
46
+ exports.TypedActionButton = TypedActionButton;
47
+ function ActionButton(props) {
48
+ var _a;
49
+ var action = props.action, selectedItems = props.selectedItems, noPrimary = props.noPrimary, wrapper = props.wrapper;
50
+ var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
51
+ var Icon = action.icon;
52
+ var tooltip = action.tooltip;
53
+ var isDisabled = false;
54
+ var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
55
+ if (selectedItems &&
56
+ selectedItems.length &&
57
+ [react_core_1.ButtonVariant.primary, react_core_1.ButtonVariant.danger].includes(variant)) {
58
+ variant = react_core_1.ButtonVariant.secondary;
59
+ }
60
+ if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
61
+ variant = react_core_1.ButtonVariant.secondary;
62
+ }
63
+ if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
64
+ variant = react_core_1.ButtonVariant.danger;
65
+ }
66
+ return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: variant, isDanger: action.isDanger, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick }, { children: action.shortLabel ? action.shortLabel : action.label })) })) }));
67
+ }
68
+ function ActionBulkButton(props) {
69
+ var _a;
70
+ var action = props.action, noPrimary = props.noPrimary, selectedItems = props.selectedItems, wrapper = props.wrapper;
71
+ var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
72
+ var Icon = action.icon;
73
+ var tooltip = action.tooltip;
74
+ var isDisabled = false;
75
+ var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
76
+ if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
77
+ variant = react_core_1.ButtonVariant.secondary;
78
+ }
79
+ if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
80
+ variant = react_core_1.ButtonVariant.danger;
81
+ }
82
+ if (!selectedItems || !selectedItems.length) {
83
+ tooltip = 'No selections';
84
+ isDisabled = true;
85
+ }
86
+ return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: function () { return action.onClick(selectedItems !== null && selectedItems !== void 0 ? selectedItems : []); }, isDanger: action.isDanger }, { children: action.shortLabel ? action.shortLabel : action.label })) })) }));
87
+ }
88
+ function ActionSingleButton(props) {
89
+ var _a;
90
+ var action = props.action, selectedItem = props.selectedItem, noPrimary = props.noPrimary, wrapper = props.wrapper;
91
+ var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
92
+ var Icon = action.icon;
93
+ var tooltip = action.tooltip;
94
+ var isDisabled = false;
95
+ var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
96
+ if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
97
+ variant = react_core_1.ButtonVariant.secondary;
98
+ }
99
+ if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
100
+ variant = react_core_1.ButtonVariant.danger;
101
+ }
102
+ if (props.iconOnly) {
103
+ variant = react_core_1.ButtonVariant.plain;
104
+ }
105
+ return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { marginLeft: -4, paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: function () { return selectedItem && action.onClick(selectedItem); }, isDanger: action.isDanger }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
106
+ }
package/cjs/TypedActions/index.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./TypedActions"), exports);
18
+ __exportStar(require("./TypedActionsButtons"), exports);
package/mjs/PageBody.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { ReactNode } from 'react';
2
2
  export declare function PageBody(props: {
3
- children: ReactNode;
3
+ children?: ReactNode;
4
4
  }): JSX.Element;
package/mjs/PageHeader.js CHANGED
@@ -56,6 +56,9 @@ export function PageHeader(props) {
56
56
  paddingLeft: 0,
57
57
  paddingTop: 0,
58
58
  paddingBottom: 0,
59
+ borderTop: settings.theme !== 'light' && settings.borders
60
+ ? 'thin solid var(--pf-global--BorderColor--100)'
61
+ : undefined,
59
62
  borderBottom: settings.borders
60
63
  ? 'thin solid var(--pf-global--BorderColor--100)'
61
64
  : undefined,
@@ -63,6 +66,9 @@ export function PageHeader(props) {
63
66
  }, children: _jsx(Flex, { direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' }, children: _jsx(PageNavigation, { style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 }, hasOverflowScroll: true, children: navigation }) }) })), (isMdOrLarger || !navigation) && (_jsx(PageSection, { variant: PageSectionVariants.light, style: {
64
67
  paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
65
68
  paddingBottom: xl ? 20 : 12,
69
+ borderTop: !navigation && settings.theme !== 'light' && settings.borders
70
+ ? 'thin solid var(--pf-global--BorderColor--100)'
71
+ : undefined,
66
72
  borderBottom: settings.borders
67
73
  ? 'thin solid var(--pf-global--BorderColor--100)'
68
74
  : undefined,
package/mjs/{TypedActions.d.ts → TypedActions/TypedActions.d.ts} RENAMED
@@ -1,7 +1,7 @@
1
1
  import { ButtonVariant, DropdownPosition } from '@patternfly/react-core';
2
2
  import { IAction } from '@patternfly/react-table';
3
3
  import { ComponentClass, FunctionComponent } from 'react';
4
- import { WindowSize } from './components/useBreakPoint';
4
+ import { WindowSize } from '../components/useBreakPoint';
5
5
  export declare enum TypedActionType {
6
6
  seperator = "seperator",
7
7
  button = "button",
@@ -47,19 +47,11 @@ export declare function TypedActionsDropdown<T extends object>(props: {
47
47
  selectedItems?: T[];
48
48
  position?: DropdownPosition;
49
49
  }): JSX.Element;
50
- export declare function TypedActionsButtons<T extends object>(props: {
51
- actions: ITypedAction<T>[];
52
- selectedItems?: T[];
53
- wrapper?: ComponentClass | FunctionComponent;
54
- noPrimary?: boolean;
55
- }): JSX.Element;
56
- export declare function TypedActionButton<T extends object>(props: {
50
+ export declare function DropdownActionItem<T extends object>(props: {
57
51
  action: ITypedAction<T>;
58
- selectedItems?: T[];
59
- selectedItem?: T;
60
- wrapper?: ComponentClass | FunctionComponent;
61
- noPrimary?: boolean;
62
- iconOnly?: boolean;
52
+ selectedItems: T[];
53
+ hasIcons: boolean;
54
+ index: number;
63
55
  }): JSX.Element;
64
56
  export declare function TypedActions<T extends object>(props: {
65
57
  actions: ITypedAction<T>[];
package/mjs/{TypedActions.js → TypedActions/TypedActions.js} RENAMED
@@ -1,8 +1,9 @@
1
1
  import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, KebabToggle, Split, SplitItem, Tooltip, } from '@patternfly/react-core';
2
+ import { ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, KebabToggle, Split, SplitItem, Tooltip, } from '@patternfly/react-core';
3
3
  import { CircleIcon } from '@patternfly/react-icons';
4
- import { Fragment, useCallback, useMemo, useState } from 'react';
5
- import { useBreakpoint } from './components/useBreakPoint';
4
+ import { useCallback, useMemo, useState } from 'react';
5
+ import { useBreakpoint } from '../components/useBreakPoint';
6
+ import { TypedActionsButtons, TypedActionButton } from './TypedActionsButtons';
6
7
  export var TypedActionType;
7
8
  (function (TypedActionType) {
8
9
  TypedActionType["seperator"] = "seperator";
@@ -23,104 +24,33 @@ export function TypedActionsDropdown(props) {
23
24
  ? {
24
25
  color: 'var(--pf-global--Color--light-100)',
25
26
  }
26
- : {}, children: label }), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map((action, index) => {
27
- switch (action.type) {
28
- case TypedActionType.button:
29
- case TypedActionType.bulk: {
30
- let Icon = action.icon;
31
- if (!Icon && hasIcons)
32
- Icon = TransparentIcon;
33
- let tooltip = action.tooltip;
34
- let isDisabled = false;
35
- if (action.type === TypedActionType.bulk && (!selectedItems || !selectedItems.length)) {
36
- tooltip = 'No selections';
37
- isDisabled = true;
38
- }
39
- return (_jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(DropdownItem, { onClick: () => action.onClick(selectedItems ?? []), isAriaDisabled: isDisabled, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined,
40
- // style={{ color: 'var(--pf-global--primary-color--100)' }}
41
- style: {
42
- color: action.isDanger && !isDisabled
43
- ? 'var(--pf-global--danger-color--100)'
44
- : undefined,
45
- }, children: action.label }) }, action.label));
46
- }
47
- case TypedActionType.dropdown:
48
- return (_jsx(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
49
- case TypedActionType.seperator:
50
- return _jsx(DropdownSeparator, {}, `separator-${index}`);
51
- }
52
- }), position: props.position, style: { zIndex: 201 } }));
27
+ : {}, children: label }), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map((action, index) => (_jsx(DropdownActionItem, { action: action, selectedItems: selectedItems ?? [], hasIcons: hasIcons, index: index }, 'label' in action ? action.label : `action-${index}`))), position: props.position, style: { zIndex: 201 } }));
53
28
  }
54
- export function TypedActionsButtons(props) {
55
- const { actions, selectedItems, wrapper } = props;
56
- if (actions.length === 0)
57
- return _jsx(_Fragment, {});
58
- return (_jsx(Split, { hasGutter: true, children: actions.map((action, index) => (_jsx(TypedActionButton, { action: action, selectedItems: selectedItems, wrapper: wrapper }, index))) }));
59
- }
60
- export function TypedActionButton(props) {
61
- const { action, selectedItems, selectedItem, wrapper, noPrimary } = props;
62
- const Wrapper = wrapper ?? Fragment;
29
+ export function DropdownActionItem(props) {
30
+ const { action, selectedItems, hasIcons, index } = props;
31
+ // TODO case TypedActionType.single?
63
32
  switch (action.type) {
64
- case TypedActionType.seperator: {
65
- return _jsx(_Fragment, {});
66
- }
67
- case TypedActionType.single: {
68
- const Icon = action.icon;
69
- const tooltip = action.tooltip;
70
- const isDisabled = false;
71
- let variant = action.variant ?? ButtonVariant.secondary;
72
- if (variant === ButtonVariant.primary && noPrimary) {
73
- variant = ButtonVariant.secondary;
74
- }
75
- if (variant === ButtonVariant.primary && action.isDanger) {
76
- variant = ButtonVariant.danger;
77
- }
78
- if (props.iconOnly) {
79
- variant = ButtonVariant.plain;
80
- }
81
- return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { marginLeft: -4, paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => selectedItem && action.onClick(selectedItem), isDanger: action.isDanger, children: props.iconOnly && Icon ? (_jsx(Icon, {})) : action.shortLabel ? (action.shortLabel) : (action.label) }) }) }));
82
- }
33
+ case TypedActionType.button:
83
34
  case TypedActionType.bulk: {
84
- const Icon = action.icon;
35
+ let Icon = action.icon;
36
+ if (!Icon && hasIcons)
37
+ Icon = TransparentIcon;
85
38
  let tooltip = action.tooltip;
86
39
  let isDisabled = false;
87
- let variant = action.variant ?? ButtonVariant.secondary;
88
- if (variant === ButtonVariant.primary && noPrimary) {
89
- variant = ButtonVariant.secondary;
90
- }
91
- if (variant === ButtonVariant.primary && action.isDanger) {
92
- variant = ButtonVariant.danger;
93
- }
94
- if (!selectedItems || !selectedItems.length) {
40
+ if (action.type === TypedActionType.bulk && !selectedItems.length) {
95
41
  tooltip = 'No selections';
96
42
  isDisabled = true;
97
43
  }
98
- return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => action.onClick(selectedItems ?? []), isDanger: action.isDanger, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
99
- }
100
- case TypedActionType.button: {
101
- const Icon = action.icon;
102
- const tooltip = action.tooltip;
103
- const isDisabled = false;
104
- let variant = action.variant ?? ButtonVariant.secondary;
105
- if (selectedItems && selectedItems.length) {
106
- switch (variant) {
107
- case ButtonVariant.danger:
108
- case ButtonVariant.primary:
109
- variant = ButtonVariant.secondary;
110
- break;
111
- }
112
- }
113
- if (variant === ButtonVariant.primary && noPrimary) {
114
- variant = ButtonVariant.secondary;
115
- }
116
- if (variant === ButtonVariant.primary && action.isDanger) {
117
- variant = ButtonVariant.danger;
118
- }
119
- return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, isDanger: action.isDanger, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
120
- }
121
- case TypedActionType.dropdown: {
122
- return (_jsx(TypedActionsDropdown, { actions: action.options, label: action.label, isPrimary: action.variant === ButtonVariant.primary && !selectedItems?.length }));
44
+ return (_jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(DropdownItem, { onClick: () => action.onClick(selectedItems), isAriaDisabled: isDisabled, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, style: {
45
+ color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
46
+ }, children: action.label }) }, action.label));
123
47
  }
48
+ case TypedActionType.dropdown:
49
+ return (_jsx(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
50
+ case TypedActionType.seperator:
51
+ return _jsx(DropdownSeparator, {}, `separator-${index}`);
52
+ default:
53
+ return _jsx(_Fragment, {});
124
54
  }
125
55
  }
126
56
  export function TypedActions(props) {
package/mjs/TypedActions/TypedActionsButtons.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { ComponentClass, FunctionComponent } from 'react';
2
+ import { ITypedAction } from './TypedActions';
3
+ export declare function TypedActionsButtons<T extends object>(props: {
4
+ actions: ITypedAction<T>[];
5
+ selectedItems?: T[];
6
+ wrapper?: ComponentClass | FunctionComponent;
7
+ noPrimary?: boolean;
8
+ }): JSX.Element;
9
+ export declare function TypedActionButton<T extends object>(props: {
10
+ action: ITypedAction<T>;
11
+ selectedItems?: T[];
12
+ selectedItem?: T;
13
+ wrapper?: ComponentClass | FunctionComponent;
14
+ noPrimary?: boolean;
15
+ iconOnly?: boolean;
16
+ }): JSX.Element;
package/mjs/TypedActions/TypedActionsButtons.js ADDED
@@ -0,0 +1,87 @@
1
+ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
2
+ import { Fragment } from 'react';
3
+ import { Button, ButtonVariant, Tooltip, Split } from '@patternfly/react-core';
4
+ import { TypedActionType, TypedActionsDropdown, } from './TypedActions';
5
+ export function TypedActionsButtons(props) {
6
+ const { actions, selectedItems, wrapper } = props;
7
+ if (actions.length === 0)
8
+ return _jsx(_Fragment, {});
9
+ return (_jsx(Split, { hasGutter: true, children: actions.map((action, index) => (_jsx(TypedActionButton, { action: action, selectedItems: selectedItems, wrapper: wrapper }, index))) }));
10
+ }
11
+ export function TypedActionButton(props) {
12
+ const { action, selectedItems, selectedItem, wrapper, noPrimary } = props;
13
+ switch (action.type) {
14
+ case TypedActionType.seperator: {
15
+ return _jsx(_Fragment, {});
16
+ }
17
+ case TypedActionType.single: {
18
+ return (_jsx(ActionSingleButton, { action: action, selectedItem: selectedItem, noPrimary: noPrimary, iconOnly: props.iconOnly, wrapper: wrapper }));
19
+ }
20
+ case TypedActionType.bulk: {
21
+ return (_jsx(ActionBulkButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
22
+ }
23
+ case TypedActionType.button: {
24
+ return _jsx(ActionButton, { action: action, noPrimary: noPrimary, wrapper: wrapper });
25
+ }
26
+ case TypedActionType.dropdown: {
27
+ return (_jsx(TypedActionsDropdown, { actions: action.options, selectedItems: selectedItems, label: action.label, isPrimary: action.variant === ButtonVariant.primary && !selectedItems?.length }));
28
+ }
29
+ }
30
+ }
31
+ function ActionButton(props) {
32
+ const { action, selectedItems, noPrimary, wrapper } = props;
33
+ const Wrapper = wrapper ?? Fragment;
34
+ const Icon = action.icon;
35
+ const tooltip = action.tooltip;
36
+ const isDisabled = false;
37
+ let variant = action.variant ?? ButtonVariant.secondary;
38
+ if (selectedItems &&
39
+ selectedItems.length &&
40
+ [ButtonVariant.primary, ButtonVariant.danger].includes(variant)) {
41
+ variant = ButtonVariant.secondary;
42
+ }
43
+ if (variant === ButtonVariant.primary && noPrimary) {
44
+ variant = ButtonVariant.secondary;
45
+ }
46
+ if (variant === ButtonVariant.primary && action.isDanger) {
47
+ variant = ButtonVariant.danger;
48
+ }
49
+ return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, isDanger: action.isDanger, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
50
+ }
51
+ function ActionBulkButton(props) {
52
+ const { action, noPrimary, selectedItems, wrapper } = props;
53
+ const Wrapper = wrapper ?? Fragment;
54
+ const Icon = action.icon;
55
+ let tooltip = action.tooltip;
56
+ let isDisabled = false;
57
+ let variant = action.variant ?? ButtonVariant.secondary;
58
+ if (variant === ButtonVariant.primary && noPrimary) {
59
+ variant = ButtonVariant.secondary;
60
+ }
61
+ if (variant === ButtonVariant.primary && action.isDanger) {
62
+ variant = ButtonVariant.danger;
63
+ }
64
+ if (!selectedItems || !selectedItems.length) {
65
+ tooltip = 'No selections';
66
+ isDisabled = true;
67
+ }
68
+ return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => action.onClick(selectedItems ?? []), isDanger: action.isDanger, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
69
+ }
70
+ function ActionSingleButton(props) {
71
+ const { action, selectedItem, noPrimary, wrapper } = props;
72
+ const Wrapper = wrapper ?? Fragment;
73
+ const Icon = action.icon;
74
+ const tooltip = action.tooltip;
75
+ const isDisabled = false;
76
+ let variant = action.variant ?? ButtonVariant.secondary;
77
+ if (variant === ButtonVariant.primary && noPrimary) {
78
+ variant = ButtonVariant.secondary;
79
+ }
80
+ if (variant === ButtonVariant.primary && action.isDanger) {
81
+ variant = ButtonVariant.danger;
82
+ }
83
+ if (props.iconOnly) {
84
+ variant = ButtonVariant.plain;
85
+ }
86
+ return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { marginLeft: -4, paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => selectedItem && action.onClick(selectedItem), isDanger: action.isDanger, children: props.iconOnly && Icon ? _jsx(Icon, {}) : action.shortLabel ? action.shortLabel : action.label }) }) }));
87
+ }
package/mjs/TypedActions/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './TypedActions';
2
+ export * from './TypedActionsButtons';
package/mjs/TypedActions/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from './TypedActions';
2
+ export * from './TypedActionsButtons';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "Framework for building consistent responsive web applications using PatternFly.",
4
- "version": "0.0.218",
4
+ "version": "0.0.220",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {