@ansible/ansible-ui-framework 0.0.270 → 0.0.271

package/cjs/PageHeader.js

@@ -16,21 +16,21 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_icons_1 = require("@patternfly/react-icons");
 var react_1 = require("react");
-var react_router_dom_1 = require("react-router-dom");
 var useBreakPoint_1 = require("./components/useBreakPoint");
+var usePageNavigate_1 = require("./components/usePageNavigate");
 var Settings_1 = require("./Settings");
 function Breadcrumbs(props) {
-    var history = (0, react_router_dom_1.useNavigate)();
+    var navigate = (0, usePageNavigate_1.usePageNavigate)();
     if (!props.breadcrumbs)
         return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
     return ((0, jsx_runtime_1.jsx)(react_core_1.Breadcrumb, __assign({ style: props.style }, { children: props.breadcrumbs.map(function (breadcrumb) {
             var _a;
             if (!breadcrumb.label)
                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-            return ((0, jsx_runtime_1.jsx)(react_core_1.BreadcrumbItem, __assign({ id: breadcrumb.id, component: breadcrumb.component, onClick: breadcrumb.to ? function () { return breadcrumb.to && history(breadcrumb.to); } : undefined, style: {
-                    color: breadcrumb.to ? 'var(--pf-c-breadcrumb__link--Color)' : undefined,
-                    cursor: breadcrumb.to ? 'pointer' : undefined,
-                }, isActive: breadcrumb.to === undefined }, { children: breadcrumb.label }), (_a = breadcrumb.id) !== null && _a !== void 0 ? _a : breadcrumb.label));
+            return ((0, jsx_runtime_1.jsx)(react_core_1.BreadcrumbItem, __assign({ id: breadcrumb.id, component: breadcrumb.component, isActive: breadcrumb.to === undefined }, { children: breadcrumb.to ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: breadcrumb.to, onClick: function (e) {
+                        e.preventDefault();
+                        navigate(breadcrumb.to);
+                    } }, { children: breadcrumb.label }))) : (breadcrumb.label) }), (_a = breadcrumb.id) !== null && _a !== void 0 ? _a : breadcrumb.label));
         }) })));
 }
 /**

package/cjs/{PageCells.d.ts → cells/PageCells.d.ts}

@@ -1,19 +1,10 @@
-import { ReactNode } from 'react';
-import { PatternFlyColor } from './components/patternfly-colors';
+/// <reference types="react" />
 export declare function LabelsCell(props: {
     labels: string[];
 }): JSX.Element;
 export declare function DateCell(props: {
     value: number | string;
 }): JSX.Element;
-export declare function TextCell(props: {
-    icon?: ReactNode;
-    text?: string;
-    iconSize?: 'sm' | 'md' | 'lg';
-    to?: string;
-    onClick?: () => void;
-    textColor?: PatternFlyColor;
-}): JSX.Element;
 export declare function CopyCell(props: {
     text?: string;
     minWidth?: number;

package/cjs/{PageCells.js → cells/PageCells.js}

@@ -27,16 +27,13 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BytesCell = exports.CapacityCell = exports.SinceCell = exports.CopyCell = exports.TextCell = exports.DateCell = exports.LabelsCell = void 0;
+exports.BytesCell = exports.CapacityCell = exports.SinceCell = exports.CopyCell = exports.DateCell = exports.LabelsCell = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var luxon_1 = require("luxon");
 var react_1 = require("react");
-var react_router_dom_1 = require("react-router-dom");
-var IconWrapper_1 = require("./components/IconWrapper");
-var patternfly_colors_1 = require("./components/patternfly-colors");
-var Settings_1 = require("./Settings");
-var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
+var Settings_1 = require("../Settings");
+var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
 function LabelsCell(props) {
     return ((0, jsx_runtime_1.jsx)(react_core_1.LabelGroup, __assign({ numLabels: 999, style: { flexWrap: 'nowrap' } }, { children: props.labels.map(function (label) { return ((0, jsx_runtime_1.jsx)(react_core_1.Label, { children: label }, label)); }) })));
 }
@@ -46,25 +43,6 @@ function DateCell(props) {
     return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: date.toLocaleDateString() }), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: date.toLocaleTimeString() })] })));
 }
 exports.DateCell = DateCell;
-function TextCell(props) {
-    var _a, _b, _c, _d, _e;
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, { 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 : 'md' }, { children: props.icon })) })), props.to ? ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: (_b = props.text) !== null && _b !== void 0 ? _b : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                            maxWidth: 300,
-                            whiteSpace: 'nowrap',
-                            textOverflow: 'ellipsis',
-                            overflow: 'hidden',
-                        } }, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({ to: props.to }, { children: (_c = props.text) !== null && _c !== void 0 ? _c : '' })) })) })) })) : props.onClick !== undefined ? ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ onClick: props.onClick }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, style: {
-                        whiteSpace: 'nowrap',
-                    } }, { children: props.text })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: {
-                    color: props.textColor ? (0, patternfly_colors_1.getPatternflyColor)(props.textColor) : undefined,
-                } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: (_d = props.text) !== null && _d !== void 0 ? _d : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                            maxWidth: 300,
-                            whiteSpace: 'nowrap',
-                            textOverflow: 'ellipsis',
-                            overflow: 'hidden',
-                        } }, { children: (_e = props.text) !== null && _e !== void 0 ? _e : '' })) })) })))] }));
-}
-exports.TextCell = TextCell;
 function CopyCell(props) {
     if (!props.text)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});

package/cjs/cells/TextCell.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { PatternFlyColor } from '../components/patternfly-colors';
+export interface TextCellProps {
+    icon?: ReactNode;
+    iconSize?: 'sm' | 'md' | 'lg';
+    text?: string;
+    to?: string;
+    onClick?: () => void;
+    textColor?: PatternFlyColor;
+    maxWidth?: number;
+    disableLinks?: boolean;
+}
+export declare function TextCell(props: TextCellProps): JSX.Element;

package/cjs/cells/TextCell.js

@@ -0,0 +1,39 @@
+"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.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 usePageNavigate_1 = require("../components/usePageNavigate");
+function TextCell(props) {
+    var _a, _b;
+    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%',
+                        whiteSpace: 'nowrap',
+                        textOverflow: 'ellipsis',
+                        overflow: 'hidden',
+                        color: props.textColor ? (0, patternfly_colors_1.getPatternflyColor)(props.textColor) : 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) {
+                                props.onClick();
+                            }
+                            else {
+                                navigate(props.to);
+                            }
+                        } }, { children: props.text }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.text })) })) })))] })));
+}
+exports.TextCell = TextCell;

package/cjs/components/Details.d.ts

@@ -25,9 +25,6 @@ export interface IDetailListItem {
     help?: ReactNode;
 }
 export declare type IDetail = IDetailText | IDetailList;
-export declare function Details(props: {
-    details: IDetail[];
-}): JSX.Element;
 export declare function DetailsList(props: {
     children?: ReactNode;
 }): JSX.Element;

package/cjs/components/Details.js

@@ -11,14 +11,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DetailsSkeleton = exports.Detail = exports.DetailsList = exports.Details = exports.isDetailList = exports.isDetailText = void 0;
+exports.DetailsSkeleton = exports.Detail = exports.DetailsList = exports.isDetailList = exports.isDetailText = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
-var react_router_dom_1 = require("react-router-dom");
-var PageCells_1 = require("../PageCells");
 var Settings_1 = require("../Settings");
-var Help_1 = require("./Help");
-var IconWrapper_1 = require("./IconWrapper");
 function isDetailText(detail) {
     return 'label' in detail && !('items' in detail);
 }
@@ -27,32 +23,6 @@ function isDetailList(detail) {
     return 'items' in detail && 'label' in detail;
 }
 exports.isDetailList = isDetailList;
-function Details(props) {
-    var details = props.details;
-    return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: {
-            sm: 'vertical',
-            md: 'horizontal',
-            lg: 'horizontal',
-            xl: 'horizontal',
-            '2xl': 'horizontal',
-        } }, { children: details.map(function (detail, index) {
-            if (isDetailText(detail)) {
-                if (!detail.text)
-                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                var Icon = detail.icon;
-                return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: detail.label }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: detail.label.toLowerCase().split(' ').join('-') }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Split, { children: [Icon && ((0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "sm" }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))), detail.to ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({ to: detail.to }, { children: detail.text }))) : detail.link ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: detail.link, target: "_blank", rel: "noreferrer" }, { children: detail.text }))) : detail.color ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { color: detail.color } }, { children: detail.text }))) : detail.copy ? ((0, jsx_runtime_1.jsx)(PageCells_1.CopyCell, { text: detail.text })) : detail.since ? ((0, jsx_runtime_1.jsx)(PageCells_1.SinceCell, { value: detail.text })) : (detail.text), detail.help && (0, jsx_runtime_1.jsx)(Help_1.Help, { title: detail.helpTitle, help: detail.help })] }, index) }))] }, index));
-            }
-            else if (isDetailList(detail)) {
-                return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: detail.label }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: detail.label.toLowerCase().split(' ').join('-') }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Stack, __assign({ hasGutter: true }, { children: detail.items.map(function (item, index) {
-                                    var Icon = item.icon;
-                                    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [Icon && (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: item.icon }), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: item.text }), item.help && (0, jsx_runtime_1.jsx)(Help_1.Help, { title: item.helpTitle, help: item.help })] }), index));
-                                }) })) }))] }, index));
-            }
-            else
-                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-        }) })));
-}
-exports.Details = Details;
 function DetailsList(props) {
     var settings = (0, Settings_1.useSettings)();
     var orientation = settings.formLayout;

package/cjs/components/usePageNavigate.d.ts

@@ -0,0 +1 @@
+export declare function usePageNavigate(): (to?: string) => void;

package/cjs/components/usePageNavigate.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageNavigate = void 0;
+var react_1 = require("react");
+function usePageNavigate() {
+    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');
+        }
+    }, []);
+    return navigate;
+}
+exports.usePageNavigate = usePageNavigate;

package/cjs/index.d.ts

@@ -1,15 +1,15 @@
 export * from './BulkActionDialog';
+export * from './cells/PageCells';
+export * from './cells/TextCell';
 export * from './components/BulkSelector';
 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/useBreakPoint';
 export * from './PageAlertToaster';
-export * from './components/Help';
-export * from './components/icons/RunningIcon';
 export * from './PageBody';
-export * from './PageCells';
 export * from './PageDataList';
 export * from './PageDialog';
 export * from './PageForm';

package/cjs/index.js

@@ -15,17 +15,17 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BulkActionDialog"), exports);
+__exportStar(require("./cells/PageCells"), exports);
+__exportStar(require("./cells/TextCell"), exports);
 __exportStar(require("./components/BulkSelector"), exports);
 __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/useBreakPoint"), exports);
 __exportStar(require("./PageAlertToaster"), exports);
-__exportStar(require("./components/Help"), exports);
-__exportStar(require("./components/icons/RunningIcon"), exports);
 __exportStar(require("./PageBody"), exports);
-__exportStar(require("./PageCells"), exports);
 __exportStar(require("./PageDataList"), exports);
 __exportStar(require("./PageDialog"), exports);
 __exportStar(require("./PageForm"), 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.270",
+  "version": "0.0.271",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {