@ansible/ansible-ui-framework 0.0.604 → 0.0.606

package/cjs/PageCells/CapacityCell.js

@@ -29,6 +29,7 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CapacityCell = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable i18next/no-literal-string */
 var react_core_1 = require("@patternfly/react-core");
 var Settings_1 = require("../Settings");
 var useFrameworkTranslations_1 = require("../useFrameworkTranslations");

package/cjs/PageCells/DateTimeCell.d.ts

@@ -6,5 +6,4 @@ export declare function SinceCell(props: {
     value: string | number | undefined | null;
     author?: string;
     onClick?: () => void;
-    t?: (t: string) => string;
 }): JSX.Element;

package/cjs/PageCells/DateTimeCell.js

@@ -32,16 +32,16 @@ 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 useFrameworkTranslations_1 = require("../useFrameworkTranslations");
 function DateCell(props) {
     var date = new Date(props.value);
     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 SinceCell(props) {
-    var t = props.t;
-    t = t ? t : function (t) { return t; };
+    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
     var author = props.author, onClick = props.onClick;
-    var _a = __read((0, react_1.useState)(null), 2), dateTime = _a[0], setDateTime = _a[1];
+    var _b = __read((0, react_1.useState)(null), 2), dateTime = _b[0], setDateTime = _b[1];
     (0, react_1.useEffect)(function () {
         if (typeof props.value === 'number') {
             setDateTime(luxon_1.DateTime.fromMillis(props.value).toRelative());
@@ -61,6 +61,6 @@ function SinceCell(props) {
     }, [props.value]);
     if (props.value === undefined)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { whiteSpace: 'nowrap' } }, { children: [dateTime, author && (0, jsx_runtime_1.jsxs)("span", { children: ["\u00A0", t('by'), "\u00A0"] }), onClick ? ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, onClick: onClick }, { children: author }))) : ((0, jsx_runtime_1.jsx)("span", { children: author }))] })));
+    return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { whiteSpace: 'nowrap' } }, { children: [dateTime, author && (0, jsx_runtime_1.jsxs)("span", { children: ["\u00A0", translations.by, "\u00A0"] }), onClick ? ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, onClick: onClick }, { children: author }))) : ((0, jsx_runtime_1.jsx)("span", { children: author }))] })));
 }
 exports.SinceCell = SinceCell;

package/cjs/PageCells/ElapsedTimeCell.js

@@ -18,6 +18,7 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElapsedTimeCell = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable i18next/no-literal-string */
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 function ElapsedTimeCell(props) {

package/cjs/PageColumnModal.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ITableColumn } from './PageTable/PageTable';
-export declare function useColumnModal<T extends object>(columns: ITableColumn<T>[], t?: (t: string) => string): {
+export declare function useColumnModal<T extends object>(columns: ITableColumn<T>[]): {
     openColumnModal: () => void;
     columnModal: JSX.Element;
     managedColumns: ITableColumn<T>[];

package/cjs/PageColumnModal.js

@@ -51,13 +51,14 @@ exports.useColumnModal = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
-function useColumnModal(columns, t) {
-    t = t ? t : function (t) { return t; };
+var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
+function useColumnModal(columns) {
     var _a = __read((0, react_1.useState)(false), 2), columnModalOpen = _a[0], setColumnModalOpen = _a[1];
     var openColumnModal = (0, react_1.useCallback)(function () {
         setColumnModalOpen(true);
     }, []);
     var _b = __read((0, react_1.useState)(function () { return columns; }), 2), managedColumns = _b[0], setManagedColumns = _b[1];
+    var _c = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _c[0];
     (0, react_1.useEffect)(function () {
         setManagedColumns(function (managedColumns) {
             return managedColumns.map(function (managedColumn) { var _a; return (_a = columns.find(function (column) { return column.header === managedColumn.header; })) !== null && _a !== void 0 ? _a : managedColumn; });
@@ -105,7 +106,7 @@ function useColumnModal(columns, t) {
             });
         }
     }, []);
-    var columnModal = ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ variant: react_core_1.ModalVariant.medium, title: "Manage columns", 
+    var columnModal = ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ variant: react_core_1.ModalVariant.medium, title: translations.manageColumns, 
         // description={
         //     <TextContent>
         //         <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>
@@ -115,7 +116,7 @@ function useColumnModal(columns, t) {
         //     </TextContent>
         // }
         isOpen: columnModalOpen, onClose: onClose, actions: [
-            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: t('Close') }), "save"),
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: translations.closeText }), "save"),
             // <Button key="cancel" variant="link" onClick={onClose}>
             //     Cancel
             // </Button>,

package/cjs/PageForm/Inputs/PageFormMultiInput.js

@@ -25,6 +25,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+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 };
 };
@@ -33,9 +49,9 @@ exports.PageFormMultiInput = void 0;
 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_i18next_1 = require("react-i18next");
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importDefault(require("styled-components"));
+var useFrameworkTranslations_1 = require("../../useFrameworkTranslations");
 var capitalize_1 = require("../../utils/capitalize");
 var PageFormGroup_1 = require("./PageFormGroup");
 var ChipHolder = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --pf-c-form-control--Height: auto;\n  background-color: ", ";\n"], ["\n  --pf-c-form-control--Height: auto;\n  background-color: ", ";\n"])), function (props) {
@@ -45,14 +61,14 @@ function PageFormMultiInput(props) {
     var validate = props.validate, selectTitle = props.selectTitle, selectOpen = props.selectOpen, formGroupInputProps = __rest(props, ["validate", "selectTitle", "selectOpen"]);
     var label = props.label, name = props.name, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern;
     var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
-    var t = (0, react_i18next_1.useTranslation)().t;
+    var _c = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _c[0];
     return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
             var _b;
             var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
             var removeItem = function (item) {
                 onChange(value.filter(function (i) { return i.id !== item.id; }));
             };
-            return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message) }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(ChipHolder, __assign({ isDisabled: isSubmitting, className: "pf-c-form-control" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, __assign({ numChips: 5, expandedText: t('Show less'), collapsedText: t("".concat((value === null || value === void 0 ? void 0 : value.length) - 5, " more")) }, { children: value === null || value === void 0 ? void 0 : value.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Chip, __assign({ onClick: function () { return removeItem(item); } }, { children: item.name }), item.id)); }) })) })), selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
+            return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message) }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(ChipHolder, __assign({ isDisabled: isSubmitting, className: "pf-c-form-control" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, __assign({ numChips: 5, expandedText: translations.showLess, collapsedText: translations.countMore.replace('{count}', "".concat((value === null || value === void 0 ? void 0 : value.length) - 5)) }, { children: value === null || value === void 0 ? void 0 : value.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Chip, __assign({ onClick: function () { return removeItem(item); } }, { children: item.name }), item.id)); }) })) })), selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
                                 return selectOpen === null || selectOpen === void 0 ? void 0 : selectOpen(function (items) {
                                     setValue(name, items, {
                                         shouldValidate: true,

package/cjs/PageForm/PageFormAlerts.js

@@ -1,4 +1,20 @@
 "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.PageFormAlerts = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,9 +22,11 @@ var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
 var useBreakPoint_1 = require("../components/useBreakPoint");
+var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
 function PageFormAlerts() {
     var errors = (0, react_hook_form_1.useFormState)().errors;
     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" })) }));
+    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
+    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: translations.pleaseFixValidationErrors, isInline: true, style: { width: '100%', paddingLeft: isMd ? 190 : undefined }, variant: "danger" })) }));
 }
 exports.PageFormAlerts = PageFormAlerts;

package/cjs/PageHeader.d.ts

