@ansible/ansible-ui-framework 0.0.376 → 0.0.377

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;

package/cjs/PageForm/PageForm.d.ts

@@ -1,134 +1,11 @@
 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 '../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;
-export declare function FormPageAlerts(): JSX.Element;
-export declare function FormPageButtons(props: {
-    submitText: string;
-    cancelText: string;
-    onCancel: () => void;
-}): JSX.Element;
-export declare function FormInputCheckbox(props: {
-    label: string;
-    name: string;
-    helperText?: string;
-    required?: boolean;
-    description?: ReactNode;
-    body?: ReactNode;
-}): JSX.Element;
-export declare function FormTextInput(props: {
-    id?: string;
-    label: string;
-    name: string;
-    helperText?: string;
-    required?: boolean;
-    secret?: boolean;
-    autoFocus?: boolean;
-    placeholder?: string;
-}): JSX.Element;
-export declare function FormTextArea(props: {
-    id?: string;
-    label: string;
-    name: string;
-    helperText?: string;
-    required?: boolean;
-    secret?: boolean;
-    autoFocus?: boolean;
-    placeholder?: string;
-}): JSX.Element;
-export declare function FormNumberInput(props: {
-    id?: string;
-    label: string;
-    name: string;
-    helperText?: string;
-    required?: boolean;
-    autoFocus?: boolean;
-    min?: number;
-    max?: number;
-    valueLabel?: string;
-}): JSX.Element;
-export declare function FormBooleanInput(props: {
-    id?: string;
-    label: string;
-    name: string;
-    helperText?: string;
-    required?: boolean;
-    autoFocus?: boolean;
-}): JSX.Element;
-export interface FormInputPopover {
-    title?: string;
-    body?: string[];
-    link?: {
-        label: string;
-        url: string;
-    };
-}
-export interface FormSelectOption<T> {
-    group?: string;
-    label: string;
-    description?: string;
-    value: T;
-}
-export interface FormSelectProps<T> {
-    id?: string;
-    name: string;
-    label: string;
-    popover?: FormInputPopover;
-    placeholder?: string;
-    help?: string;
-    required?: boolean;
-    footer?: {
-        label?: string;
-        click?: () => void;
-    };
-    create?: boolean;
-    options: FormSelectOption<T>[];
-}
-export declare function FormSelect<T>(props: FormSelectProps<T>): JSX.Element;
-export declare function FormSelectInput(props: {
-    label: string;
-    name: string;
-    helperText?: string;
-    required?: boolean;
-    children?: ReactNode;
-    footer?: ReactNode;
-}): JSX.Element;
-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;
-export declare function FormSchema(props: {
-    schema: JSONSchema6;
-    base?: string;
-}): JSX.Element;
+import { DeepPartial, ErrorOption, FieldPath, FieldValues } from 'react-hook-form';
 export declare function PageForm<T extends object>(props: {
     schema?: JSONSchema6;
     children?: ReactNode;
     submitText: string;
-    onSubmit: FormPageSubmitHandler<T>;
+    onSubmit: PageFormSubmitHandler<T>;
     cancelText: string;
     onCancel?: () => void;
     defaultValue?: DeepPartial<T>;
@@ -136,7 +13,7 @@ export declare function PageForm<T extends object>(props: {
     singleColumn?: boolean;
     disableScrolling?: boolean;
 }): JSX.Element;
-export type FormPageSubmitHandler<T extends FieldValues> = (data: T, setError: (error: string) => void, setFieldError: (fieldName: FieldPath<T>, error: ErrorOption) => void) => Promise<unknown>;
+export type PageFormSubmitHandler<T extends FieldValues> = (data: T, setError: (error: string) => void, setFieldError: (fieldName: FieldPath<T>, error: ErrorOption) => void) => Promise<unknown>;
 export declare function PageFormSubmitButton(props: {
     children: ReactNode;
     style?: CSSProperties;

package/cjs/PageForm/PageForm.js

@@ -26,297 +26,17 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageFormCancelButton = exports.PageFormSubmitButton = exports.PageForm = exports.FormSchema = exports.FormTextSelect = exports.FormSelectInput = exports.FormSelect = exports.FormBooleanInput = exports.FormNumberInput = exports.FormTextArea = exports.FormTextInput = exports.FormInputCheckbox = exports.FormPageButtons = exports.FormPageAlerts = exports.FormPage = void 0;
+exports.PageFormCancelButton = exports.PageFormSubmitButton = exports.PageForm = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ajv_1 = require("@hookform/resolvers/ajv");
 var react_core_1 = require("@patternfly/react-core");
-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 Scrollable_1 = require("../components/Scrollable");
 var useBreakPoint_1 = require("../components/useBreakPoint");
-var PageHeader_1 = require("../PageHeader");
 var Settings_1 = require("../Settings");
-var PageFormSelectOption_1 = require("./PageFormSelectOption");
-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 === FormPageAlerts)
-            return false;
-        if (child.type === FormPageButtons)
-            return false;
-        return true;
-    });
-    var buttons = children.find(function (child) {
-        if (!(0, react_1.isValidElement)(child))
-            return false;
-        if (child.type === FormPageButtons)
-            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;
-function FormPageAlerts() {
-    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" })) }));
-}
-exports.FormPageAlerts = FormPageAlerts;
-function FormPageButtons(props) {
-    var errors = (0, react_hook_form_1.useFormState)().errors;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(FormPageAlerts, {}), (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    maxHeight: '100%',
-                    borderTop: 'thin solid var(--pf-global--BorderColor--100)',
-                }, variant: "light" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [errors && Object.keys(errors).length > 0 ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Please fix validation errors' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "submit", isAriaDisabled: true }, { children: props.submitText })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "submit" }, { children: props.submitText }))), (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "button", variant: "link", onClick: props.onCancel }, { children: props.cancelText }))] })) }))] }));
-}
-exports.FormPageButtons = FormPageButtons;
-function FormInputCheckbox(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.FormInputCheckbox = FormInputCheckbox;
-function FormTextInput(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.FormTextInput = FormTextInput;
-function FormTextArea(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.FormTextArea = FormTextArea;
-function FormNumberInput(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.FormNumberInput = FormNumberInput;
-function FormBooleanInput(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.FormBooleanInput = FormBooleanInput;
-function FormSelect(props) {
-    var _a, _b;
-    var _c = (0, react_hook_form_1.useController)({ name: props.name }), field = _c.field, fieldError = _c.fieldState.error;
-    var _d = __read((0, react_1.useState)(false), 2), open = _d[0], setOpen = _d[1];
-    var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.name;
-    var error = fieldError !== undefined && fieldError.message;
-    var options = props.options;
-    options.sort(function (l, r) {
-        var _a, _b, _c, _d;
-        if (((_a = l.group) !== null && _a !== void 0 ? _a : '') < ((_b = r.group) !== null && _b !== void 0 ? _b : ''))
-            return -1;
-        if (((_c = l.group) !== null && _c !== void 0 ? _c : '') > ((_d = r.group) !== null && _d !== void 0 ? _d : ''))
-            return 1;
-        if (l.label < r.label)
-            return -1;
-        if (l.label > r.label)
-            return 1;
-        return 0;
-    });
-    var selectedIndex = options.findIndex(function (option) { return (0, fast_deep_equal_1.default)(option.value, field.value); });
-    var groups = options.reduce(function (groups, option) {
-        var _a;
-        var group = (_a = option.group) !== null && _a !== void 0 ? _a : '';
-        var optionsArray = groups[group];
-        if (!optionsArray) {
-            optionsArray = [];
-            groups[group] = optionsArray;
-        }
-        optionsArray.push(option);
-        return groups;
-    }, {});
-    var isGrouped = Object.keys(groups).length > 1 ||
-        (Object.keys(groups).length === 1 && Object.keys(groups)[0] !== '');
-    var onSelect = (0, react_1.useCallback)(function (_event, value) {
-        if (typeof value !== 'string') {
-            value = value.toString();
-        }
-        var selectedIndex = Number(value);
-        var selected = options[selectedIndex].value;
-        field.onChange(selected);
-        setOpen(false);
-    }, [field, options]);
-    var index = 0;
-    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperTextInvalid: error, helperText: props.help, isRequired: props.required, validated: error ? 'error' : undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, variant: react_core_1.SelectVariant.single, "aria-describedby": "".concat(id, "-helper"), validated: error ? 'error' : undefined }, field, { isOpen: open, onToggle: function () { return setOpen(!open); }, selections: selectedIndex === -1 ? '' : selectedIndex.toString(), onSelect: onSelect, isCreatable: props.create, isInputFilterPersisted: props.create, placeholderText: props.placeholder, isGrouped: isGrouped, ref: field.ref, footer: ((_b = props.footer) === null || _b === void 0 ? void 0 : _b.label) && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, onClick: function () {
-                    var _a, _b;
-                    setOpen(false);
-                    (_b = (_a = props.footer) === null || _a === void 0 ? void 0 : _a.click) === null || _b === void 0 ? void 0 : _b.call(_a);
-                } }, { children: props.footer.label }))), maxHeight: 280 }, { children: !isGrouped
-                ? options.map(function (option, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: index.toString(), label: option.label, description: option.description }, { children: option.label }), index)); })
-                : Object.keys(groups).map(function (group) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectGroup, __assign({ label: group }, { children: groups[group].map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: (index++).toString(), label: option.label, description: option.description }, { children: option.label }), index)); }) }), group)); }) })) })));
-}
-exports.FormSelect = FormSelect;
-function FormSelectInput(props) {
-    var control = (0, react_hook_form_1.useFormContext)().control;
-    var _a = (0, react_hook_form_1.useController)({ control: control, name: props.name }), field = _a.field, error = _a.fieldState.error;
-    var menuItems = react_1.Children.toArray(props.children)
-        .filter(function (child) { return (0, react_1.isValidElement)(child) && child.type === react_core_1.SelectOption; })
-        .map(function (child) {
-        if ((0, react_1.isValidElement)(child) && child.type === react_core_1.SelectOption) {
-            return ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, { children: child.props.children }, child.props.value));
-        }
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    });
-    var _b = __read((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
-    var id = props.name;
-    var errorMessage;
-    switch (error === null || error === void 0 ? void 0 : error.type) {
-        case 'required':
-            errorMessage = props.label + ' is required.';
-            break;
-        default:
-            errorMessage = error === null || error === void 0 ? void 0 : error.type;
-            break;
-    }
-    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ fieldId: id, label: props.label, helperTextInvalid: errorMessage, helperText: props.helperText, isRequired: props.required, validated: errorMessage ? 'error' : undefined }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.TextInputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupMain, __assign({}, field)), (0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupUtilities, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "plain", onClick: function () { return setOpen(!open); }, "aria-label": "Options menu" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.CaretDownIcon, {}) })) }), open && ((0, jsx_runtime_1.jsx)(react_core_1.Menu, __assign({ style: { position: 'absolute', right: 0, top: 36, width: '100%' } }, { children: menuItems })))] }) })));
-}
-exports.FormSelectInput = FormSelectInput;
-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;
-function FormSchema(props) {
-    var schema = props.schema;
-    var base = props.base ? props.base + '.' : '';
-    var p = [];
-    for (var propertyName in schema.properties) {
-        var property = schema.properties[propertyName];
-        switch (property) {
-            case true:
-            case false:
-                continue;
-        }
-        var title = typeof property.title === 'string' ? property.title : propertyName;
-        var placeholder = property.placeholder;
-        placeholder = typeof placeholder === 'string' ? placeholder : undefined;
-        var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
-        switch (property.type) {
-            case 'string': {
-                switch (property.variant) {
-                    case 'select': {
-                        if ('options' in property) {
-                            var formSelectProps = property;
-                            p.push((0, jsx_runtime_1.jsx)(PageFormSelectOption_1.PageFormSelectOption, { name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, options: formSelectProps.options, footer: formSelectProps.footer }, base + propertyName));
-                        }
-                        else {
-                            p.push((0, jsx_runtime_1.jsx)(FormTextSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, selectTitle: property.selectTitle, selectValue: property.selectValue, selectOpen: property.selectOpen }, base + propertyName));
-                        }
-                        break;
-                    }
-                    case 'textarea':
-                        p.push((0, jsx_runtime_1.jsx)(FormTextArea, { name: base + propertyName, label: title, placeholder: placeholder, required: required }, base + propertyName));
-                        break;
-                    case 'secret':
-                        p.push((0, jsx_runtime_1.jsx)(FormTextInput, { name: base + propertyName, label: title, placeholder: placeholder, required: required, secret: true }, base + propertyName));
-                        break;
-                    default:
-                        p.push((0, jsx_runtime_1.jsx)(FormTextInput, { name: base + propertyName, label: title, placeholder: placeholder, required: required }, base + propertyName));
-                        break;
-                }
-                break;
-            }
-            case 'number': {
-                p.push((0, jsx_runtime_1.jsx)(FormNumberInput, { name: base + propertyName, label: title, required: required, min: property.min, max: property.max, valueLabel: property.valueLabel }, base + propertyName));
-                break;
-            }
-            case 'boolean': {
-                p.push((0, jsx_runtime_1.jsx)(FormBooleanInput, { name: base + propertyName, label: title, required: required }, base + propertyName));
-                break;
-            }
-            case 'object': {
-                p.push((0, jsx_runtime_1.jsx)(FormSchema, { schema: property, base: base + propertyName }, propertyName));
-                break;
-            }
-        }
-    }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: p });
-}
-exports.FormSchema = FormSchema;
+var PageFormFromSchema_1 = require("./PageFormFromSchema");
 function PageForm(props) {
     var schema = props.schema, defaultValue = props.defaultValue;
     var form = (0, react_hook_form_1.useForm)({
@@ -352,7 +72,7 @@ function PageForm(props) {
                 flexGrow: 1,
                 overflow: props.disableScrolling ? undefined : 'hidden',
                 gap: 0,
-            } }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { 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)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { 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] })) })) }))), error && ((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)("div", __assign({ style: {
+            } }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { 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)(PageFormFromSchema_1.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)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { 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)(PageFormFromSchema_1.FormSchema, { schema: props.schema }), props.children] })) })) }))), error && ((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)("div", __assign({ style: {
                         backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--400)' : undefined,
                         padding: 24,
                     } }, { 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/PageForm/PageFormAlerts.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function PageFormAlerts(): JSX.Element;

package/cjs/PageForm/PageFormAlerts.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageFormAlerts = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var react_hook_form_1 = require("react-hook-form");
+var useBreakPoint_1 = require("../components/useBreakPoint");
+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" })) }));
+}
+exports.PageFormAlerts = PageFormAlerts;

package/cjs/PageForm/PageFormButtons.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function PageFormButtons(props: {
+    submitText: string;
+    cancelText: string;
+    onCancel: () => void;
+}): JSX.Element;

package/cjs/PageForm/PageFormButtons.js

@@ -0,0 +1,28 @@
+"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.PageFormButtons = 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");
+var PageFormAlerts_1 = require("./PageFormAlerts");
+function PageFormButtons(props) {
+    var errors = (0, react_hook_form_1.useFormState)().errors;
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(PageFormAlerts_1.PageFormAlerts, {}), (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    maxHeight: '100%',
+                    borderTop: 'thin solid var(--pf-global--BorderColor--100)',
+                }, variant: "light" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [errors && Object.keys(errors).length > 0 ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Please fix validation errors' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "submit", isAriaDisabled: true }, { children: props.submitText })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "submit" }, { children: props.submitText }))), (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "button", variant: "link", onClick: props.onCancel }, { children: props.cancelText }))] })) }))] }));
+}
+exports.PageFormButtons = PageFormButtons;

package/cjs/PageForm/PageFormFromSchema.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { JSONSchema6 } from 'json-schema';
+export declare function FormSchema(props: {
+    schema: JSONSchema6;
+    base?: string;
+}): JSX.Element;

package/cjs/PageForm/PageFormFromSchema.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSchema = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var PageFormSelectOption_1 = require("./Inputs/PageFormSelectOption");
+var PageFormSlider_1 = require("./Inputs/PageFormSlider");
+var PageFormSwitch_1 = require("./Inputs/PageFormSwitch");
+var PageFormTextArea_1 = require("./Inputs/PageFormTextArea");
+var PageFormTextInput_1 = require("./Inputs/PageFormTextInput");
+var PageFormTextSelect_1 = require("./Inputs/PageFormTextSelect");
+function FormSchema(props) {
+    var schema = props.schema;
+    var base = props.base ? props.base + '.' : '';
+    var p = [];
+    for (var propertyName in schema.properties) {
+        var property = schema.properties[propertyName];
+        switch (property) {
+            case true:
+            case false:
+                continue;
+        }
+        var title = typeof property.title === 'string' ? property.title : propertyName;
+        var placeholder = property.placeholder;
+        placeholder = typeof placeholder === 'string' ? placeholder : undefined;
+        var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
+        switch (property.type) {
+            case 'string': {
+                switch (property.variant) {
+                    case 'select': {
+                        if ('options' in property) {
+                            var formSelectProps = property;
+                            p.push((0, jsx_runtime_1.jsx)(PageFormSelectOption_1.PageFormSelectOption, { name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, options: formSelectProps.options, footer: formSelectProps.footer }, base + propertyName));
+                        }
+                        else {
+                            p.push((0, jsx_runtime_1.jsx)(PageFormTextSelect_1.FormTextSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, selectTitle: property.selectTitle, selectValue: property.selectValue, selectOpen: property.selectOpen }, base + propertyName));
+                        }
+                        break;
+                    }
+                    case 'textarea':
+                        p.push((0, jsx_runtime_1.jsx)(PageFormTextArea_1.PageFormTextArea, { name: base + propertyName, label: title, placeholder: placeholder, required: required }, base + propertyName));
+                        break;
+                    case 'secret':
+                        p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { name: base + propertyName, label: title, placeholder: placeholder, required: required, secret: true }, base + propertyName));
+                        break;
+                    default:
+                        p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { name: base + propertyName, label: title, placeholder: placeholder, required: required }, base + propertyName));
+                        break;
+                }
+                break;
+            }
+            case 'number': {
+                p.push((0, jsx_runtime_1.jsx)(PageFormSlider_1.PageFormSlider, { name: base + propertyName, label: title, required: required, min: property.min, max: property.max, valueLabel: property.valueLabel }, base + propertyName));
+                break;
+            }
+            case 'boolean': {
+                p.push((0, jsx_runtime_1.jsx)(PageFormSwitch_1.PageFormSwitch, { name: base + propertyName, label: title, required: required }, base + propertyName));
+                break;
+            }
+            case 'object': {
+                p.push((0, jsx_runtime_1.jsx)(FormSchema, { schema: property, base: base + propertyName }, propertyName));
+                break;
+            }
+        }
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: p });
+}
+exports.FormSchema = FormSchema;

