@ansible/ansible-ui-framework 0.0.284 → 0.0.285

Sign up to get free protection for your applications and to get access to all the features.
package/cjs/PageHeader.js CHANGED
@@ -78,7 +78,7 @@ function PageHeader(props) {
78
78
  ? 'thin solid var(--pf-global--BorderColor--100)'
79
79
  : undefined,
80
80
  backgroundColor: 'var(--pf-global--BackgroundColor--100)',
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: {
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 } }, { children: navigation })) })) }))), (isMdOrLarger || !navigation) && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
82
82
  paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
83
83
  paddingBottom: xl ? 20 : 12,
84
84
  borderTop: !navigation && settings.theme !== 'light' && settings.borders
@@ -47,7 +47,7 @@ function PageTableCard(props) {
47
47
  marginRight: 12,
48
48
  alignItems: 'center',
49
49
  justifyItems: 'stretch',
50
- } }, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "lg" }, { children: card.icon })) }))), (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: card.title }), card.description ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.description }))) : (defaultCardSubtitle && (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small" }, { children: defaultCardSubtitle })))] })] })) })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick,
50
+ } }, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "lg" }, { children: card.icon })) }))), (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: card.title }), card.description ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.description }))) : (defaultCardSubtitle && (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small" }, { children: defaultCardSubtitle })))] })] })) })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true, collapse: "always" })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick,
51
51
  // aria-label="card checkbox example"
52
52
  id: "check-1" }))] }))] }), card.cardBody, card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
53
53
  display: 'flex',
@@ -64,7 +64,7 @@ function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unsel
64
64
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
65
65
  return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [!column.hideLabel && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7, whiteSpace: 'nowrap' } }, { children: column.header })) })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
66
66
  }) })) }) }, "secondary")) : null,
67
- ] }), rowActions && ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: rowActions, position: react_core_1.DropdownPosition.right, selectedItem: item }) })))] }) }), key));
67
+ ] }), rowActions && ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: rowActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true }) })))] }) }), key));
68
68
  }, [
69
69
  data.columns,
70
70
  data.descriptionColumn,
@@ -158,7 +158,7 @@ function PageTableToolbar(props) {
158
158
  return newState;
159
159
  });
160
160
  }, showToolbarItem: false }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), filter.label));
161
- })] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) }) })), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1 } }), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [openColumnModal && viewType === 'table' && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroup, { children: [PageTableViewType_1.PageTableViewTypeE.Table, PageTableViewType_1.PageTableViewTypeE.List, PageTableViewType_1.PageTableViewTypeE.Cards]
161
+ })] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) }) })), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1 } }), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [openColumnModal && viewType === 'table' && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroup, __assign({ "aria-label": "table view toggle" }, { children: [PageTableViewType_1.PageTableViewTypeE.Table, PageTableViewType_1.PageTableViewTypeE.List, PageTableViewType_1.PageTableViewTypeE.Cards]
162
162
  // .filter((vt) => {
163
163
  // switch (vt) {
164
164
  // case PageTableViewTypeE.Cards:
@@ -174,13 +174,13 @@ function PageTableToolbar(props) {
174
174
  .map(function (vt) {
175
175
  switch (vt) {
176
176
  case PageTableViewType_1.PageTableViewTypeE.Cards:
177
- return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Card view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.ThLargeIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.Cards, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.Cards); } }) }), vt));
177
+ return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Card view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.ThLargeIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.Cards, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.Cards); }, "aria-label": "card view" }) }), vt));
178
178
  case PageTableViewType_1.PageTableViewTypeE.List:
179
- return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'List view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.ListIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.List, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.List); } }) })));
179
+ return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'List view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.ListIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.List, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.List); }, "aria-label": "list view" }) }), vt));
180
180
  case PageTableViewType_1.PageTableViewTypeE.Table:
181
- return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Table view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.TableIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.Table, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.Table); } }) })));
181
+ return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Table view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.TableIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.Table, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.Table); }, "aria-label": "table view" }) }), vt));
182
182
  }
183
- }) }) })] })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ visibility: { default: 'hidden', '2xl': 'visible' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.top, isCompact: true, itemCount: itemCount, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: { marginTop: -8, marginBottom: -8 } }) }))] }) })));
183
+ }) })) })] })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ visibility: { default: 'hidden', '2xl': 'visible' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.top, isCompact: true, itemCount: itemCount, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: { marginTop: -8, marginBottom: -8 } }) }))] }) })));
184
184
  }
