@ansible/ansible-ui-framework 0.0.469 → 0.0.470

package/cjs/PageActions/PageActions.d.ts

@@ -23,5 +23,6 @@ export declare function PageActions<T extends object>(props: {
     position?: DropdownPosition;
     /** Indicates if only to show the icon when not collapsed */
     iconOnly?: boolean;
+    onOpen?: (open: boolean) => void;
 }): JSX.Element;
 export declare function isHiddenAction<T extends object>(action: IPageAction<T>, selectedItem: T | undefined): boolean;

package/cjs/PageActions/PageActions.js

@@ -43,7 +43,7 @@ function PageActions(props) {
             return visibleActions;
         return (_a = visibleActions === null || visibleActions === void 0 ? void 0 : visibleActions.filter(function (action) { return !isPinnedAction(action); })) !== null && _a !== void 0 ? _a : [];
     }, [collapseButtons, visibleActions]);
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: (!iconOnly && selectedItem !== undefined) || (selectedItems && selectedItems.length > 0) }, { children: [pinnedActions !== undefined && pinnedActions.length > 0 && ((0, jsx_runtime_1.jsx)(PagePinnedActions_1.PagePinnedActions, __assign({}, props, { actions: pinnedActions }))), dropdownActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true, style: { display: 'flex', justifyContent: 'flex-end' } }, { children: (0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, __assign({}, props, { actions: dropdownActions })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: (!iconOnly && selectedItem !== undefined) || (selectedItems && selectedItems.length > 0) }, { children: [pinnedActions !== undefined && pinnedActions.length > 0 && ((0, jsx_runtime_1.jsx)(PagePinnedActions_1.PagePinnedActions, __assign({}, props, { actions: pinnedActions }))), dropdownActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true, style: { display: 'flex', justifyContent: 'flex-end' } }, { children: (0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, __assign({}, props, { actions: dropdownActions, onOpen: props.onOpen })) })))] })));
 }
 exports.PageActions = PageActions;
 function isPinnedAction(action) {

package/cjs/PageActions/PageDropdownAction.d.ts

@@ -11,5 +11,6 @@ export declare function PageDropdownAction<T extends object>(props: {
     selectedItem?: T;
     position?: DropdownPosition;
     iconOnly?: boolean;
+    onOpen?: (open: boolean) => void;
 }): JSX.Element;
 export declare function filterActionSeperators<T extends object>(actions: IPageAction<T>[]): IPageAction<T>[];

package/cjs/PageActions/PageDropdownAction.js

@@ -53,6 +53,10 @@ function PageDropdownAction(props) {
     var hasIcons = (0, react_1.useMemo)(function () {
         return actions.find(function (action) { return action.type !== PageActionType_1.PageActionType.seperator && action.icon !== undefined; }) !== undefined;
     }, [actions]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props, dropdownOpen);
+    }, [dropdownOpen, props]);
     if (actions.length === 0)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     var Icon = icon;

package/cjs/PageTable/PageTable.d.ts