package/cjs/PageForm/PageFormInputPopover.d.ts

@@ -0,0 +1,8 @@
+export interface PageFormInputPopover {
+    title?: string;
+    body?: string[];
+    link?: {
+        label: string;
+        url: string;
+    };
+}

package/cjs/PageForm/PageFormInputPopover.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/index.d.ts

@@ -24,8 +24,8 @@ export * from './PageCells/LabelsCell';
 export * from './PageCells/TextCell';
 export * from './PageDataList';
 export * from './PageDialog';
+export * from './PageForm/Inputs/PageFormSelectOption';
 export * from './PageForm/PageForm';
-export * from './PageForm/PageFormSelectOption';
 export * from './PageFramework';
 export * from './PageHeader';
 export * from './PageLayout';

package/cjs/index.js

@@ -40,8 +40,8 @@ __exportStar(require("./PageCells/LabelsCell"), exports);
 __exportStar(require("./PageCells/TextCell"), exports);
 __exportStar(require("./PageDataList"), exports);
 __exportStar(require("./PageDialog"), exports);
+__exportStar(require("./PageForm/Inputs/PageFormSelectOption"), exports);
 __exportStar(require("./PageForm/PageForm"), exports);
-__exportStar(require("./PageForm/PageFormSelectOption"), exports);
 __exportStar(require("./PageFramework"), exports);
 __exportStar(require("./PageHeader"), exports);
 __exportStar(require("./PageLayout"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.376",
+  "version": "0.0.377",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {