@ansible/ansible-ui-framework 0.0.276 → 0.0.278

package/cjs/BulkActionDialog.d.ts

@@ -17,7 +17,12 @@ export declare function BulkActionDialog<T extends object>(props: {
     pendingText?: string;
     isDanger?: boolean;
     items: T[];
+    /** These are the columns shown when confirming the bulk actions. */
     columns: ITableColumn<T>[];
+    /**
+     * These are the columns shown when processing the bulk actions plus an error column.
+     * @note This is usually the name column, unless the name column is not unique enough to identify the item.
+     */
     errorColumns: ITableColumn<T>[];
     keyFn: (item: T) => string | number;
     action: (item: T) => Promise<void>;

package/cjs/PageFramework.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
-export declare function PageFrameworkProvider(props: {
+export declare function PageFramework(props: {
     children: ReactNode;
+    navigate?: (to: string) => void;
 }): JSX.Element;

package/cjs/PageFramework.js

@@ -1,12 +1,24 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageFrameworkProvider = void 0;
+exports.PageFramework = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var usePageNavigate_1 = require("./components/usePageNavigate");
 var PageAlertToaster_1 = require("./PageAlertToaster");
 var PageDialog_1 = require("./PageDialog");
 var Settings_1 = require("./Settings");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
-function PageFrameworkProvider(props) {
-    return ((0, jsx_runtime_1.jsx)(useFrameworkTranslations_1.FrameworkTranslationsProvider, { children: (0, jsx_runtime_1.jsx)(Settings_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(PageDialog_1.PageDialogProvider, { children: (0, jsx_runtime_1.jsx)(PageAlertToaster_1.PageAlertToasterProvider, { children: props.children }) }) }) }));
+function PageFramework(props) {
+    return ((0, jsx_runtime_1.jsx)(useFrameworkTranslations_1.FrameworkTranslationsProvider, { children: (0, jsx_runtime_1.jsx)(Settings_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(PageDialog_1.PageDialogProvider, { children: (0, jsx_runtime_1.jsx)(PageAlertToaster_1.PageAlertToasterProvider, { children: (0, jsx_runtime_1.jsx)(usePageNavigate_1.PageNavigateCallbackContextProvider, __assign({ callback: props.navigate }, { children: props.children })) }) }) }) }));
 }
-exports.PageFrameworkProvider = PageFrameworkProvider;
+exports.PageFramework = PageFramework;

package/cjs/PageTable.d.ts

@@ -73,5 +73,6 @@ export interface ITableColumn<T extends object> {
     card?: 'description' | 'hidden';
     list?: 'primary' | 'secondary';
     hideLabel?: boolean;
+    primary?: boolean;
 }
 export {};

package/cjs/PageTable.js

@@ -148,12 +148,14 @@ function TableHead(props) {
                     }, stickyMinWidth: "45px", hasRightBorder: props.scrollLeft }, { 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: column.minWidth,
+                            minWidth: (_a = column.minWidth) !== null && _a !== void 0 ? _a : 0,
                             maxWidth: column.maxWidth,
                             backgroundColor: settings.theme === 'dark'
                                 ? 'var(--pf-global--BackgroundColor--300)'
                                 : undefined,
+                            width: index === 0 ? '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,

package/cjs/PageTableCard.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { LabelColor } from './components/patternfly-colors';
+import { LabelColor } from './components/pfcolors';
 import { ITableColumn } from './PageTable';
 import { ITypedAction } from './TypedActions';
 export interface IPageTableCard {

package/cjs/PageTableCard.js

@@ -59,8 +59,10 @@ function PageTableCard(props) {
 exports.PageTableCard = PageTableCard;
 function useColumnsToTableCardFn(columns, keyFn) {
     var cardData = (0, react_1.useMemo)(function () {
+        var _a;
         var cols = columns.filter(function (column) { return column.card !== 'hidden'; });
-        var nameColumn = cols.shift();
+        var nameColumn = (_a = cols.find(function (column) { return column.primary; })) !== null && _a !== void 0 ? _a : cols[0];
+        cols = cols.filter(function (column) { return column !== nameColumn; });
         var descriptionColumn = cols.find(function (column) { return column.card === 'description'; });
         if (descriptionColumn) {
             cols = cols.filter(function (column) { return column !== descriptionColumn; });

package/cjs/PageTableList.js

@@ -24,8 +24,10 @@ function PageTableList(props) {
 exports.PageTableList = PageTableList;
 function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect) {
     var data = (0, react_1.useMemo)(function () {
+        var _a;
         var cols = tableColumns.filter(function (column) { return column.card !== 'hidden'; });
-        var nameColumn = cols.shift();
+        var nameColumn = (_a = cols.find(function (column) { return column.primary; })) !== null && _a !== void 0 ? _a : cols[0];
+        cols = cols.filter(function (column) { return column !== nameColumn; });
         var descriptionColumn = cols.find(function (column) { return column.card === 'description'; });
         if (descriptionColumn) {
             cols = cols.filter(function (column) { return column !== descriptionColumn; });
@@ -50,17 +52,17 @@ function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unsel
         var key = keyFn(item);
         var isItemSelected = isSelected === null || isSelected === void 0 ? void 0 : isSelected(item);
         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: [
-                            (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) {
+                            (0, jsx_runtime_1.jsx)(react_core_1.DataListCell, __assign({ width: 5 }, { 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) {
                                                     var value = column.cell(item);
                                                     if (!value)
                                                         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                                                    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));
-                                                }) }))] })) }) }, "primary"),
+                                                    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));
+                                                }) }))] })) }) }), "primary"),
                             data.secondary.length > 0 ? ((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) {
                                             var value = column.cell(item);
                                             if (!value)
                                                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                                            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));
+                                            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));
                                         }) })) }) }, "secondary")) : null,
                         ] }), 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));
     }, [

package/cjs/cells/ElapsedTimeCell.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function ElapsedTimeCell(props: {
+    start?: number | string;
+    finish?: number | string;
+}): JSX.Element;

package/cjs/cells/ElapsedTimeCell.js

@@ -0,0 +1,49 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElapsedTimeCell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+function ElapsedTimeCell(props) {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var start = (0, react_1.useMemo)(function () { var _a; return new Date((_a = props.start) !== null && _a !== void 0 ? _a : 0).valueOf(); }, [props.start]);
+    var finish = (0, react_1.useMemo)(function () { var _a; return new Date((_a = props.finish) !== null && _a !== void 0 ? _a : 0).valueOf(); }, [props.finish]);
+    var _a = __read((0, react_1.useState)(Math.max(0, finish - start.valueOf())), 2), elapsed = _a[0], setElapsed = _a[1];
+    (0, react_1.useEffect)(function () {
+        var timeout = setInterval(function () {
+            if (start) {
+                if (!props.finish)
+                    setElapsed(Math.max(0, Date.now() - start));
+                else
+                    setElapsed(Math.max(0, finish - start));
+            }
+        }, 1000);
+        return function () { return clearTimeout(timeout); };
+    }, [start, finish, props.finish]);
+    var totalSeconds = Math.floor(elapsed / 1000);
+    var seconds = Math.floor(totalSeconds % 60);
+    var minutes = Math.floor((totalSeconds / 60) % 60);
+    var hours = Math.floor((totalSeconds / 60 / 60) % 24);
+    var days = Math.floor(totalSeconds / 60 / 60 / 24);
+    if (!start)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, { children: [days !== 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.SplitItem, { children: [days, t('d'), "\u00A0"] })), hours !== 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.SplitItem, { children: [hours, t('h'), "\u00A0"] })), minutes !== 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.SplitItem, { children: [minutes, t('m'), "\u00A0"] })), (0, jsx_runtime_1.jsxs)(react_core_1.SplitItem, { children: [seconds, t('s')] })] }));
+}
+exports.ElapsedTimeCell = ElapsedTimeCell;

package/cjs/cells/TextCell.d.ts

@@ -1,12 +1,13 @@
 import { ReactNode } from 'react';
-import { PatternFlyColor } from '../components/patternfly-colors';
+import { PFColor } from '../components/pfcolors';
 export interface TextCellProps {
     icon?: ReactNode;
     iconSize?: 'sm' | 'md' | 'lg';
     text?: string;
     to?: string;
     onClick?: () => void;
-    textColor?: PatternFlyColor;
+    color?: PFColor;
+    iconColor?: PFColor;
     maxWidth?: number;
     disableLinks?: boolean;
 }

package/cjs/cells/TextCell.js