@@ -45,6 +45,7 @@ export type PageTableProps<T extends object> = {
     defaultTableView?: PageTableViewType;
     disableBodyPadding?: boolean;
     defaultSubtitle?: ReactNode;
+    expandedRow?: (item: T) => ReactNode;
 };
 /**
  * The PageTable component is used for adding a table to a page.

package/cjs/PageTable/PageTable.js

@@ -110,7 +110,7 @@ function PageTable(props) {
 }
 exports.PageTable = PageTable;
 function PageTableView(props) {
-    var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll;
+    var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll, expandedRow = props.expandedRow;
     var t = props.t;
     t = t ? t : function (t) { return t; };
     var showSelect = props.showSelect ||
@@ -141,10 +141,10 @@ function PageTableView(props) {
                             ? new Array(perPage).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Td, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }) }, index)); })
                             : pageItems === undefined
                                 ? new Array(Math.min(perPage, itemCount)).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [showSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, {}), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: tableColumns.length }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }))] }, index)); })
-                                : pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] })))] })));
+                                : pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] })))] })));
 }
 function TableHead(props) {
-    var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect;
+    var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
     var settings = (0, Settings_1.useSettings)();
     var getColumnSort = (0, react_1.useCallback)(function (columnIndex, column) {
         if (!column.sort)
@@ -164,78 +164,82 @@ function TableHead(props) {
             columnIndex: columnIndex,
         };
     }, [setSort, setSortDirection, sort, sortDirection]);
-    return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [(showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, style: {
-                        width: '0%',
-                        backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-                    }, stickyMinWidth: "45px", hasRightBorder: props.scrollLeft }, { children: "\u00A0" }))), columns
+    return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ style: {
+                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+            } }, { children: [expandedRow && (0, jsx_runtime_1.jsx)(react_table_1.Th, { style: { padding: 0, backgroundColor: 'inherit' } }), (showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft, style: { backgroundColor: 'inherit' } }, { children: "\u00A0" }))), columns
                     .filter(function (column) { return column.enabled !== false; })
                     .map(function (column, index) {
-                    var _a;
-                    return ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ modifier: "fitContent", style: {
-                            minWidth: (_a = column.minWidth) !== null && _a !== void 0 ? _a : 0,
-                            maxWidth: column.maxWidth,
-                            backgroundColor: settings.theme === 'dark'
-                                ? 'var(--pf-global--BackgroundColor--300)'
-                                : undefined,
-                            width: column.isIdColumn ? '0%' : undefined,
-                        }, sort: getColumnSort(index, column) }, { children: column.header }), column.header));
-                }), itemActions !== undefined && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ style: {
-                        paddingRight: 8,
-                        paddingLeft: 0,
-                        width: '0%',
+                    return ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ sort: getColumnSort(index, column), style: {
+                            minWidth: column.minWidth === 0
+                                ? '1%'
+                                : column.minWidth !== undefined
+                                    ? column.minWidth
+                                    : undefined,
+                            maxWidth: column.maxWidth !== undefined ? column.maxWidth : undefined,
+                            backgroundColor: 'inherit',
+                        } }, { children: column.header }), column.header));
+                }), itemActions !== undefined && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
                         right: 0,
-                        backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-                    }, isStickyColumn: true, stickyMinWidth: "45px", className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] }) }));
+                        padding: 0,
+                        paddingRight: 0,
+                        backgroundColor: 'inherit',
+                        zIndex: 302,
+                    }, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] })) }));
 }
 function TableRow(props) {
-    var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, unselectAll = props.unselectAll, isItemSelected = props.isItemSelected, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect;
-    var md = (0, useBreakPoint_1.useBreakpoint)('xl');
-    return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, 
-        // style={{ backgroundColor: theme === ThemeE.Dark ? 'transparent' : undefined }}
-        isRowSelected: isItemSelected, style: { boxShadow: 'unset' } }, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { select: isItemSelected !== undefined
-                    ? {
-                        onSelect: function (_event, isSelecting) {
-                            if (isSelecting) {
-                                selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+    var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, unselectAll = props.unselectAll, isItemSelected = props.isItemSelected, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
+    var _a = __read((0, react_1.useState)(false), 2), expanded = _a[0], setExpanded = _a[1];
+    var settings = (0, Settings_1.useSettings)();
+    var expandedContent = expandedRow === null || expandedRow === void 0 ? void 0 : expandedRow(item);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, isRowSelected: expanded, style: {
+                    boxShadow: 'unset',
+                    borderBottom: expanded ? 'unset' : undefined,
+                } }, { children: [expandedRow && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { expand: expandedContent
+                            ? {
+                                rowIndex: rowIndex,
+                                isExpanded: expanded,
+                                onToggle: function () { return setExpanded(function (expanded) { return !expanded; }); },
                             }
-                            else {
-                                unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
+                            : undefined, style: { paddingLeft: expandedContent ? 8 : 4 } })), showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { select: isItemSelected !== undefined
+                            ? {
+                                onSelect: function (_event, isSelecting) {
+                                    if (isSelecting) {
+                                        selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+                                    }
+                                    else {
+                                        unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
+                                    }
+                                },
+                                isSelected: isItemSelected,
                             }
-                        },
-                        isSelected: isItemSelected,
-                    }
-                    : undefined, style: { width: '0%', paddingLeft: md ? undefined : 20, paddingRight: 16 }, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
-                    rowIndex: rowIndex,
-                    onSelect: function () {
-                        unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
-                        selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
-                        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
-                    },
-                    isSelected: isItemSelected !== null && isItemSelected !== void 0 ? isItemSelected : false,
-                    // disable: !isRepoSelectable(repo),
-                    variant: 'radio',
-                }, style: {
-                    width: '0%',
-                    paddingLeft: md ? undefined : 20,
-                    position: 'sticky',
-                    left: 0,
-                    background: 'var(--pf-c-table__sticky-column--BackgroundColor)',
-                    zIndex: 1,
-                } })), (0, jsx_runtime_1.jsx)(TableCells, { rowIndex: rowIndex, columns: columns, item: item, rowActions: rowActions, scrollLeft: props.scrollLeft, scrollRight: props.scrollRight })] })));
+                            : undefined, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
+                            rowIndex: rowIndex,
+                            onSelect: function () {
+                                unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
+                                selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+                                onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
+                            },
+                            isSelected: isItemSelected !== null && isItemSelected !== void 0 ? isItemSelected : false,
+                            variant: 'radio',
+                        }, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), (0, jsx_runtime_1.jsx)(TableCells, { columns: columns, item: item, rowActions: rowActions, scrollLeft: props.scrollLeft, scrollRight: props.scrollRight })] })), expandedRow && expanded && expandedContent && ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, isExpanded: expanded, style: { boxShadow: 'unset' } }, { children: [(0, jsx_runtime_1.jsx)(react_table_1.Td, {}), showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, { isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft }), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: columns.filter(function (column) { return column.enabled !== false; }).length, style: { paddingBottom: settings.tableLayout === 'compact' ? 12 : 24, paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_table_1.CollapseColumn, { children: expandedContent }) })), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
+                            right: 0,
+                            padding: 0,
+                            paddingRight: 0,
+                        }, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] })))] }));
 }
 function TableCells(props) {
-    var columns = props.columns, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex;
+    var columns = props.columns, item = props.item, rowActions = props.rowActions;
+    var _a = __read((0, react_1.useState)(false), 2), actionsExpanded = _a[0], setActionsExpanded = _a[1];
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [columns
                 .filter(function (column) { return column.enabled !== false; })
                 .map(function (column) {
-                return ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ dataLabel: column.header, modifier: "nowrap" }, { children: (0, jsx_runtime_1.jsx)(TableColumnCell, { item: item, column: column }) }), column.header));
-            }), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ style: {
-                    zIndex: 100 - rowIndex,
-                    paddingRight: 8,
-                    paddingLeft: 8,
-                    width: '0%',
+                return ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ dataLabel: column.header, modifier: "nowrap", style: { width: column.minWidth === 0 ? '0%' : undefined } }, { children: (0, jsx_runtime_1.jsx)(TableColumnCell, { item: item, column: column }) }), column.header));
+            }), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
                     right: 0,
-                }, isStickyColumn: true, stickyMinWidth: "0px", className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true }) })))] }));
+                    padding: 0,
+                    paddingRight: 0,
+                    zIndex: actionsExpanded ? 301 : undefined,
+                }, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true, onOpen: setActionsExpanded }) })))] }));
 }
 var TableColumnSomething;
 (function (TableColumnSomething) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.469",
+  "version": "0.0.470",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",