@ansible/ansible-ui-framework 0.0.233 → 0.0.234
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageTableCard.js +1 -1
- package/cjs/PageTableList.js +6 -6
- package/cjs/components/Details.js +2 -1
- package/mjs/PageTable.d.ts +1 -0
- package/mjs/PageTableCard.js +1 -1
- package/mjs/PageTableList.js +4 -4
- package/mjs/components/Details.d.ts +1 -1
- package/mjs/components/Details.js +1 -1
- package/package.json +1 -1
package/cjs/PageTableCard.js
CHANGED
|
@@ -78,7 +78,7 @@ function useColumnsToTableCardFn(columns, keyFn) {
|
|
|
78
78
|
id: keyFn(item),
|
|
79
79
|
title: (_a = cardData.nameColumn) === null || _a === void 0 ? void 0 : _a.cell(item),
|
|
80
80
|
description: (_b = cardData.descriptionColumn) === null || _b === void 0 ? void 0 : _b.cell(item),
|
|
81
|
-
cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, { children: cardData.columns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.header }, { children: column.cell(item) }), column.id)); }) }) })),
|
|
81
|
+
cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: cardData.columns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.hideLabel ? undefined : column.header }, { children: column.cell(item) }), column.id)); }) })) })),
|
|
82
82
|
};
|
|
83
83
|
return pageTableCard;
|
|
84
84
|
};
|
package/cjs/PageTableList.js
CHANGED
|
@@ -50,18 +50,18 @@ function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unsel
|
|
|
50
50
|
var key = keyFn(item);
|
|
51
51
|
var isItemSelected = isSelected === null || isSelected === void 0 ? void 0 : isSelected(item);
|
|
52
52
|
return ((0, jsx_runtime_1.jsx)(react_core_1.DataListItem, __assign({ "aria-labelledby": "data-list-".concat(key), isExpanded: isItemSelected }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DataListItemRow, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.DataListCheck, { "aria-labelledby": "data-list-check-".concat(key), name: "data-list-check-".concat(key), isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onClick: function () { return onSelectClick(item); } })), (0, jsx_runtime_1.jsx)(react_core_1.DataListItemCells, { dataListCells: [
|
|
53
|
-
(0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2" }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "data-list-".concat(key) }, { children: (_a = data.nameColumn) === null || _a === void 0 ? void 0 : _a.cell(item) })) })), data.descriptionColumn ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: data.descriptionColumn.cell(item) }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, { children: data.columns.map(function (column) {
|
|
53
|
+
(0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", style: { marginTop: -4 } }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "data-list-".concat(key) }, { children: (_a = data.nameColumn) === null || _a === void 0 ? void 0 : _a.cell(item) })) })), data.descriptionColumn ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: data.descriptionColumn.cell(item) }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: data.columns.map(function (column) {
|
|
54
54
|
var value = column.cell(item);
|
|
55
55
|
if (!value)
|
|
56
56
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
57
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(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 } }, { children: column.header })) }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
|
58
|
-
}) })] })) }) }, "primary"),
|
|
59
|
-
(0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, { children: data.secondary.map(function (column) {
|
|
57
|
+
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 } }, { children: column.header })) })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
|
58
|
+
}) }))] })) }) }, "primary"),
|
|
59
|
+
(0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: data.secondary.map(function (column) {
|
|
60
60
|
var value = column.cell(item);
|
|
61
61
|
if (!value)
|
|
62
62
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
63
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(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 } }, { children: column.header })) }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
|
64
|
-
}) }) }) }, "secondary"),
|
|
63
|
+
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 } }, { children: column.header })) })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
|
64
|
+
}) })) }) }, "secondary"),
|
|
65
65
|
] }), 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));
|
|
66
66
|
}, [
|
|
67
67
|
data.columns,
|
|
@@ -77,9 +77,10 @@ function DetailsList(props) {
|
|
|
77
77
|
}
|
|
78
78
|
exports.DetailsList = DetailsList;
|
|
79
79
|
function Detail(props) {
|
|
80
|
+
var _a;
|
|
80
81
|
if (!props.children)
|
|
81
82
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
82
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(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 } }, { children: props.label })) }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: props.label.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
|
|
83
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [props.label && ((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 } }, { children: props.label })) })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: (_a = props.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
|
|
83
84
|
}
|
|
84
85
|
exports.Detail = Detail;
|
|
85
86
|
function DetailsSkeleton() {
|
package/mjs/PageTable.d.ts
CHANGED
package/mjs/PageTableCard.js
CHANGED
|
@@ -61,7 +61,7 @@ export function useColumnsToTableCardFn(columns, keyFn) {
|
|
|
61
61
|
id: keyFn(item),
|
|
62
62
|
title: cardData.nameColumn?.cell(item),
|
|
63
63
|
description: cardData.descriptionColumn?.cell(item),
|
|
64
|
-
cardBody: (_jsx(CardBody, { children: _jsx(DescriptionList, { children: cardData.columns.map((column) => (_jsx(Detail, { label: column.header, children: column.cell(item) }, column.id))) }) })),
|
|
64
|
+
cardBody: (_jsx(CardBody, { children: _jsx(DescriptionList, { isCompact: true, children: cardData.columns.map((column) => (_jsx(Detail, { label: column.hideLabel ? undefined : column.header, children: column.cell(item) }, column.id))) }) })),
|
|
65
65
|
};
|
|
66
66
|
return pageTableCard;
|
|
67
67
|
};
|
package/mjs/PageTableList.js
CHANGED
|
@@ -34,17 +34,17 @@ export function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem
|
|
|
34
34
|
const key = keyFn(item);
|
|
35
35
|
const isItemSelected = isSelected?.(item);
|
|
36
36
|
return (_jsx(DataListItem, { "aria-labelledby": `data-list-${key}`, isExpanded: isItemSelected, children: _jsxs(DataListItemRow, { children: [showSelect && (_jsx(DataListCheck, { "aria-labelledby": `data-list-check-${key}`, name: `data-list-check-${key}`, isChecked: isSelected?.(item), onClick: () => onSelectClick(item) })), _jsx(DataListItemCells, { dataListCells: [
|
|
37
|
-
_jsx(DataListCell, { children: _jsx(Flex, { children: _jsxs(Stack, { hasGutter: true, children: [_jsxs(Stack, { children: [_jsx(Title, { headingLevel: "h2", children: _jsx("span", { id: `data-list-${key}`, children: data.nameColumn?.cell(item) }) }), data.descriptionColumn ? (_jsx(Text, { component: "small", style: { opacity: 0.7 }, children: data.descriptionColumn.cell(item) })) : (defaultCardSubtitle && (_jsx(Text, { component: "small", style: { opacity: 0.7 }, children: defaultCardSubtitle })))] }), _jsx(DescriptionList, { children: data.columns.map((column) => {
|
|
37
|
+
_jsx(DataListCell, { children: _jsx(Flex, { children: _jsxs(Stack, { hasGutter: true, children: [_jsxs(Stack, { children: [_jsx(Title, { headingLevel: "h2", style: { marginTop: -4 }, children: _jsx("span", { id: `data-list-${key}`, children: data.nameColumn?.cell(item) }) }), data.descriptionColumn ? (_jsx(Text, { component: "small", style: { opacity: 0.7 }, children: data.descriptionColumn.cell(item) })) : (defaultCardSubtitle && (_jsx(Text, { component: "small", style: { opacity: 0.7 }, children: defaultCardSubtitle })))] }), _jsx(DescriptionList, { isCompact: true, children: data.columns.map((column) => {
|
|
38
38
|
const value = column.cell(item);
|
|
39
39
|
if (!value)
|
|
40
40
|
return _jsx(_Fragment, {});
|
|
41
|
-
return (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: column.header }) }), _jsx(DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
|
41
|
+
return (_jsxs(DescriptionListGroup, { children: [!column.hideLabel && (_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: column.header }) })), _jsx(DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
|
42
42
|
}) })] }) }) }, "primary"),
|
|
43
|
-
_jsx(DataListCell, { children: _jsx(Flex, { children: _jsx(DescriptionList, { children: data.secondary.map((column) => {
|
|
43
|
+
_jsx(DataListCell, { children: _jsx(Flex, { children: _jsx(DescriptionList, { isCompact: true, children: data.secondary.map((column) => {
|
|
44
44
|
const value = column.cell(item);
|
|
45
45
|
if (!value)
|
|
46
46
|
return _jsx(_Fragment, {});
|
|
47
|
-
return (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: column.header }) }), _jsx(DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
|
47
|
+
return (_jsxs(DescriptionListGroup, { children: [!column.hideLabel && (_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: column.header }) })), _jsx(DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
|
48
48
|
}) }) }) }, "secondary"),
|
|
49
49
|
] }), rowActions && (_jsx(DataListAction, { "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' }, children: _jsx(TypedActions, { actions: rowActions, position: DropdownPosition.right, selectedItem: item }) }))] }) }, key));
|
|
50
50
|
}, [
|
|
@@ -32,7 +32,7 @@ export declare function DetailsList(props: {
|
|
|
32
32
|
children?: ReactNode;
|
|
33
33
|
}): JSX.Element;
|
|
34
34
|
export declare function Detail(props: {
|
|
35
|
-
label
|
|
35
|
+
label?: string;
|
|
36
36
|
children?: ReactNode;
|
|
37
37
|
}): JSX.Element;
|
|
38
38
|
export declare function DetailsSkeleton(): JSX.Element;
|
|
@@ -61,7 +61,7 @@ export function DetailsList(props) {
|
|
|
61
61
|
export function Detail(props) {
|
|
62
62
|
if (!props.children)
|
|
63
63
|
return _jsx(_Fragment, {});
|
|
64
|
-
return (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: props.label }) }), _jsx(DescriptionListDescription, { id: props.label
|
|
64
|
+
return (_jsxs(DescriptionListGroup, { children: [props.label && (_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, children: props.label }) })), _jsx(DescriptionListDescription, { id: props.label?.toLowerCase().split(' ').join('-'), children: props.children })] }));
|
|
65
65
|
}
|
|
66
66
|
export function DetailsSkeleton() {
|
|
67
67
|
return (_jsxs(Stack, { hasGutter: true, children: [_jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {})] }));
|
package/package.json
CHANGED