@@ -15,17 +15,17 @@ exports.TextCell = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var IconWrapper_1 = require("../components/IconWrapper");
-var patternfly_colors_1 = require("../components/patternfly-colors");
+var pfcolors_1 = require("../components/pfcolors");
 var usePageNavigate_1 = require("../components/usePageNavigate");
 function TextCell(props) {
-    var _a, _b;
+    var _a, _b, _c;
     var navigate = (0, usePageNavigate_1.usePageNavigate)();
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ style: { maxWidth: '100%' } }, { children: [props.icon && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: (_a = props.iconSize) !== null && _a !== void 0 ? _a : 'sm' }, { children: props.icon })) })), props.text && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                        maxWidth: (_b = props.maxWidth) !== null && _b !== void 0 ? _b : '100%',
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ style: { maxWidth: '100%' } }, { children: [props.icon && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: (_a = props.iconSize) !== null && _a !== void 0 ? _a : 'sm', color: (_b = props.iconColor) !== null && _b !== void 0 ? _b : props.color }, { children: props.icon })) })), props.text && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                        maxWidth: (_c = props.maxWidth) !== null && _c !== void 0 ? _c : '100%',
                         whiteSpace: 'nowrap',
                         textOverflow: 'ellipsis',
                         overflow: 'hidden',
