@ansible/ansible-ui-framework 0.0.375 → 0.0.377

package/cjs/BulkActionDialog.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ITableColumn } from './PageTable';
+import { ITableColumn } from './PageTable/PageTable';
 export interface BulkActionDialogProps<T extends object> {
     /** The title of the model.
      * @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs

package/cjs/BulkActionDialog.js

@@ -94,9 +94,9 @@ var p_limit_1 = __importDefault(require("p-limit"));
 var react_1 = require("react");
 var pfcolors_1 = require("./components/pfcolors");
 var PageDialog_1 = require("./PageDialog");
-var PageTable_1 = require("./PageTable");
+var PageTable_1 = require("./PageTable/PageTable");
+var useTableItems_1 = require("./PageTable/useTableItems");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
-var useTableItems_1 = require("./useTableItems");
 /**
  * BulkActionDialog is a generic dialog for process bulk actions.
  *

package/cjs/BulkConfirmationDialog.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BulkActionDialogProps } from './BulkActionDialog';
-import { ITableColumn } from './PageTable';
+import { ITableColumn } from './PageTable/PageTable';
 export interface BulkConfirmationDialog<T extends object> {
     /** The title of the model.
      * @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs

package/cjs/BulkConfirmationDialog.js

@@ -33,9 +33,9 @@ var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 var BulkActionDialog_1 = require("./BulkActionDialog");
 var PageDialog_1 = require("./PageDialog");
-var PageTable_1 = require("./PageTable");
+var PageTable_1 = require("./PageTable/PageTable");
+var useTableItems_1 = require("./PageTable/useTableItems");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
-var useTableItems_1 = require("./useTableItems");
 function BulkConfirmationDialog(props) {
     var title = props.title, items = props.items, keyFn = props.keyFn, confirmationColumns = props.confirmationColumns, onConfirm = props.onConfirm, onClose = props.onClose, confirmText = props.confirmText, actionButtonText = props.actionButtonText, isDanger = props.isDanger;
     var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];

package/cjs/PageColumnModal.d.ts

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

package/cjs/PageDataList.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { IPageAction } from './PageActions/PageAction';
 import { PageHeaderProps } from './PageHeader';
-import { IToolbarFilter } from './PageToolbar';
+import { IToolbarFilter } from './PageTable/PageToolbar';
 export type DataListPageProps<T extends object> = PageHeaderProps & PageDataListProps<T> & {
     error?: Error;
 };

package/cjs/PageDataList.js

@@ -22,7 +22,7 @@ var PageActionType_1 = require("./PageActions/PageActionType");
 var PageBody_1 = require("./PageBody");
 var PageHeader_1 = require("./PageHeader");
 var PageLayout_1 = require("./PageLayout");
-var PagePagination_1 = require("./PagePagination");
+var PagePagination_1 = require("./PageTable/PagePagination");
 var Settings_1 = require("./Settings");
 function DataListPage(props) {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: (0, jsx_runtime_1.jsx)(PageDataList, __assign({}, props)) })] }) }));

package/cjs/PageForm/FormPage.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { SubmitHandler, UseFormReturn } from 'react-hook-form';
+import { PartialDeep } from 'type-fest';
+import { PageHeaderProps } from '../PageHeader';
+export type FormPageProps<T extends object> = PageHeaderProps & {
+    children?: ReactNode;
+    defaultValues?: PartialDeep<T>;
+    onSubmit: SubmitHandler<PartialDeep<T>>;
+    schema?: unknown;
+    isVertical?: boolean;
+    onCancel?: () => void;
+    submitText?: string;
+    hideHeader?: boolean;
+    noPadding?: boolean;
+    form: UseFormReturn;
+};
+export declare function FormPage<T extends object>(props: FormPageProps<T>): JSX.Element;

package/cjs/PageForm/FormPage.js

@@ -0,0 +1,73 @@
+"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);
+};
+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.FormPage = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var Scrollable_1 = require("../components/Scrollable");
+var PageHeader_1 = require("../PageHeader");
+var Settings_1 = require("../Settings");
+var PageFormAlerts_1 = require("./PageFormAlerts");
+var PageFormButtons_1 = require("./PageFormButtons");
+function FormPage(props) {
+    // const methods = useForm<PartialDeep<T>>({
+    //     defaultValues: props.defaultValues,
+    //     resolver: ajvResolver(props.schema, { strict: false }),
+    // })
+    var children = react_1.Children.toArray(props.children);
+    var inputs = children.filter(function (child) {
+        if (!(0, react_1.isValidElement)(child))
+            return false;
+        if (child.type === PageFormAlerts_1.PageFormAlerts)
+            return false;
+        if (child.type === PageFormButtons_1.PageFormButtons)
+            return false;
+        return true;
+    });
+    var buttons = children.find(function (child) {
+        if (!(0, react_1.isValidElement)(child))
+            return false;
+        if (child.type === PageFormButtons_1.PageFormButtons)
+            return true;
+        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)(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
+                onSubmit: props.form.handleSubmit(props.onSubmit), isHorizontal: props.isVertical ? false : settings.formLayout === 'horizontal', style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    overflow: 'hidden',
+                } }, { 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({ padding: { default: props.noPadding ? 'noPadding' : 'padding' }, isWidthLimited: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.FormSection, { children: inputs }) })) })), buttons] }))] }));
+}
+exports.FormPage = FormPage;

package/cjs/PageForm/Inputs/PageFormCheckbox.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare function PageFormCheckbox(props: {
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    description?: ReactNode;
+    body?: ReactNode;
+}): JSX.Element;

package/cjs/PageForm/Inputs/PageFormCheckbox.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageFormCheckbox = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_hook_form_1 = require("react-hook-form");
+function PageFormCheckbox(props) {
+    var control = (0, react_hook_form_1.useFormContext)().control;
+    var field = (0, react_hook_form_1.useController)({ control: control, name: props.name }).field;
+    var id = props.name;
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, __assign({ label: props.label, id: id, "aria-describedby": "".concat(id, "-helper"), description: props.description, body: field.value ? props.body : undefined }, field, { isChecked: !!field.value })));
+}
+exports.PageFormCheckbox = PageFormCheckbox;

package/cjs/PageForm/{PageFormSelectOption.d.ts → Inputs/PageFormSelectOption.d.ts}

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { PageSelectOptionProps } from '../components/PageSelectOption';
-export type PageFormSelectOption<T> = {
+import { PageSelectOptionProps } from '../../components/PageSelectOption';
+export type PageFormSelectOptionProps<T> = {
     name: string;
 } & Omit<PageSelectOptionProps<T>, 'onSelect' | 'value'>;
 /**
  * A PageSelectOption for use in PageForms
  */
-export declare function PageFormSelectOption<T>(props: PageFormSelectOption<T>): JSX.Element;
+export declare function PageFormSelectOption<T>(props: PageFormSelectOptionProps<T>): JSX.Element;

package/cjs/PageForm/{PageFormSelectOption.js → Inputs/PageFormSelectOption.js}

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageFormSelectOption = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_hook_form_1 = require("react-hook-form");
-var PageSelectOption_1 = require("../components/PageSelectOption");
+var PageSelectOption_1 = require("../../components/PageSelectOption");
 /**
  * A PageSelectOption for use in PageForms
  */

package/cjs/PageForm/Inputs/PageFormSlider.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare function PageFormSlider(props: {
+    id?: string;
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    autoFocus?: boolean;
+    min?: number;
+    max?: number;
+    valueLabel?: string;
+}): JSX.Element;

package/cjs/PageForm/Inputs/PageFormSlider.js

@@ -0,0 +1,36 @@
+"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.PageFormSlider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_hook_form_1 = require("react-hook-form");
+function PageFormSlider(props) {
+    var _a, _b, _c;
+    var isSubmitting = (0, react_hook_form_1.useFormContext)().formState.isSubmitting;
+    var _d = (0, react_hook_form_1.useController)({ name: props.name }), field = _d.field, fieldState = _d.fieldState;
+    var error = fieldState.error;
+    var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.name;
+    var max = (_b = props.max) !== null && _b !== void 0 ? _b : 100;
+    var min = (_c = props.min) !== null && _c !== void 0 ? _c : 1;
+    var value = Number(field.value);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ alignItems: { default: 'alignItemsFlexStart' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ alignItems: { default: 'alignItemsFlexStart' }, spaceItems: { default: 'spaceItemsSm' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingTop: 6, minWidth: 20, textAlign: 'right' } }, { children: Math.floor((max - min) * value + min) })), props.valueLabel && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingTop: 6, minWidth: 40 } }, { children: props.valueLabel })))] })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Slider, { id: id, "aria-describedby": "".concat(id, "-form-group"), 
+                        // isRequired={props.required}
+                        // validated={error?.message ? 'error' : undefined}
+                        autoFocus: props.autoFocus, 
+                        // {...registration}
+                        value: (max - min) * value + min, onChange: function (v) { return field.onChange((v - min) / (max - min)); }, max: max, min: min, 
+                        // innerRef={registration.ref}
+                        isDisabled: isSubmitting, showBoundaries: false }) }))] })) })));
+}
+exports.PageFormSlider = PageFormSlider;

