@ansible/ansible-ui-framework 0.0.275 → 0.0.277

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/BulkActionDialog.js

@@ -25,7 +25,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/cjs/BulkProgressDialog.js

@@ -25,7 +25,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {

package/cjs/PageAlertToaster.d.ts

@@ -1,6 +1,6 @@
 import { AlertProps } from '@patternfly/react-core';
 import { ReactNode } from 'react';
-export declare type AlertToasterProps = AlertProps;
+export type AlertToasterProps = AlertProps;
 export interface IPageAlertToaster {
     addAlert: (alert: AlertToasterProps) => void;
     removeAlert: (alert: AlertToasterProps) => void;

package/cjs/PageDataList.d.ts

@@ -2,11 +2,11 @@ import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { PageHeaderProps } from './PageHeader';
 import { IToolbarFilter } from './PageToolbar';
 import { ITypedAction } from './TypedActions';
-export declare type DataListPageProps<T extends object> = PageHeaderProps & PageDataListProps<T> & {
+export type DataListPageProps<T extends object> = PageHeaderProps & PageDataListProps<T> & {
     error?: Error;
 };
 export declare function DataListPage<T extends object>(props: DataListPageProps<T>): JSX.Element;
-export declare type PageDataListProps<T extends object> = {
+export type PageDataListProps<T extends object> = {
     keyFn: (item: T) => string | number;
     itemCount?: number;
     pageItems: T[] | undefined;

package/cjs/PageForm.d.ts

@@ -3,7 +3,7 @@ import { CSSProperties, ReactNode } from 'react';
 import { DeepPartial, ErrorOption, FieldPath, FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
 import { PartialDeep } from 'type-fest';
 import { PageHeaderProps } from './PageHeader';
-export declare type FormPageProps<T extends object> = PageHeaderProps & {
+export type FormPageProps<T extends object> = PageHeaderProps & {
     children?: ReactNode;
     defaultValues?: PartialDeep<T>;
     onSubmit: SubmitHandler<PartialDeep<T>>;
@@ -136,7 +136,7 @@ export declare function PageForm<T extends object>(props: {
     singleColumn?: boolean;
     disableScrolling?: boolean;
 }): JSX.Element;
-export declare type FormPageSubmitHandler<T extends FieldValues> = (data: T, setError: (error: string) => void, setFieldError: (fieldName: FieldPath<T>, error: ErrorOption) => void) => Promise<unknown>;
+export type FormPageSubmitHandler<T extends FieldValues> = (data: T, setError: (error: string) => void, setFieldError: (fieldName: FieldPath<T>, error: ErrorOption) => void) => Promise<unknown>;
 export declare function PageFormSubmitButton(props: {
     children: ReactNode;
     style?: CSSProperties;

package/cjs/PagePagination.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-export declare type PagePaginationProps = {
+export type PagePaginationProps = {
     itemCount?: number;
     page: number;
     perPage: number;

package/cjs/PageTable.d.ts

@@ -3,11 +3,11 @@ import { PageHeaderProps } from './PageHeader';
 import { PageTableViewType } from './PageTableViewType';
 import { IToolbarFilter } from './PageToolbar';
 import { ITypedAction } from './TypedActions';
-export declare type TablePageProps<T extends object> = PageHeaderProps & PageTableProps<T> & {
+export type TablePageProps<T extends object> = PageHeaderProps & PageTableProps<T> & {
     error?: Error;
 };
 export declare function TablePage<T extends object>(props: TablePageProps<T>): JSX.Element;
-export declare type PageTableProps<T extends object> = {
+export type PageTableProps<T extends object> = {
     keyFn: (item: T) => string | number;
     itemCount?: number;
     pageItems: T[] | undefined;
@@ -52,7 +52,7 @@ export declare type PageTableProps<T extends object> = {
     defaultCardSubtitle?: ReactNode;
 };
 export declare function PageTable<T extends object>(props: PageTableProps<T>): JSX.Element;
-declare type CellFn<T extends object> = (item: T) => ReactNode;
+type CellFn<T extends object> = (item: T) => ReactNode;
 export interface ITableColumn<T extends object> {
     id?: string;
     header: string;
@@ -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/PageTableCards.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { PageTableProps } from './PageTable';
-export declare type PageTableCardsProps<T extends object> = PageTableProps<T>;
+export type PageTableCardsProps<T extends object> = PageTableProps<T>;
 export declare function PageTableCards<T extends object>(props: PageTableCardsProps<T>): JSX.Element;

package/cjs/PageTableList.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ITableColumn, PageTableProps } from './PageTable';
 import { ITypedAction } from './TypedActions';
-export declare type PageTableListProps<T extends object> = PageTableProps<T>;
+export type PageTableListProps<T extends object> = PageTableProps<T>;
 export declare function PageTableList<T extends object>(props: PageTableListProps<T>): JSX.Element;
 export declare function useColumnsToDataList<T extends object>(tableColumns: ITableColumn<T>[], keyFn: (item: T) => string | number, isSelected?: (item: T) => boolean, selectItem?: (item: T) => void, unselectItem?: (item: T) => void, rowActions?: ITypedAction<T>[], defaultCardSubtitle?: ReactNode, showSelect?: boolean): (item: T) => ReactNode;

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/PageTableViewType.d.ts

@@ -3,4 +3,4 @@ export declare enum PageTableViewTypeE {
     List = "list",
     Cards = "cards"
 }
-export declare type PageTableViewType = 'table' | 'list' | 'cards';
+export type PageTableViewType = 'table' | 'list' | 'cards';

package/cjs/PageToolbar.d.ts

@@ -10,7 +10,7 @@ export interface IItemFilter<T extends object> {
     }[];
     filter: (item: T, values: string[]) => boolean;
 }
-export declare type SetFilterValues<T extends object> = (filter: IItemFilter<T>, values: string[]) => void;
+export type SetFilterValues<T extends object> = (filter: IItemFilter<T>, values: string[]) => void;
 export declare function toolbarActionsHaveBulkActions<T extends object>(actions?: ITypedAction<T>[]): boolean;
 export interface IToolbarStringFilter {
     key: string;
@@ -30,9 +30,9 @@ export interface IToolbarSelectFilter {
     query: string;
     placeholder?: string;
 }
-export declare type IToolbarFilter = IToolbarStringFilter | IToolbarSelectFilter;
-export declare type IFilterState = Record<string, string[] | undefined>;
-export declare type PagetableToolbarProps<T extends object> = {
+export type IToolbarFilter = IToolbarStringFilter | IToolbarSelectFilter;
+export type IFilterState = Record<string, string[] | undefined>;
+export type PagetableToolbarProps<T extends object> = {
     openColumnModal?: () => void;
     keyFn: (item: T) => string | number;
     itemCount?: number;

package/cjs/TypedActions/TypedActions.d.ts

@@ -19,27 +19,27 @@ interface ITypedActionCommon {
     tooltip?: string;
     isDanger?: boolean;
 }
-export declare type ITypedActionButton = ITypedActionCommon & {
+export type ITypedActionButton = ITypedActionCommon & {
     type: TypedActionType.button;
     variant?: ButtonVariant;
     onClick: () => void;
 };
-export declare type ITypedBulkAction<T extends object> = ITypedActionCommon & {
+export type ITypedBulkAction<T extends object> = ITypedActionCommon & {
     type: TypedActionType.bulk;
     variant?: ButtonVariant;
     onClick: (selectedItems: T[]) => void;
 };
-export declare type ITypedSingleAction<T extends object> = ITypedActionCommon & {
+export type ITypedSingleAction<T extends object> = ITypedActionCommon & {
     type: TypedActionType.single;
     variant?: ButtonVariant;
     onClick: (item: T) => void;
 };
-export declare type ITypedDropdownAction<T extends object> = ITypedActionCommon & {
+export type ITypedDropdownAction<T extends object> = ITypedActionCommon & {
     type: TypedActionType.dropdown;
     variant?: ButtonVariant;
     options: ITypedAction<T>[];
 };
-export declare type ITypedAction<T extends object> = ITypedActionSeperator | ITypedActionButton | ITypedBulkAction<T> | ITypedSingleAction<T> | ITypedDropdownAction<T>;
+export type ITypedAction<T extends object> = ITypedActionSeperator | ITypedActionButton | ITypedBulkAction<T> | ITypedSingleAction<T> | ITypedDropdownAction<T>;
 export declare function TypedActionsDropdown<T extends object>(props: {
     actions: ITypedAction<T>[];
     label?: string;

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/Details.d.ts

@@ -24,7 +24,7 @@ export interface IDetailListItem {
     helpTitle?: string;
     help?: ReactNode;
 }
-export declare type IDetail = IDetailText | IDetailList;
+export type IDetail = IDetailText | IDetailList;
 export declare function DetailsList(props: {
     children?: ReactNode;
 }): JSX.Element;

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/pfcolors.d.ts

@@ -0,0 +1,29 @@
+export declare enum PFColorE {
+    Green = "green",
+    Success = "success",
+    Blue = "blue",
+    Info = "info",
+    Red = "red",
+    Danger = "danger",
+    Yellow = "yellow",
+    Warning = "warning",
+    Grey = "grey",
+    Disabled = "disabled"
+}
+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)";
+export declare const pfInfo = "var(--pf-global--info-color--100)";
+export declare const pfDisabled = "var(--pf-global--disabled-color--100)";
+export declare enum LabelColorE {
+    blue = "blue",
+    cyan = "cyan",
+    green = "green",
+    orange = "orange",
+    purple = "purple",
+    red = "red",
+    grey = "grey"
+}
+export type LabelColor = 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';

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/useBreakPoint.d.ts

@@ -1,4 +1,4 @@
-export declare type WindowSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type WindowSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export declare function useWindowSize(): WindowSize;
 /** Returns true if the window size is equal to or larger than the indicated size. */
 export declare function useBreakpoint(size: WindowSize): boolean;

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/cjs/useInMemoryView.d.ts

@@ -2,7 +2,7 @@ import { ITableColumn } from './PageTable';
 import { IToolbarFilter } from './PageToolbar';
 import { ISelected } from './useTableItems';
 import { IView } from './useView';
-export declare type IInMemoryView<T extends object> = IView & ISelected<T> & {
+export type IInMemoryView<T extends object> = IView & ISelected<T> & {
     itemCount: number | undefined;
     pageItems: T[] | undefined;
 };

package/cjs/useSelectDialog.d.ts

@@ -17,7 +17,7 @@ interface ISelectDialogOptions<T extends object> {
 export declare function useSelectDialog<T extends {
     id: number;
 }>(options: ISelectDialogOptions<T>): (onSelect?: ((item: T) => void) | undefined, title?: string) => void;
-export declare type SelectDialogProps<T extends object> = {
+export type SelectDialogProps<T extends object> = {
     title: string;
     open: boolean;
     setOpen: (open: boolean) => void;

package/cjs/useSelectMultipleDialog.d.ts

@@ -3,7 +3,7 @@ import { ITableColumn } from './PageTable';
 import { IToolbarFilter } from './PageToolbar';
 import { ISelected } from './useTableItems';
 import { IView } from './useView';
-export declare type SelectMultipleDialogProps<T extends object> = {
+export type SelectMultipleDialogProps<T extends object> = {
     title: string;
     view: IView & ISelected<T> & {
         itemCount?: number;

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.275",
+  "version": "0.0.277",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {

package/cjs/components/patternfly-colors.d.ts

@@ -1,23 +0,0 @@
-export declare enum PatternFlyColor {
-    Green = "green",
-    Blue = "blue",
-    Red = "red",
-    Yellow = "yellow",
-    Grey = "grey"
-}
-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 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)";
-export declare const pfInfo = "var(--pf-global--info-color--100)";
-export declare const pfDisabled = "var(--pf-global--disabled-color--100)";
-export declare enum LabelColorE {
-    blue = "blue",
-    cyan = "cyan",
-    green = "green",
-    orange = "orange",
-    purple = "purple",
-    red = "red",
-    grey = "grey"
-}
-export declare type LabelColor = 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';