@@ -18,7 +18,6 @@ export interface PageHeaderProps {
     controls?: ReactNode;
     headerActions?: ReactNode;
     footer?: ReactNode;
-    t?: (t: string) => string;
 }
 /**
  * PageHeader enables the responsive layout of the header.

package/cjs/PageHeader.js

@@ -14,6 +14,22 @@ 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 };
 };
@@ -24,11 +40,12 @@ 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_2 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
 var useBreakPoint_1 = require("./components/useBreakPoint");
 var usePageNavigate_1 = require("./components/usePageNavigate");
 var PageAlerts_1 = require("./PageAlerts");
 require("./PageFramework.css");
-var styled_components_1 = __importDefault(require("styled-components"));
+var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 var PageAlertsDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n"], ["\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n"])));
 function Breadcrumbs(props) {
     var navigate = (0, usePageNavigate_1.usePageNavigate)();
@@ -72,12 +89,11 @@ function PageHeader(props) {
     var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
     var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
     var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
-    var t = props.t;
-    t = t ? t : function (t) { return t; };
+    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navigation && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top dark-1", style: { paddingLeft: 0, paddingTop: 0, paddingBottom: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageNavigation, __assign({ style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 } }, { children: navigation })) })) }))), (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top border-bottom dark-3", style: {
                     paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
                     paddingBottom: xl ? 16 : 12,
-                } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.titleHelpTitle, bodyContent: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [typeof props.titleHelp === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: props.titleHelp })) : (props.titleHelp.map(function (help, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: help }, index)); })), props.titleDocLink && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), variant: "link", onClick: function () { return window.open(props.titleDocLink, '_blank'); }, isInline: true }, { children: t('Documentation') })) }))] })), position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: [title, (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
+                } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.titleHelpTitle, bodyContent: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [typeof props.titleHelp === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: props.titleHelp })) : (props.titleHelp.map(function (help, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: help }, index)); })), props.titleDocLink && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), variant: "link", onClick: function () { return window.open(props.titleDocLink, '_blank'); }, isInline: true }, { children: translations.documentation })) }))] })), position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: [title, (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
                                                             padding: 0,
                                                             marginTop: 1,
                                                             marginLeft: 8,

package/cjs/PageTable/PageTable.d.ts

@@ -40,7 +40,6 @@ export type PageTableProps<T extends object> = {
     emptyStateButtonIcon?: React.ReactNode;
     emptyStateButtonText?: string;
     emptyStateButtonClick?: () => void;
-    t?: (t: string) => string;
     showSelect?: boolean;
     disableTableView?: boolean;
     disableListView?: boolean;

package/cjs/PageTable/PageTable.js

@@ -47,6 +47,7 @@ var LabelsCell_1 = require("../PageCells/LabelsCell");
 var TextCell_1 = require("../PageCells/TextCell");
 var PageColumnModal_1 = require("../PageColumnModal");
 var Settings_1 = require("../Settings");
+var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
 var PagePagination_1 = require("./PagePagination");
 var PageTableCards_1 = require("./PageTableCards");
 var PageTableList_1 = require("./PageTableList");
@@ -107,18 +108,17 @@ function PageTable(props) {
 exports.PageTable = PageTable;
 function PageTableView(props) {
     var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, isSelectMultiple = props.isSelectMultiple, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll, expandedRow = props.expandedRow;
-    var t = props.t;
-    t = t ? t : function (t) { return t; };
+    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
     var showSelect = props.showSelect ||
         (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
             undefined;
     var containerRef = (0, react_1.useRef)(null);
-    var _a = __read((0, react_1.useState)({
+    var _b = __read((0, react_1.useState)({
         left: 0,
         right: 0,
         top: 0,
         bottom: 0,
-    }), 2), scroll = _a[0], setScroll = _a[1];
+    }), 2), scroll = _b[0], setScroll = _b[1];
     var updateScroll = (0, react_1.useCallback)(function (div) {
         if (!div)
             return;
@@ -137,7 +137,7 @@ function PageTableView(props) {
                             ? new Array(perPage).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Td, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }) }, index)); })
                             : pageItems === undefined
                                 ? new Array(Math.min(perPage, itemCount)).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [showSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, {}), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: tableColumns.length }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }))] }, index)); })
-                                : pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), isSelectMultiple: isSelectMultiple, selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Clear all filters and try again.') }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] })))] })));
+                                : pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), isSelectMultiple: isSelectMultiple, selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: translations.noResultsFound })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: translations.noResultsMatchCriteria }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: clearAllFilters }, { children: translations.clearAllFilters })) }))] })))] })));
 }
 function TableHead(props) {
     var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;

package/cjs/PageTable/PageToolbar.js

@@ -50,6 +50,7 @@ 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 styled_components_1 = __importDefault(require("styled-components"));
 var BulkSelector_1 = require("../components/BulkSelector");
 var useBreakPoint_1 = require("../components/useBreakPoint");
 var PageActions_1 = require("../PageActions/PageActions");
@@ -57,7 +58,6 @@ var PageActionType_1 = require("../PageActions/PageActionType");
 var FormGroupSelect_1 = require("../PageForm/Inputs/FormGroupSelect");
 var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
 var PageTableViewType_1 = require("./PageTableViewType");
-var styled_components_1 = __importDefault(require("styled-components"));
 require("./PageToolbar.css");
 var ToolbarGroupsDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
 var SelectionSpan = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0.7;\n"], ["\n  opacity: 0.7;\n"])));
@@ -118,7 +118,7 @@ function PageTableToolbar(props) {
             paddingBottom: sm ? undefined : 8,
             paddingTop: sm ? undefined : 8,
             borderBottom: bottomBorder ? 'thin solid var(--pf-global--BorderColor--100)' : undefined,
-        } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "Select filter" }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { id: "filter-input", filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
+        } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "" }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { id: "filter-input", filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
                                         var _a;
                                         var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
                                         if (!values)

package/cjs/Settings.js

@@ -29,6 +29,7 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsDialog = exports.useSettingsDialog = exports.SettingsProvider = exports.useSettings = exports.SettingsContext = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable i18next/no-literal-string */
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 var PageDialog_1 = require("./PageDialog");

package/cjs/components/BulkSelector.js

@@ -31,10 +31,12 @@ exports.BulkSelector = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
+var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
 var useBreakPoint_1 = require("./useBreakPoint");
 function BulkSelector(props) {
     var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1];
     var isSmallOrLarger = (0, useBreakPoint_1.useBreakpoint)('sm');