-                        color: props.textColor ? (0, patternfly_colors_1.getPatternflyColor)(props.textColor) : undefined,
+                        color: props.color ? (0, pfcolors_1.getPatternflyColor)(props.color) : undefined,
                     } }, { children: !props.disableLinks && (props.to || props.onClick) ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: props.to, onClick: function (e) {
                             e.preventDefault();
                             if (props.onClick) {

package/cjs/components/IconWrapper.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { PatternFlyColor } from './patternfly-colors';
+import { PFColor } from './pfcolors';
 export declare function IconWrapper(props: {
     children: ReactNode;
-    color?: PatternFlyColor;
+    color?: PFColor;
     size?: 'sm' | 'md' | 'lg';
     noPadding?: boolean;
 }): JSX.Element;

package/cjs/components/IconWrapper.js

@@ -14,11 +14,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconWrapper = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var patternfly_colors_1 = require("./patternfly-colors");
+var pfcolors_1 = require("./pfcolors");
 function IconWrapper(props) {
     var newProps = {};
     if (props.color) {
-        newProps.color = (0, patternfly_colors_1.getPatternflyColor)(props.color);
+        newProps.color = (0, pfcolors_1.getPatternflyColor)(props.color);
     }
     var marginOffset = undefined;
     var marginRight = undefined;

package/cjs/components/{patternfly-colors.d.ts → pfcolors.d.ts}

@@ -1,11 +1,17 @@
-export declare enum PatternFlyColor {
+export declare enum PFColorE {
     Green = "green",
+    Success = "success",
     Blue = "blue",
+    Info = "info",
     Red = "red",
+    Danger = "danger",
     Yellow = "yellow",
-    Grey = "grey"
+    Warning = "warning",
+    Grey = "grey",
+    Disabled = "disabled"
 }
-export declare function getPatternflyColor(color: PatternFlyColor): "var(--pf-global--success-color--100)" | "var(--pf-global--danger-color--100)" | "var(--pf-global--warning-color--100)" | "var(--pf-global--info-color--100)" | "var(--pf-global--disabled-color--100)" | undefined;
+export type PFColor = 'green' | 'success' | 'blue' | 'info' | 'red' | 'danger' | 'yellow' | 'warning' | 'grey' | 'disabled';
+export declare function getPatternflyColor(color: PFColor): "var(--pf-global--success-color--100)" | "var(--pf-global--danger-color--100)" | "var(--pf-global--warning-color--100)" | "var(--pf-global--info-color--100)" | "var(--pf-global--disabled-color--100)";
 export declare const pfSuccess = "var(--pf-global--success-color--100)";
 export declare const pfDanger = "var(--pf-global--danger-color--100)";
 export declare const pfWarning = "var(--pf-global--warning-color--100)";

package/cjs/components/{patternfly-colors.js → pfcolors.js}

@@ -1,28 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabelColorE = exports.pfDisabled = exports.pfInfo = exports.pfWarning = exports.pfDanger = exports.pfSuccess = exports.getPatternflyColor = exports.PatternFlyColor = void 0;
-var PatternFlyColor;
-(function (PatternFlyColor) {
-    PatternFlyColor["Green"] = "green";
-    PatternFlyColor["Blue"] = "blue";
-    PatternFlyColor["Red"] = "red";
-    PatternFlyColor["Yellow"] = "yellow";
-    PatternFlyColor["Grey"] = "grey";
-})(PatternFlyColor = exports.PatternFlyColor || (exports.PatternFlyColor = {}));
+exports.LabelColorE = exports.pfDisabled = exports.pfInfo = exports.pfWarning = exports.pfDanger = exports.pfSuccess = exports.getPatternflyColor = exports.PFColorE = void 0;
+var PFColorE;
+(function (PFColorE) {
+    PFColorE["Green"] = "green";
+    PFColorE["Success"] = "success";
+    PFColorE["Blue"] = "blue";
+    PFColorE["Info"] = "info";
+    PFColorE["Red"] = "red";
+    PFColorE["Danger"] = "danger";
+    PFColorE["Yellow"] = "yellow";
+    PFColorE["Warning"] = "warning";
+    PFColorE["Grey"] = "grey";
+    PFColorE["Disabled"] = "disabled";
+})(PFColorE = exports.PFColorE || (exports.PFColorE = {}));
 function getPatternflyColor(color) {
     switch (color) {
         case 'green':
+        case 'success':
             return exports.pfSuccess;
         case 'red':
+        case 'danger':
             return exports.pfDanger;
         case 'yellow':
+        case 'warning':
             return exports.pfWarning;
         case 'blue':
+        case 'info':
             return exports.pfInfo;
         case 'grey':
+        case 'disabled':
             return exports.pfDisabled;
     }
-    return undefined;
 }
 exports.getPatternflyColor = getPatternflyColor;
 exports.pfSuccess = 'var(--pf-global--success-color--100)';

package/cjs/components/usePageNavigate.d.ts

@@ -1 +1,6 @@
+import { ReactNode } from 'react';
+export declare function PageNavigateCallbackContextProvider(props: {
+    callback?: (url: string) => void;
+    children: ReactNode;
+}): JSX.Element;
 export declare function usePageNavigate(): (to?: string) => void;

package/cjs/components/usePageNavigate.js

@@ -1,16 +1,37 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePageNavigate = void 0;
+exports.usePageNavigate = exports.PageNavigateCallbackContextProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var PageNavigateCallbackContext = (0, react_1.createContext)(undefined);
+function usePageNavigateCallback() {
+    return (0, react_1.useContext)(PageNavigateCallbackContext);
+}
+function PageNavigateCallbackContextProvider(props) {
+    return ((0, jsx_runtime_1.jsx)(PageNavigateCallbackContext.Provider, __assign({ value: props.callback }, { children: props.children })));
+}
+exports.PageNavigateCallbackContextProvider = PageNavigateCallbackContextProvider;
 function usePageNavigate() {
+    var pageNavigateCallback = usePageNavigateCallback();
     var navigate = (0, react_1.useCallback)(function (to) {
         if (to === null || to === void 0 ? void 0 : to.startsWith('http')) {
             open(to, '_blank');
         }
         else {
-            open(to, '_self');
+            pageNavigateCallback ? pageNavigateCallback(to !== null && to !== void 0 ? to : '') : open(to, '_self');
         }
-    }, []);
+    }, [pageNavigateCallback]);
     return navigate;
 }
 exports.usePageNavigate = usePageNavigate;

package/cjs/index.d.ts

@@ -3,6 +3,7 @@ export * from './cells/BytesCell';
 export * from './cells/CapacityCell';
 export * from './cells/CopyCell';
 export * from './cells/DateTimeCell';
+export * from './cells/ElapsedTimeCell';
 export * from './cells/LabelsCell';
 export * from './cells/TextCell';
 export * from './components/BulkSelector';
@@ -10,7 +11,7 @@ export * from './components/Collapse';
 export * from './components/Details';
 export * from './components/Help';
 export * from './components/icons/RunningIcon';
-export * from './components/patternfly-colors';
+export * from './components/pfcolors';
 export * from './components/Scrollable';
 export * from './components/useBreakPoint';
 export * from './PageAlertToaster';

package/cjs/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./cells/BytesCell"), exports);
 __exportStar(require("./cells/CapacityCell"), exports);
 __exportStar(require("./cells/CopyCell"), exports);
 __exportStar(require("./cells/DateTimeCell"), exports);
+__exportStar(require("./cells/ElapsedTimeCell"), exports);
 __exportStar(require("./cells/LabelsCell"), exports);
 __exportStar(require("./cells/TextCell"), exports);
 __exportStar(require("./components/BulkSelector"), exports);
@@ -26,7 +27,7 @@ __exportStar(require("./components/Collapse"), exports);
 __exportStar(require("./components/Details"), exports);
 __exportStar(require("./components/Help"), exports);
 __exportStar(require("./components/icons/RunningIcon"), exports);
-__exportStar(require("./components/patternfly-colors"), exports);
+__exportStar(require("./components/pfcolors"), exports);
 __exportStar(require("./components/Scrollable"), exports);
 __exportStar(require("./components/useBreakPoint"), exports);
 __exportStar(require("./PageAlertToaster"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "Framework for building consistent responsive web applications using PatternFly.",
-  "version": "0.0.276",
+  "version": "0.0.278",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {