@ansible/ansible-ui-framework 0.0.269 → 0.0.271

package/cjs/PageBody.js

@@ -10,21 +10,37 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageBody = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_i18next_1 = require("react-i18next");
-var _1 = require(".");
 var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
+var useBreakPoint_1 = require("./components/useBreakPoint");
 var Settings_1 = require("./Settings");
+var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 function PageBody(props) {
-    var usePadding = (0, _1.useBreakpoint)('xxl') && props.disablePadding !== true;
+    var usePadding = (0, useBreakPoint_1.useBreakpoint)('xxl') && props.disablePadding !== true;
     var settings = (0, Settings_1.useSettings)();
-    var t = (0, react_i18next_1.useTranslation)().t;
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: t('Error') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: translations.errorText }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                 display: 'flex',
                 flexDirection: 'column',
                 height: '100%',

package/cjs/PageForm.d.ts

@@ -2,7 +2,7 @@ import { JSONSchema6 } from 'json-schema';
 import { CSSProperties, ReactNode } from 'react';
 import { DeepPartial, ErrorOption, FieldPath, FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
 import { PartialDeep } from 'type-fest';
-import { PageHeaderProps } from '.';
+import { PageHeaderProps } from './PageHeader';
 export declare type FormPageProps<T extends object> = PageHeaderProps & {
     children?: ReactNode;
     defaultValues?: PartialDeep<T>;

package/cjs/PageForm.js

@@ -38,8 +38,10 @@ var react_icons_1 = require("@patternfly/react-icons");
 var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
-var _1 = require(".");
+var Collapse_1 = require("./components/Collapse");
 var Scrollable_1 = require("./components/Scrollable");
+var useBreakPoint_1 = require("./components/useBreakPoint");
+var PageHeader_1 = require("./PageHeader");
 var Settings_1 = require("./Settings");
 function FormPage(props) {
     // const methods = useForm<PartialDeep<T>>({
@@ -64,7 +66,7 @@ function FormPage(props) {
         return false;
     });
     var _a = __read((0, react_1.useContext)(Settings_1.SettingsContext), 1), settings = _a[0];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!props.hideHeader && (0, jsx_runtime_1.jsx)(_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsxs)(react_core_1.Form
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!props.hideHeader && (0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsxs)(react_core_1.Form
             // eslint-disable-next-line @typescript-eslint/no-misused-promises
             , __assign({ 
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -78,7 +80,7 @@ function FormPage(props) {
 exports.FormPage = FormPage;
 function FormPageAlerts() {
     var errors = (0, react_hook_form_1.useFormState)().errors;
-    var isMd = (0, _1.useBreakpoint)('md');
+    var isMd = (0, useBreakPoint_1.useBreakpoint)('md');
     return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: errors && Object.keys(errors).length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { title: "Please fix validation errors.", isInline: true, style: { width: '100%', paddingLeft: isMd ? 190 : undefined }, variant: "danger" })) }));
 }
 exports.FormPageAlerts = FormPageAlerts;
@@ -327,7 +329,7 @@ function PageForm(props) {
     });
     var handleSubmit = form.handleSubmit, setFieldError = form.setError;
     var _a = __read((0, react_1.useState)(''), 2), error = _a[0], setError = _a[1];
-    var isMd = (0, _1.useBreakpoint)('md');
+    var isMd = (0, useBreakPoint_1.useBreakpoint)('md');
     var _b = __read((0, react_1.useContext)(Settings_1.SettingsContext), 1), settings = _b[0];
     var isHorizontal = props.isVertical ? false : settings.formLayout === 'horizontal';
     var multipleColumns = props.singleColumn ? false : settings.formColumns === 'multiple';
@@ -356,7 +358,7 @@ function PageForm(props) {
                     // padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
                     variant: "light", style: { maxWidth: maxWidth } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(FormSchema, { schema: props.schema }), props.children] })) }))) : ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, __assign({ style: { height: '100%', flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, 
                         // padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
-                        variant: "light", style: { maxWidth: maxWidth } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(FormSchema, { schema: props.schema }), props.children] })) })) }))), (0, jsx_runtime_1.jsx)(_1.Collapse, __assign({ open: !!error }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Alert, { variant: "danger", title: error !== null && error !== void 0 ? error : '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } }) })), props.onCancel ? ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: false, style: {
+                        variant: "light", style: { maxWidth: maxWidth } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(FormSchema, { schema: props.schema }), props.children] })) })) }))), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: !!error }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Alert, { variant: "danger", title: error !== null && error !== void 0 ? error : '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } }) })), props.onCancel ? ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: false, style: {
                         borderTop: 'thin solid var(--pf-global--BorderColor--100)',
                         backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--400)' : undefined,
                     }, variant: "light" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [(0, jsx_runtime_1.jsx)(PageFormSubmitButton, { children: props.submitText }), props.onCancel && ((0, jsx_runtime_1.jsx)(PageFormCancelButton, __assign({ onCancel: props.onCancel }, { children: props.cancelText })))] })) }))) : ((0, jsx_runtime_1.jsx)(PageFormSubmitButton, __assign({ style: { marginTop: 48 } }, { children: props.submitText })))] })) }))

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