+    var _b = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _b[0];
     var pageItems = props.pageItems, selectedItems = props.selectedItems, selectItems = props.selectItems, unselectAll = props.unselectAll;
     var allPageItemsSelected = props.itemCount !== undefined &&
         props.itemCount > 0 &&
@@ -74,8 +76,8 @@ function BulkSelector(props) {
         return ((0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ id: "select-none", onClick: function () {
                 unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
                 setIsOpen(false);
-            } }, { children: (_a = props.selectNoneText) !== null && _a !== void 0 ? _a : 'Select none' }), "select-none"));
-    }, [props.selectNoneText, unselectAll]);
+            } }, { children: (_a = props.selectNoneText) !== null && _a !== void 0 ? _a : translations.selectNone }), "select-none"));
+    }, [props.selectNoneText, translations.selectNone, unselectAll]);
     var selectPageDropdownItem = (0, react_1.useMemo)(function () {
         var _a;
         return ((0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ id: "select-page", onClick: function () {

package/cjs/components/StandardPopover.js

@@ -25,6 +25,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+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 };
 };
@@ -33,16 +49,16 @@ exports.StandardPopover = void 0;
 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_i18next_1 = require("react-i18next");
 var styled_components_1 = __importDefault(require("styled-components"));
+var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
 var PopoverButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: var(--pf-global--spacer--xs);\n  margin: -(var(--pf-global--spacer--xs));\n  font-size: var(--pf-global--FontSize--sm);\n  --pf-c-form__group-label-help--Color: var(--pf-global--Color--200);\n  --pf-c-form__group-label-help--hover--Color: var(--pf-global--Color--100);\n"], ["\n  padding: var(--pf-global--spacer--xs);\n  margin: -(var(--pf-global--spacer--xs));\n  font-size: var(--pf-global--FontSize--sm);\n  --pf-c-form__group-label-help--Color: var(--pf-global--Color--200);\n  --pf-c-form__group-label-help--hover--Color: var(--pf-global--Color--100);\n"])));
 function StandardPopover(props) {
     var _a = props.ariaLabel, ariaLabel = _a === void 0 ? '' : _a, content = props.content, header = props.header, _b = props.id, id = _b === void 0 ? '' : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? '' : _c, rest = __rest(props, ["ariaLabel", "content", "header", "id", "maxWidth"]);
-    var t = (0, react_i18next_1.useTranslation)().t;
+    var _d = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _d[0];
     if (!content) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ bodyContent: content, headerContent: header, hideOnOutsideClick: true, id: id, "data-cy": id, maxWidth: maxWidth }, rest, { children: (0, jsx_runtime_1.jsx)(PopoverButton, __assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t('More information`'), "aria-haspopup": "true", className: "pf-c-form__group-label-help", onClick: function (e) { return e.preventDefault(); }, type: "button" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.HelpIcon, { noVerticalAlign: true }) })) })));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ bodyContent: content, headerContent: header, hideOnOutsideClick: true, id: id, "data-cy": id, maxWidth: maxWidth }, rest, { children: (0, jsx_runtime_1.jsx)(PopoverButton, __assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : translations.moreInformation, "aria-haspopup": "true", className: "pf-c-form__group-label-help", onClick: function (e) { return e.preventDefault(); }, type: "button" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.HelpIcon, { noVerticalAlign: true }) })) })));
 }
 exports.StandardPopover = StandardPopover;
 var templateObject_1;

package/cjs/useFrameworkTranslations.d.ts

@@ -13,6 +13,17 @@ export interface IFrameworkTranslations {
     submitText: string;
     submittingText: string;
     successText: string;
+    manageColumns: string;
+    moreInformation: string;
+    showLess: string;
+    countMore: string;
+    documentation: string;
+    noResultsFound: string;
+    noResultsMatchCriteria: string;
+    clearAllFilters: string;
+    by: string;
+    selectNone: string;
+    pleaseFixValidationErrors: string;
 }
 export declare function FrameworkTranslationsProvider(props: {
     children: ReactNode;

package/cjs/useFrameworkTranslations.js

@@ -28,6 +28,17 @@ var defaultTranslations = {
     submitText: 'Submit',
     submittingText: 'Submitting',
     successText: 'Success',
+    manageColumns: 'Manage columns',
+    moreInformation: 'More information',
+    showLess: 'Show less',
+    countMore: '{count} more',
+    documentation: 'Documnetation',
+    noResultsFound: 'No results found',
+    noResultsMatchCriteria: 'No results match this filter criteria. Clear all filters and try again.',
+    clearAllFilters: 'Clear all filters',
+    by: 'by',
+    selectNone: 'Select none',
+    pleaseFixValidationErrors: 'Please fix validation errors.',
 };
 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": "A framework for building applications using PatternFly.",
-  "version": "0.0.604",
+  "version": "0.0.606",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",