@ansible/ansible-ui-framework 0.0.218 → 0.0.220

Sign up to get free protection for your applications and to get access to all the features.
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": {