@@ -10,14 +10,30 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayout = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_i18next_1 = require("react-i18next");
 var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
+var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 /**
  * PageLayout enables the responsive layout of the page.
  *
@@ -30,8 +46,8 @@ var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
  * <Page>
  */
 function PageLayout(props) {
-    var t = (0, react_i18next_1.useTranslation)().t;
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: t('Error') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: translations.errorText }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                 display: 'flex',
                 flexDirection: 'column',
                 height: '100%',

package/cjs/PageToolbar.js

@@ -43,13 +43,13 @@ 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_i18next_1 = require("react-i18next");
 var BulkSelector_1 = require("./components/BulkSelector");
 var SingleSelect_1 = require("./components/SingleSelect");
 var useBreakPoint_1 = require("./components/useBreakPoint");
 var PageTableViewType_1 = require("./PageTableViewType");
 var Settings_1 = require("./Settings");
 var TypedActions_1 = require("./TypedActions");
+var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 function toolbarActionsHaveBulkActions(actions) {
     var e_1, _a;
     if (!actions)
@@ -217,9 +217,9 @@ function ToolbarTextFilter(props) {
                 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ArrowRightIcon, {}) })))] }));
 }
 function ToolbarSelectFilter(props) {
-    var t = (0, react_i18next_1.useTranslation)().t;
+    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
     var addFilter = props.addFilter, removeFilter = props.removeFilter, options = props.options, values = props.values;
-    var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
+    var _b = __read((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
     var onSelect = (0, react_1.useCallback)(function (e, value) {
         if (values.includes(value.toString())) {
             removeFilter(value.toString());
@@ -229,5 +229,5 @@ function ToolbarSelectFilter(props) {
         }
     }, [addFilter, removeFilter, values]);
     var selections = values;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ variant: react_core_1.SelectVariant.checkbox, isOpen: open, onToggle: setOpen, selections: selections, onSelect: onSelect, placeholderText: values.length ? t('Selected') : (0, jsx_runtime_1.jsx)("span", __assign({ style: { opacity: 0.7 } }, { children: props.placeholder })) }, { children: options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ id: option.value, value: option.value }, { children: option.label }), option.value)); }) })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ variant: react_core_1.SelectVariant.checkbox, isOpen: open, onToggle: setOpen, selections: selections, onSelect: onSelect, placeholderText: values.length ? (translations.selectedText) : ((0, jsx_runtime_1.jsx)("span", __assign({ style: { opacity: 0.7 } }, { children: props.placeholder }))) }, { children: options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ id: option.value, value: option.value }, { children: option.label }), option.value)); }) })) }));
 }

package/cjs/Settings.d.ts

@@ -15,5 +15,4 @@ export declare function useSettingsDialog(t: (t: string) => string): () => void;
 export declare function SettingsDialog(props: {
     open: boolean;
     setOpen: (open: boolean) => void;
-    t: (t: string) => string;
 }): JSX.Element;

package/cjs/Settings.js

@@ -33,6 +33,7 @@ var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 var SingleSelect_1 = require("./components/SingleSelect");
 var PageDialog_1 = require("./PageDialog");
+var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 exports.SettingsContext = (0, react_1.createContext)([
     {},
     function () { return null; },
@@ -93,7 +94,7 @@ function useSettingsDialog(t) {
     var _b = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _b[0], setDialog = _b[1];
     (0, react_1.useEffect)(function () {
         if (open) {
-            setDialog((0, jsx_runtime_1.jsx)(SettingsDialog, { open: open, setOpen: setOpen, t: t }));
+            setDialog((0, jsx_runtime_1.jsx)(SettingsDialog, { open: open, setOpen: setOpen }));
         }
         else {
             setDialog(undefined);
@@ -106,17 +107,17 @@ function SettingsDialog(props) {
     var _a, _b, _c, _d;
     var onClose = function () { return props.setOpen(false); };
     var _e = __read((0, react_1.useContext)(exports.SettingsContext), 2), settings = _e[0], setSettings = _e[1];
-    var t = props.t;
+    var _f = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _f[0];
     return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ title: "Settings", isOpen: props.open, onClose: onClose, variant: react_core_1.ModalVariant.medium, tabIndex: 0, actions: [
-            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: t('Close') }), "close"),
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: translations.closeText }), "close"),
         ] }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, __assign({ isHorizontal: settings.formLayout === 'horizontal' }, { children: [(0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Theme", value: (_a = settings.theme) !== null && _a !== void 0 ? _a : 'system', onChange: function (theme) {
                         return setSettings(__assign(__assign({}, settings), { theme: theme }));
-                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: t('System default') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: t('Light') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: t('Dark') }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Table Layout", value: (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable', onChange: function (tableLayout) {
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: 'System default' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: 'Light' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: 'Dark' }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Table Layout", value: (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable', onChange: function (tableLayout) {
                         return setSettings(__assign(__assign({}, settings), { tableLayout: tableLayout }));
-                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: t('Comfortable') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: t('Compact') }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Form Columns", value: (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple', onChange: function (formColumns) {
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: 'Comfortable' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: 'Compact' }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Form Columns", value: (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple', onChange: function (formColumns) {
                         return setSettings(__assign(__assign({}, settings), { formColumns: formColumns }));
-                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: t('Multiple columns') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: t('Single column') }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onChange: function (formLayout) {
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onChange: function (formLayout) {
                         return setSettings(__assign(__assign({}, settings), { formLayout: formLayout }));
-                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: t('Vertical labels') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: t('Horizontal labels') }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Borders", value: settings.borders ? 'true' : 'false', onChange: function (value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); }, style: { paddingBottom: 120 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: t('Yes') })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: t('No') }))] }))] })) })));
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] })), (0, jsx_runtime_1.jsxs)(SingleSelect_1.SingleSelect, __assign({ label: "Borders", value: settings.borders ? 'true' : 'false', onChange: function (value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); }, style: { paddingBottom: 120 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: 'Yes' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: 'No' }))] }))] })) })));
 }
 exports.SettingsDialog = SettingsDialog;

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_i18next_1 = require("react-i18next");
-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 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, {});
@@ -96,7 +74,7 @@ function SinceCell(props) {
 }
 exports.SinceCell = SinceCell;
 function CapacityCell(props) {
-    var t = (0, react_i18next_1.useTranslation)().t;
+    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
     var settings = (0, Settings_1.useSettings)();
     var ratio = props.used / props.capacity;
     if (props.capacity === 0)
@@ -124,7 +102,7 @@ function CapacityCell(props) {
                             borderRadius: 2,
                         } }) })) })), props.format ? ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: props.format
                     .replace('{used}', props.used.toString())
-                    .replace('{capacity}', props.capacity.toString()) })) : ((0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, { children: [props.used, t(' of '), props.capacity] }))] })));
+                    .replace('{capacity}', props.capacity.toString()) })) : ((0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, { children: [props.used, " ".concat(translations.ofText, " "), props.capacity] }))] })));
 }
 exports.CapacityCell = CapacityCell;
 function BytesCell(props) {

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

@@ -1,15 +1,17 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 export interface IFrameworkTranslations {
-    errorText: string;
     cancelText: string;
     closeText: string;
     confirmText: string;
+    errorText: string;
+    noItemsFound: string;
     pendingText: string;
+    processingText: string;
+    selectedText: string;
     submitText: string;
     submittingText: string;
     successText: string;
-    processingText: string;
-    noItemsFound: string;
+    ofText: string;
 }
 export declare function FrameworkTranslationsProvider(props: {
     children: ReactNode;

package/cjs/useFrameworkTranslations.js

@@ -15,16 +15,18 @@ exports.useFrameworkTranslations = exports.FrameworkTranslationsProvider = void
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var defaultTranslations = {
-    errorText: 'Error',
     cancelText: 'Cancel',
     closeText: 'Close',
     confirmText: 'Confirm',
+    errorText: 'Error',
+    noItemsFound: 'No items found',
     pendingText: 'Pending',
+    processingText: 'Processing',
     submitText: 'Submit',
     submittingText: 'Submitting',
     successText: 'Success',
-    processingText: 'Processing',
-    noItemsFound: 'No items found',
+    selectedText: 'Selected',
+    ofText: 'of',
 };
 var FrameworkTranslationsContext = (0, react_1.createContext)([defaultTranslations, function () { return alert('Use FrameworkTranslationsProvider'); }]);
 function FrameworkTranslationsProvider(props) {

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