185
185
  exports.PageTableToolbar = PageTableToolbar;
186
186
  function ToolbarFilterInput(props) {
@@ -60,9 +60,10 @@ export declare function TypedActions<T extends object>(props: {
60
60
  selectedItems?: T[];
61
61
  selectedItem?: T;
62
62
  wrapper?: ComponentClass | FunctionComponent;
63
- collapse?: WindowSize;
63
+ collapse?: WindowSize | 'always';
64
64
  noPrimary?: boolean;
65
65
  position?: DropdownPosition;
66
+ iconOnly?: boolean;
66
67
  }): JSX.Element;
67
68
  export declare function useTypedActionsToTableActions<T extends object>(props: {
68
69
  actions: ITypedAction<T>[];
@@ -108,7 +108,8 @@ exports.DropdownActionItem = DropdownActionItem;
108
108
  function TypedActions(props) {
109
109
  var _a, _b;
110
110
  var actions = props.actions;
111
- var collapseButtons = !(0, useBreakPoint_1.useBreakpoint)((_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg');
111
+ var bp = (0, useBreakPoint_1.useBreakpoint)(props.collapse !== 'always' ? (_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg' : 'lg');
112
+ var collapseButtons = props.collapse === 'always' || !bp;
112
113
  var isButtonAction = (0, react_1.useCallback)(function (action) {
113
114
  var actionVariants = [
114
115
  react_core_1.ButtonVariant.primary,
@@ -137,7 +138,7 @@ function TypedActions(props) {
137
138
  dropdownActions.pop();
138
139
  return dropdownActions;
139
140
  }, [collapseButtons, actions, isButtonAction]);
140
- 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) }))] })));
141
+ return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: !props.iconOnly }, { 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) }))] })));
141
142
  }
142
143
  exports.TypedActions = TypedActions;
143
144
  var TransparentIcon = function () { return (0, jsx_runtime_1.jsx)(react_icons_1.CircleIcon, { style: { opacity: 0 } }); };
@@ -3,8 +3,10 @@ import { ITypedAction } from './TypedActions';
3
3
  export declare function TypedActionsButtons<T extends object>(props: {
4
4
  actions: ITypedAction<T>[];
5
5
  selectedItems?: T[];
6
+ selectedItem?: T;
6
7
  wrapper?: ComponentClass | FunctionComponent;
7
8
  noPrimary?: boolean;
9
+ iconOnly?: boolean;
8
10
  }): JSX.Element;
9
11
  export declare function TypedActionButton<T extends object>(props: {
10
12
  action: ITypedAction<T>;
@@ -13,14 +13,14 @@ var __assign = (this && this.__assign) || function () {
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
14
  exports.TypedActionButton = exports.TypedActionsButtons = void 0;
15
15
  var jsx_runtime_1 = require("react/jsx-runtime");
16
- var react_1 = require("react");
17
16
  var react_core_1 = require("@patternfly/react-core");
17
+ var react_1 = require("react");
18
18
  var TypedActions_1 = require("./TypedActions");
19
19
  function TypedActionsButtons(props) {
20
- var actions = props.actions, selectedItems = props.selectedItems, wrapper = props.wrapper;
20
+ var actions = props.actions, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper, iconOnly = props.iconOnly;
21
21
  if (actions.length === 0)
22
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)); }) })));
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, selectedItem: selectedItem, wrapper: wrapper, iconOnly: iconOnly }, index)); }) })));
24
24
  }
25
25
  exports.TypedActionsButtons = TypedActionsButtons;
26
26
  function TypedActionButton(props) {
@@ -86,13 +86,13 @@ function ActionBulkButton(props) {
86
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
87
  }
88
88
  function ActionSingleButton(props) {
89
- var _a;
89
+ var _a, _b;
90
90
  var action = props.action, selectedItem = props.selectedItem, noPrimary = props.noPrimary, wrapper = props.wrapper;
91
91
  var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
92
92
  var Icon = action.icon;
93
- var tooltip = action.tooltip;
93
+ var tooltip = ((_a = action.tooltip) !== null && _a !== void 0 ? _a : props.iconOnly) ? props.action.label : undefined;
94
94
  var isDisabled = false;
95
- var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
95
+ var variant = (_b = action.variant) !== null && _b !== void 0 ? _b : react_core_1.ButtonVariant.secondary;
96
96
  if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
97
97
  variant = react_core_1.ButtonVariant.secondary;
98
98
  }
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.284",
4
+ "version": "0.0.285",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {