@ansible/ansible-ui-framework 0.0.190

package/cjs/framework/PageForm.js

@@ -0,0 +1,376 @@
+"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;
+};
+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;
+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 _1 = require(".");
+var Scrollable_1 = require("./components/Scrollable");
+var Settings_1 = require("./Settings");
+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)(_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, _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);
+                    }, 
+                    // innerRef={registration.ref}
+                    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, 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)(FormSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: 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;
+function PageForm(props) {
+    var schema = props.schema, defaultValue = props.defaultValue;
+    var form = (0, react_hook_form_1.useForm)({
+        defaultValues: defaultValue !== null && defaultValue !== void 0 ? defaultValue : {},
+        resolver: schema
+            ? (0, ajv_1.ajvResolver)(schema, { strict: false, addFormats: true })
+            : undefined,
+    });
+    var handleSubmit = form.handleSubmit, setFieldError = form.setError;
+    var _a = __read((0, react_1.useState)(''), 2), error = _a[0], setError = _a[1];
+    var isMd = (0, _1.useBreakpoint)('md');
+    var _b = __read((0, react_1.useContext)(Settings_1.SettingsContext), 1), settings = _b[0];
+    var isHorizontal = props.isVertical ? false : settings.formLayout === 'horizontal';
+    var multipleColumns = props.singleColumn ? false : settings.formColumns === 'multiple';
+    var sm = multipleColumns ? (isHorizontal ? 12 : 12) : 12;
+    var md = multipleColumns ? (isHorizontal ? 12 : 6) : 12;
+    var lg = multipleColumns ? (isHorizontal ? 6 : 6) : 12;
+    var xl = multipleColumns ? (isHorizontal ? 6 : 6) : 12;
+    var xl2 = multipleColumns ? (isHorizontal ? 4 : 4) : 12;
+    var maxWidth = multipleColumns ? undefined : isHorizontal ? 960 : 800;
+    return (
+    // <PageBody>
+    (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, form, { children: (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: handleSubmit(function (data) {
+                setError('');
+                return props.onSubmit(data, setError, setFieldError);
+            }), isHorizontal: isHorizontal, style: {
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: 1,
+                overflow: props.disableScrolling ? undefined : 'hidden',
+                gap: 0,
+            } }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, 
+                    // padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
+                    variant: "light", style: { maxWidth: maxWidth } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(FormSchema, { schema: props.schema }), props.children] })) }))) : ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, __assign({ style: { height: '100%', flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, 
+                        // padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
+                        variant: "light", style: { maxWidth: maxWidth } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(FormSchema, { schema: props.schema }), props.children] })) })) }))), (0, jsx_runtime_1.jsx)(_1.Collapse, __assign({ open: !!error }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Alert, { variant: "danger", title: error !== null && error !== void 0 ? error : '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } }) })), props.onCancel ? ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: false, style: {
+                        borderTop: 'thin solid var(--pf-global--BorderColor--100)',
+                        backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--400)' : undefined,
+                    }, variant: "light" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [(0, jsx_runtime_1.jsx)(PageFormSubmitButton, { children: props.submitText }), props.onCancel && ((0, jsx_runtime_1.jsx)(PageFormCancelButton, __assign({ onCancel: props.onCancel }, { children: props.cancelText })))] })) }))) : ((0, jsx_runtime_1.jsx)(PageFormSubmitButton, __assign({ style: { marginTop: 48 } }, { children: props.submitText })))] })) }))
+    // </PageBody>
+    );
+}
+exports.PageForm = PageForm;
+function PageFormSubmitButton(props) {
+    var _a = (0, react_hook_form_1.useFormState)(), isSubmitting = _a.isSubmitting, errors = _a.errors;
+    var hasErrors = errors && Object.keys(errors).length > 0;
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: "Please fix errors", trigger: hasErrors ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "submit", isDisabled: isSubmitting, isLoading: isSubmitting, isDanger: hasErrors, variant: hasErrors ? 'secondary' : undefined, style: props.style }, { children: props.children })) })));
+}
+exports.PageFormSubmitButton = PageFormSubmitButton;
+function PageFormCancelButton(props) {
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "button", variant: "link", onClick: props.onCancel }, { children: props.children })));
+}
+exports.PageFormCancelButton = PageFormCancelButton;

package/cjs/framework/PageFramework.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageFrameworkProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var PageDialog_1 = require("./PageDialog");
+var Settings_1 = require("./Settings");
+var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
+function PageFrameworkProvider(props) {
+    return ((0, jsx_runtime_1.jsx)(useFrameworkTranslations_1.FrameworkTranslationsProvider, { children: (0, jsx_runtime_1.jsx)(Settings_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(PageDialog_1.PageDialogProvider, { children: props.children }) }) }));
+}
+exports.PageFrameworkProvider = PageFrameworkProvider;

package/cjs/framework/PageHeader.js