package/cjs/PageForm/Inputs/PageFormSwitch.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare function PageFormSwitch(props: {
+    id?: string;
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    autoFocus?: boolean;
+}): JSX.Element;

package/cjs/PageForm/Inputs/PageFormSwitch.js

@@ -0,0 +1,34 @@
+"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.PageFormSwitch = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_hook_form_1 = require("react-hook-form");
+function PageFormSwitch(props) {
+    var _a;
+    var isSubmitting = (0, react_hook_form_1.useFormContext)().formState.isSubmitting;
+    var _b = (0, react_hook_form_1.useController)({ name: props.name }), field = _b.field, fieldState = _b.fieldState;
+    var error = fieldState.error;
+    var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.name;
+    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Switch, { id: id, "aria-describedby": "".concat(id, "-form-group"), 
+            // isRequired={props.required}
+            // validated={error?.message ? 'error' : undefined}
+            autoFocus: props.autoFocus, 
+            // placeholder={props.placeholder}
+            // {...registration}
+            isChecked: typeof field.value === 'boolean' ? field.value : false, onChange: function (e) { return field.onChange(e); }, 
+            // innerRef={registration.ref}
+            isDisabled: isSubmitting }) })));
+}
+exports.PageFormSwitch = PageFormSwitch;

package/cjs/PageForm/Inputs/PageFormTextArea.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare function PageFormTextArea(props: {
+    id?: string;
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    secret?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+}): JSX.Element;