@@ -0,0 +1,96 @@
+"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.PageHeader = 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_router_dom_1 = require("react-router-dom");
+var useBreakPoint_1 = require("./components/useBreakPoint");
+var Settings_1 = require("./Settings");
+function Breadcrumbs(props) {
+    var history = (0, react_router_dom_1.useNavigate)();
+    if (!props.breadcrumbs)
+        return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Breadcrumb, __assign({ style: props.style }, { children: props.breadcrumbs.map(function (breadcrumb) {
+            var _a;
+            if (!breadcrumb.label)
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+            return ((0, jsx_runtime_1.jsx)(react_core_1.BreadcrumbItem, __assign({ id: breadcrumb.id, component: breadcrumb.component, onClick: breadcrumb.to ? function () { return breadcrumb.to && history(breadcrumb.to); } : undefined, style: {
+                    color: breadcrumb.to ? 'var(--pf-c-breadcrumb__link--Color)' : undefined,
+                    cursor: breadcrumb.to ? 'pointer' : undefined,
+                }, isActive: breadcrumb.to === undefined }, { children: breadcrumb.label }), (_a = breadcrumb.id) !== null && _a !== void 0 ? _a : breadcrumb.label));
+        }) })));
+}
+/**
+ * PageHeader enables the responsive layout of the header.
+ *
+ * @param {Breadcrumb[]} breadcrumbs - The breadcrumbs for the page.
+ * @param {string} title - The title of the page.
+ * @param {string} titleHelpTitle - The title of help popover.
+ * @param {ReactNode} titleHelp - The content for the help popover.
+ * @param {string} description - The description of the page.
+ * @param {ReactNode} controls - Support for extra page controls.
+ * @param {ReactNode} headerActions - The actions for the page.
+ *
+ * @example
+ * <Page>
+ *   <PageLayout>
+ *     <PageHeader
+ *       breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
+ *       title='Page title'
+ *       description='Page description'
+ *       headerActions={<PageActions actions={actions} />}
+ *     />
+ *     <PageBody />...</PageBody>
+ *   </PageLayout>
+ * <Page>
+ */
+function PageHeader(props) {
+    var navigation = props.navigation, breadcrumbs = props.breadcrumbs, title = props.title, description = props.description, controls = props.controls, pageActions = props.headerActions;
+    var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
+    var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
+    var xxl = (0, useBreakPoint_1.useBreakpoint)('xxl');
+    var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
+    // const isSmLarger = useBreakpoint('sm')
+    var settings = (0, Settings_1.useSettings)();
+    var t = props.t;
+    t = t ? t : function (t) { return t; };
+    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, style: {
+                    paddingLeft: 0,
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    borderBottom: settings.borders
+                        ? 'thin solid var(--pf-global--BorderColor--100)'
+                        : undefined,
+                    backgroundColor: 'var(--pf-global--BackgroundColor--100)',
+                } }, { 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 }, hasOverflowScroll: true }, { children: navigation })) })) }))), (isMdOrLarger || !navigation) && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
+                    paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
+                    paddingBottom: xl ? 20 : 12,
+                    borderBottom: settings.borders
+                        ? 'thin solid var(--pf-global--BorderColor--100)'
+                        : undefined,
+                    backgroundColor: settings.theme === 'dark'
+                        ? xxl
+                            ? 'var(--pf-global--BackgroundColor--300)'
+                            : 'var(--pf-global--BackgroundColor--400)'
+                        : undefined,
+                } }, { 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: {
+                                                    padding: 0,
+                                                    marginTop: 1,
+                                                    marginLeft: 8,
+                                                    verticalAlign: 'top',
+                                                } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) }))] })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: title })))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "160px" }) }))), isMdOrLarger && description && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: description }) })))] })), title && (pageActions || controls) && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' } }, { children: [controls && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: controls })), pageActions && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: pageActions })] })))] })) })))] }));
+}
+exports.PageHeader = PageHeader;

package/cjs/framework/PageLayout.js

@@ -0,0 +1,41 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayout = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_i18next_1 = require("react-i18next");
+var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
+/**
+ * PageLayout enables the responsive layout of the page.
+ *
+ * @example
+ * <Page>
+ *   <PageLayout>
+ *     <PageHeader />
+ *     <PageBody />...</PageBody>
+ *   </PageLayout>
+ * <Page>
+ */
+function PageLayout(props) {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: t('Error') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+                maxHeight: '100%',
+            } }, { children: props.children })) })));
+}
+exports.PageLayout = PageLayout;

package/cjs/framework/PagePagination.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.PagePagination = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var useBreakPoint_1 = require("./components/useBreakPoint");
+var Settings_1 = require("./Settings");
+function PagePagination(props) {
+    var setPage = props.setPage, setPerPage = props.setPerPage;
+    var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
+    var onPerPageSelect = (0, react_1.useCallback)(function (_event, perPage) { return setPerPage(perPage); }, [setPerPage]);
+    var sm = (0, useBreakPoint_1.useBreakpoint)('md');
+    var settings = (0, Settings_1.useSettings)();
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: __assign(__assign({}, props.style), { borderTop: 'thin solid var(--pf-global--BorderColor--100)', boxShadow: 'none', zIndex: 301, marginTop: -1, paddingTop: sm ? 6 : undefined, paddingBottom: sm ? 6 : undefined, backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
+}
+exports.PagePagination = PagePagination;