package/cjs/PageForm/Inputs/PageFormTextArea.js

@@ -0,0 +1,27 @@
+"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.PageFormTextArea = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_hook_form_1 = require("react-hook-form");
+function PageFormTextArea(props) {
+    var _a;
+    var _b = (0, react_hook_form_1.useFormContext)(), register = _b.register, isSubmitting = _b.formState.isSubmitting;
+    var registration = register(props.name);
+    var fieldState = (0, react_hook_form_1.useController)({ name: props.name }).fieldState;
+    var error = fieldState.error;
+    var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.name;
+    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message }, { children: (0, jsx_runtime_1.jsx)(react_core_1.TextArea, __assign({ id: id, type: props.secret ? 'password' : 'text', "aria-describedby": "".concat(id, "-form-group"), isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder }, registration, { onChange: function (v, e) { return void registration.onChange(e); }, resizeOrientation: "vertical", isReadOnly: isSubmitting })) })));
+}
+exports.PageFormTextArea = PageFormTextArea;

package/cjs/PageForm/Inputs/PageFormTextInput.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare function PageFormTextInput(props: {
+    id?: string;
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    secret?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+}): JSX.Element;

package/cjs/PageForm/Inputs/PageFormTextInput.js

@@ -0,0 +1,48 @@
+"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);
+};
+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.PageFormTextInput = 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_1 = require("react");
+var react_hook_form_1 = require("react-hook-form");
+function PageFormTextInput(props) {
+    var _a;
+    var _b = (0, react_hook_form_1.useFormContext)(), register = _b.register, isSubmitting = _b.formState.isSubmitting;
+    var registration = register(props.name);
+    var fieldState = (0, react_hook_form_1.useController)({ name: props.name }).fieldState;
+    var error = fieldState.error;
+    var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.name;
+    var _c = __read((0, react_1.useState)(false), 2), showSecret = _c[0], setShowSecret = _c[1];
+    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, helperTextInvalid: 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)(react_core_1.TextInput, __assign({ id: id, type: props.secret && !showSecret ? 'password' : 'text', "aria-describedby": "".concat(id, "-form-group"), isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder }, registration, { onChange: function (v, e) {
+                        void registration.onChange(e);
+                    }, isReadOnly: isSubmitting })), props.secret && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, "aria-label": "Options menu", isDisabled: isSubmitting }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
+}
+exports.PageFormTextInput = PageFormTextInput;

package/cjs/PageForm/Inputs/PageFormTextSelect.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare function FormTextSelect<T>(props: {
+    id?: string;
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    secret?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    selectTitle?: string;
+    selectValue?: (item: T) => string | number;
+    selectOpen?: (callback: (item: T) => void, title: string) => void;
+}): JSX.Element;

package/cjs/PageForm/Inputs/PageFormTextSelect.js

@@ -0,0 +1,42 @@
+"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.FormTextSelect = 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_1 = require("react");
+var react_hook_form_1 = require("react-hook-form");
+function FormTextSelect(props) {
+    var _a;
+    var _b = (0, react_hook_form_1.useFormContext)(), register = _b.register, setValue = _b.setValue, isSubmitting = _b.formState.isSubmitting;
+    var registration = register(props.name);
+    var fieldState = (0, react_hook_form_1.useController)({ name: props.name }).fieldState;
+    var error = fieldState.error;
+    var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.name;
+    id = id.split('.').join('-');
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, helperTextInvalid: 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)(react_core_1.TextInput, __assign({ id: id, type: props.secret ? 'password' : 'text', "aria-describedby": "".concat(id, "-form-group"), isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder }, registration, { onChange: function (v, e) {
+                            void registration.onChange(e);
+                        }, 
+                        // innerRef={registration.ref}
+                        isReadOnly: isSubmitting })), (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
+                            var _a;
+                            return (_a = props.selectOpen) === null || _a === void 0 ? void 0 : _a.call(props, function (item) {
+                                if (props.selectValue) {
+                                    var value = props.selectValue(item);
+                                    setValue(props.name, value, { shouldValidate: true });
+                                }
+                            }, props.selectTitle);
+                        }, "aria-label": "Options menu", isDisabled: isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.SearchIcon, {}) }))] }) })) }));
+}
+exports.FormTextSelect = FormTextSelect;