@ansible/ansible-ui-framework 0.0.378 → 0.0.380

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SelectProps } from '@patternfly/react-core';
+import { PageFormGroupProps } from './PageFormGroup';
+export type FormGroupSelectProps = Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'onSelect' | 'placeholder' | 'value' | 'isDisabled'> & PageFormGroupProps & {
+    isReadOnly?: boolean;
+};
+/** A PatternFly FormGroup with a PatternFly Select */
+export declare function FormGroupSelect(props: FormGroupSelectProps): JSX.Element;

package/cjs/{components/PageSelect.js → PageForm/Inputs/FormGroupSelect.js}

@@ -27,28 +27,23 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageSelect = void 0;
+exports.FormGroupSelect = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 var PageFormGroup_1 = require("./PageFormGroup");
-/** Wrapper over a PatternFly Select.
- * Simplifies the PatternFly Select.
- * Supports a PageFormGroup with label if label is specififed.
- */
-function PageSelect(props) {
-    var _a;
-    var children = props.children, footer = props.footer, helperTextInvalid = props.helperTextInvalid, isCreatable = props.isCreatable, isGrouped = props.isGrouped, isReadonly = props.readOnly, label = props.label, onSelect = props.onSelect, placeholder = props.placeholder, value = props.value;
-    var _b = __read((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
+/** A PatternFly FormGroup with a PatternFly Select */
+function FormGroupSelect(props) {
+    var children = props.children, helperTextInvalid = props.helperTextInvalid, isReadOnly = props.isReadOnly, onSelect = props.onSelect, value = props.value;
+    var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
     var onToggle = (0, react_1.useCallback)(function () { return setOpen(function (open) { return !open; }); }, []);
     var onSelectHandler = (0, react_1.useCallback)(function (event, value) {
         if (typeof value === 'string')
-            onSelect(value, event);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value);
         else
-            onSelect(value.toString(), event);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value.toString());
         setOpen(false);
     }, [onSelect]);
-    var id = (_a = props.id) !== null && _a !== void 0 ? _a : label === null || label === void 0 ? void 0 : label.toLocaleLowerCase().split(' ').join('-');
-    return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ "aria-describedby": id ? "".concat(id, "-form-group") : undefined, footer: footer, id: id, isCreatable: isCreatable, isGrouped: isGrouped, isInputFilterPersisted: isCreatable, isOpen: open, maxHeight: 280, onSelect: onSelectHandler, onToggle: onToggle, placeholderText: placeholder, selections: value, validated: helperTextInvalid ? 'error' : undefined, variant: react_core_1.SelectVariant.single, isDisabled: isReadonly }, { children: children })) })));
+    return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({}, props, { label: undefined, variant: react_core_1.SelectVariant.single, "aria-describedby": props.id ? "".concat(props.id, "-form-group") : undefined, selections: value, onSelect: onSelectHandler, isOpen: open, onToggle: onToggle, maxHeight: 280, validated: helperTextInvalid ? 'error' : undefined, isDisabled: props.isDisabled || isReadOnly }, { children: children })) })));
 }
-exports.PageSelect = PageSelect;
+exports.FormGroupSelect = FormGroupSelect;

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

@@ -0,0 +1,19 @@
+import { ChangeEvent } from 'react';
+import { FormGroupSelectProps } from './FormGroupSelect';
+export interface IFormGroupSelectOption<T> {
+    group?: string;
+    label: string;
+    description?: string;
+    value: T;
+}
+export type FormGroupSelectOptionProps<T> = {
+    options: IFormGroupSelectOption<T>[];
+    onSelect: (value: T | undefined, event: React.MouseEvent<Element, MouseEvent> | ChangeEvent<Element>) => void;
+    value: T | undefined;
+} & Omit<FormGroupSelectProps, 'onSelect' | 'value' | 'children'>;
+/**
+ * A PatternFly FormGroup with a PatternFly Select but using IFormGroupSelectOptions for the options.
+ *
+ * This supports easy grouping and options that have values that are objects and not just strings.
+ */
+export declare function FormGroupSelectOption<T>(props: FormGroupSelectOptionProps<T>): JSX.Element;

package/cjs/{components/PageSelectOption.js → PageForm/Inputs/FormGroupSelectOption.js}

@@ -11,16 +11,21 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageSelectOption = void 0;
+exports.FormGroupSelectOption = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
-var PageSelect_1 = require("./PageSelect");
-function PageSelectOption(props) {
+var FormGroupSelect_1 = require("./FormGroupSelect");
+/**
+ * A PatternFly FormGroup with a PatternFly Select but using IFormGroupSelectOptions for the options.
+ *
+ * This supports easy grouping and options that have values that are objects and not just strings.
+ */
+function FormGroupSelectOption(props) {
     var onSelect = props.onSelect, value = props.value;
-    var onSelectHandler = (0, react_1.useCallback)(function (label, event) {
+    var onSelectHandler = (0, react_1.useCallback)(function (event, label) {
         var _a;
-        onSelect((_a = props.options.find(function (option) { return option.label === label; })) === null || _a === void 0 ? void 0 : _a.value, event);
+        onSelect((_a = props.options.find(function (option) { return option.label === label.toString(); })) === null || _a === void 0 ? void 0 : _a.value, event);
     }, [onSelect, props.options]);
     var options = props.options;
     options.sort(function (l, r) {
@@ -49,8 +54,8 @@ function PageSelectOption(props) {
     var isGrouped = Object.keys(groups).length > 1 ||
         (Object.keys(groups).length === 1 && Object.keys(groups)[0] !== '');
     var selected = props.options.find(function (option) { return option.value === value; });
-    return ((0, jsx_runtime_1.jsx)(PageSelect_1.PageSelect, __assign({}, props, { value: selected === null || selected === void 0 ? void 0 : selected.label, onSelect: onSelectHandler, isGrouped: isGrouped }, { children: !isGrouped
+    return ((0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({}, props, { value: selected === null || selected === void 0 ? void 0 : selected.label, onSelect: onSelectHandler, isGrouped: isGrouped }, { children: !isGrouped
             ? options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: option.label, label: option.label, description: option.description }, { children: option.label }), option.label)); })
             : 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: option.label, label: option.label, description: option.description }, { children: option.label }), option.label)); }) }), group)); }) })));
 }
-exports.PageSelectOption = PageSelectOption;
+exports.FormGroupSelectOption = FormGroupSelectOption;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TextAreaProps } from '@patternfly/react-core';
+import { PageFormGroupProps } from './PageFormGroup';
+export type FormGroupTextAreaProps = Pick<TextAreaProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
+/** A PatternFly FormGroup with a PatternFly TextArea */
+export declare function FormGroupTextArea(props: FormGroupTextAreaProps): JSX.Element;

package/cjs/PageForm/Inputs/FormGroupTextArea.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 __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.FormGroupTextArea = 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 PageFormGroup_1 = require("./PageFormGroup");
+/** A PatternFly FormGroup with a PatternFly TextArea */
+function FormGroupTextArea(props) {
+    var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
+    return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextArea, __assign({}, props, { id: props.id, label: undefined, "aria-describedby": "".concat(props.id, "-form-group"), validated: props.helperTextInvalid ? 'error' : undefined })), props.type === 'password' && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, isDisabled: props.isDisabled || props.isReadOnly }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
+}
+exports.FormGroupTextArea = FormGroupTextArea;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TextInputProps } from '@patternfly/react-core';
+import { PageFormGroupProps } from './PageFormGroup';
+export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
+/** A PatternFly FormGroup with a PatternFly TextInput */
+export declare function FormGroupTextInput(props: FormGroupTextInputProps): JSX.Element;

package/cjs/PageForm/Inputs/FormGroupTextInput.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 __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.FormGroupTextInput = 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 PageFormGroup_1 = require("./PageFormGroup");
+/** A PatternFly FormGroup with a PatternFly TextInput */
+function FormGroupTextInput(props) {
+    var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
+    return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInput, __assign({}, props, { id: props.id, label: undefined, "aria-describedby": "".concat(props.id, "-form-group"), validated: props.helperTextInvalid ? 'error' : undefined, type: props.type === 'password' ? (showSecret ? 'text' : 'password') : props.type })), props.type === 'password' && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, isDisabled: props.isDisabled || props.isReadOnly }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
+}
+exports.FormGroupTextInput = FormGroupTextInput;

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

@@ -0,0 +1,9 @@
+import { FormGroupProps } from '@patternfly/react-core';
+import { ReactNode } from 'react';
+export type PageFormGroupProps = Pick<FormGroupProps, 'children' | 'label' | 'helperText' | 'helperTextInvalid' | 'isRequired'> & {
+    id: string;
+    labelHelpTitle?: string;
+    labelHelp?: ReactNode;
+};
+/** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
+export declare function PageFormGroup(props: PageFormGroupProps): JSX.Element;

package/cjs/{components → PageForm/Inputs}/PageFormGroup.js

@@ -14,14 +14,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageFormGroup = 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");
 /** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
 function PageFormGroup(props) {
-    var _a;
     var children = props.children, helperText = props.helperText, helperTextInvalid = props.helperTextInvalid, isRequired = props.isRequired, label = props.label;
-    if (!label) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
-    }
-    var id = (_a = props.id) !== null && _a !== void 0 ? _a : label === null || label === void 0 ? void 0 : label.toLocaleLowerCase().split(' ').join('-');
-    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ fieldId: id, helperText: helperText, helperTextInvalid: helperTextInvalid, id: "".concat(id, "-form-group"), isRequired: isRequired, label: label, validated: helperTextInvalid ? 'error' : undefined }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(props.id, "-form-group"), fieldId: props.id, label: label, helperText: helperText, helperTextInvalid: helperTextInvalid, validated: helperTextInvalid ? 'error' : undefined, isRequired: isRequired, labelIcon: props.labelHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.labelHelpTitle, bodyContent: props.labelHelp, position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) })) }))) : undefined }, { children: children })));
 }
 exports.PageFormGroup = PageFormGroup;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FormGroupSelectProps } from './FormGroupSelect';
+export type PageFormSelectProps = {
+    name: string;
+} & Omit<FormGroupSelectProps, 'onSelect' | 'value'>;
+/** PatternFly Select wrapper for use with react-hook-form */
+export declare function PageFormSelect(props: PageFormSelectProps): JSX.Element;

package/cjs/PageForm/Inputs/PageFormSelect.js

@@ -0,0 +1,26 @@
+"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.PageFormSelect = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_hook_form_1 = require("react-hook-form");
+var FormGroupSelect_1 = require("./FormGroupSelect");
+/** PatternFly Select wrapper for use with react-hook-form */
+function PageFormSelect(props) {
+    var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
+            var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
+            return ((0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({}, props, { value: value, onSelect: function (_, value) { return onChange(value); }, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
+        } }));
+}
+exports.PageFormSelect = PageFormSelect;

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

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

package/cjs/PageForm/Inputs/PageFormSelectOption.js

@@ -14,16 +14,13 @@ 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");
-/**
- * A PageSelectOption for use in PageForms
- */
+var FormGroupSelectOption_1 = require("./FormGroupSelectOption");
+/**  Select wrapper for use with react-hook-form */
 function PageFormSelectOption(props) {
     var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
-    var name = props.name;
-    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, render: function (_a) {
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
             var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
-            return ((0, jsx_runtime_1.jsx)(PageSelectOption_1.PageSelectOption, __assign({}, props, { value: value, onSelect: onChange, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, readOnly: isSubmitting })));
+            return ((0, jsx_runtime_1.jsx)(FormGroupSelectOption_1.FormGroupSelectOption, __assign({}, props, { value: value, onSelect: function (_, value) { return onChange(value); }, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
         } }));
 }
 exports.PageFormSelectOption = PageFormSelectOption;

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

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-export declare function PageFormTextArea(props: {
-    id?: string;
-    label: string;
+import { FormGroupTextAreaProps } from './FormGroupTextArea';
+export type PageFormTextAreaProps = {
     name: string;
-    helperText?: string;
-    required?: boolean;
-    secret?: boolean;
-    autoFocus?: boolean;
-    placeholder?: string;
-}): JSX.Element;
+} & Omit<FormGroupTextAreaProps, 'onChange' | 'value'>;
+/** PatternFly TextArea wrapper for use with react-hook-form */
+export declare function PageFormTextArea(props: PageFormTextAreaProps): JSX.Element;

package/cjs/PageForm/Inputs/PageFormTextArea.js

@@ -13,15 +13,14 @@ var __assign = (this && this.__assign) || function () {
 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");
+var FormGroupTextArea_1 = require("./FormGroupTextArea");
+/** PatternFly TextArea wrapper for use with 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 })) })));
+    var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
+            var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
+            return ((0, jsx_runtime_1.jsx)(FormGroupTextArea_1.FormGroupTextArea, __assign({}, props, { value: value, onChange: onChange, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
+        } }));
 }
 exports.PageFormTextArea = PageFormTextArea;

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

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-export declare function PageFormTextInput(props: {
-    id?: string;
-    label: string;
+import { FormGroupTextInputProps } from './FormGroupTextInput';
+export type PageFormTextInputProps = {
     name: string;
-    helperText?: string;
-    required?: boolean;
-    secret?: boolean;
-    autoFocus?: boolean;
-    placeholder?: string;
-}): JSX.Element;
+} & Omit<FormGroupTextInputProps, 'onChange' | 'value'>;
+/** PatternFly TextInput wrapper for use with react-hook-form */
+export declare function PageFormTextInput(props: PageFormTextInputProps): JSX.Element;

package/cjs/PageForm/Inputs/PageFormTextInput.js

@@ -10,39 +10,21 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 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");
+var FormGroupTextInput_1 = require("./FormGroupTextInput");
+/** PatternFly TextInput wrapper for use with 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, {}) })))] }) })));
+    var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
+            var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, props, { value: value, onChange: onChange, helperTextInvalid: (error === null || error === void 0 ? void 0 : error.type) === 'required'
+                        ? typeof props.label === 'string'
+                            ? "".concat(props.label, " is required")
+                            : 'Required'
+                        : error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })) }));
+        } }));
 }
 exports.PageFormTextInput = PageFormTextInput;

package/cjs/PageForm/PageForm.js

@@ -36,7 +36,7 @@ var react_hook_form_1 = require("react-hook-form");
 var Scrollable_1 = require("../components/Scrollable");
 var useBreakPoint_1 = require("../components/useBreakPoint");
 var Settings_1 = require("../Settings");
-var PageFormFromSchema_1 = require("./PageFormFromSchema");
+var PageFormSchema_1 = require("./PageFormSchema");
 function PageForm(props) {
     var schema = props.schema, defaultValue = props.defaultValue;
     var form = (0, react_hook_form_1.useForm)({
@@ -72,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)(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: {
+            } }, { 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)(PageFormSchema_1.PageFormSchema, { 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)(PageFormSchema_1.PageFormSchema, { 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/PageFormSchema.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { StringOptions } from '@sinclair/typebox';
+import { JSONSchema6 } from 'json-schema';
+import { IFormGroupSelectOption } from './Inputs/FormGroupSelectOption';
+export declare function PageFormSchema(props: {
+    schema: JSONSchema6;
+    base?: string;
+}): JSX.Element;
+export type TypeTextInputOptions = StringOptions<string> & {
+    placeholder?: string;
+};
+export declare function TypeTextInput(options: TypeTextInputOptions): import("@sinclair/typebox").TString<string>;
+export declare function TypeSecretInput(options: TypeTextInputOptions): import("@sinclair/typebox").TString<string>;
+export type TypeSelectOptions<T> = StringOptions<string> & {
+    placeholder?: string;
+    options: IFormGroupSelectOption<T>[];
+};
+export declare function TypeSelect<T extends string | number>(options: TypeSelectOptions<T>): import("@sinclair/typebox").TString<string>;

package/cjs/PageForm/PageFormSchema.js

@@ -0,0 +1,132 @@
+"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.TypeSelect = exports.TypeSecretInput = exports.TypeTextInput = exports.PageFormSchema = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var typebox_1 = require("@sinclair/typebox");
+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 PageFormSchema(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    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 description = typeof property.description === 'string' ? property.description : undefined;
+        var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
+        var prop = property;
+        prop.errorMessage = (_a = prop.errorMessage) !== null && _a !== void 0 ? _a : {};
+        switch (property.type) {
+            case 'string':
+                switch (prop.variant) {
+                    case 'select':
+                        {
+                            if (!prop.placeholder) {
+                                prop.placeholder = "Enter ".concat(((_b = property.title) !== null && _b !== void 0 ? _b : propertyName).toLowerCase());
+                            }
+                            if (!prop.enum) {
+                                prop.enum = (_c = prop.options) === null || _c === void 0 ? void 0 : _c.map(function (option) { return option.value; });
+                            }
+                        }
+                        break;
+                    default:
+                        {
+                            if (!prop.placeholder) {
+                                prop.placeholder = "Enter ".concat(((_d = property.title) !== null && _d !== void 0 ? _d : propertyName).toLowerCase());
+                            }
+                            if (property.minLength) {
+                                if (!prop.errorMessage.minLength) {
+                                    prop.errorMessage.minLength = "".concat((_e = property.title) !== null && _e !== void 0 ? _e : propertyName, " must be at least ").concat(property.minLength, " characters.");
+                                }
+                            }
+                            else if (required) {
+                                property.minLength = 1;
+                                prop.errorMessage.minLength = "".concat((_f = property.title) !== null && _f !== void 0 ? _f : propertyName, " is required");
+                            }
+                            if (property.maxLength) {
+                                if (!prop.errorMessage.maxLength) {
+                                    prop.errorMessage.maxLength = "".concat((_g = property.title) !== null && _g !== void 0 ? _g : propertyName, " must be less than ").concat(property.maxLength, " characters.");
+                                }
+                            }
+                        }
+                        break;
+                }
+                break;
+        }
+        var placeholder = property.placeholder;
+        placeholder = typeof placeholder === 'string' ? placeholder : undefined;
+        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, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, options: formSelectProps.options, footer: formSelectProps.footer, labelHelpTitle: title, labelHelp: description }, 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, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required }, base + propertyName));
+                        break;
+                    case 'secret':
+                        p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, type: "password" }, base + propertyName));
+                        break;
+                    default:
+                        p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: 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)(PageFormSchema, { schema: property, base: base + propertyName }, propertyName));
+                break;
+            }
+        }
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: p });
+}
+exports.PageFormSchema = PageFormSchema;
+function TypeTextInput(options) {
+    return typebox_1.Type.String(__assign({}, options));
+}
+exports.TypeTextInput = TypeTextInput;
+function TypeSecretInput(options) {
+    return typebox_1.Type.String(__assign(__assign({}, options), { variant: 'secret' }));
+}
+exports.TypeSecretInput = TypeSecretInput;
+function TypeSelect(options) {
+    return typebox_1.Type.String(__assign(__assign({}, options), { variant: 'select' }));
+}
+exports.TypeSelect = TypeSelect;

package/cjs/PageTable/PageToolbar.js

@@ -44,10 +44,10 @@ var react_core_1 = require("@patternfly/react-core");
 var react_icons_1 = require("@patternfly/react-icons");
 var react_1 = require("react");
 var BulkSelector_1 = require("../components/BulkSelector");
-var PageSelect_1 = require("../components/PageSelect");
 var useBreakPoint_1 = require("../components/useBreakPoint");
 var PageActions_1 = require("../PageActions/PageActions");
 var PageActionType_1 = require("../PageActions/PageActionType");
+var FormGroupSelect_1 = require("../PageForm/Inputs/FormGroupSelect");
 var Settings_1 = require("../Settings");
 var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
 var PageTableViewType_1 = require("./PageTableViewType");
@@ -112,7 +112,7 @@ function PageTableToolbar(props) {
             paddingBottom: sm ? undefined : 8,
             paddingTop: sm ? undefined : 8,
             backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-        } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(PageSelect_1.PageSelect, __assign({ onSelect: setSeletedFilter, value: selectedFilter }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
+        } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
                                         var _a;
                                         var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
                                         if (!values)

package/cjs/Settings.js

@@ -31,8 +31,8 @@ exports.SettingsDialog = exports.useSettingsDialog = exports.SettingsProvider =
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
-var PageSelect_1 = require("./components/PageSelect");
 var PageDialog_1 = require("./PageDialog");
+var FormGroupSelect_1 = require("./PageForm/Inputs/FormGroupSelect");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 exports.SettingsContext = (0, react_1.createContext)([
     {},
@@ -110,14 +110,14 @@ function SettingsDialog(props) {
     var _f = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _f[0];
     return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ title: "Settings", isOpen: props.open, onClose: onClose, variant: react_core_1.ModalVariant.medium, tabIndex: 0, actions: [
             (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: translations.closeText }), "close"),
-        ] }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, __assign({ isHorizontal: settings.formLayout === 'horizontal' }, { children: [(0, jsx_runtime_1.jsxs)(PageSelect_1.PageSelect, __assign({ label: "Theme", value: (_a = settings.theme) !== null && _a !== void 0 ? _a : 'system', onSelect: function (theme) {
+        ] }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, __assign({ isHorizontal: settings.formLayout === 'horizontal' }, { children: [(0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "theme", label: "Theme", value: (_a = settings.theme) !== null && _a !== void 0 ? _a : 'system', onSelect: function (_, theme) {
                         return setSettings(__assign(__assign({}, settings), { theme: theme }));
-                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: 'System default' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: 'Light' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: 'Dark' }))] })), (0, jsx_runtime_1.jsxs)(PageSelect_1.PageSelect, __assign({ label: "Table Layout", value: (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable', onSelect: function (tableLayout) {
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: 'System default' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: 'Light' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: 'Dark' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "table-layout", label: "Table Layout", value: (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable', onSelect: function (_, tableLayout) {
                         return setSettings(__assign(__assign({}, settings), { tableLayout: tableLayout }));
-                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: 'Comfortable' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: 'Compact' }))] })), (0, jsx_runtime_1.jsxs)(PageSelect_1.PageSelect, __assign({ label: "Form Columns", value: (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple', onSelect: function (formColumns) {
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: 'Comfortable' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: 'Compact' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-columns", label: "Form Columns", value: (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple', onSelect: function (_, formColumns) {
                         return setSettings(__assign(__assign({}, settings), { formColumns: formColumns }));
-                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(PageSelect_1.PageSelect, __assign({ label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onSelect: function (formLayout) {
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-layout", label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onSelect: function (_, formLayout) {
                         return setSettings(__assign(__assign({}, settings), { formLayout: formLayout }));
-                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] })), (0, jsx_runtime_1.jsxs)(PageSelect_1.PageSelect, __assign({ label: "Borders", value: settings.borders ? 'true' : 'false', onSelect: function (value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: 'Yes' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: 'No' }))] }))] })) })));
+                    } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "borders", label: "Borders", value: settings.borders ? 'true' : 'false', onSelect: function (_, value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: 'Yes' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: 'No' }))] }))] })) })));
 }
 exports.SettingsDialog = SettingsDialog;

package/cjs/index.d.ts

@@ -5,8 +5,6 @@ export * from './components/Collapse';
 export * from './components/Details';
 export * from './components/Help';
 export * from './components/icons/RunningIcon';
-export * from './components/PageSelect';
-export * from './components/PageSelectOption';
 export * from './components/pfcolors';
 export * from './components/Scrollable';
 export * from './components/useBreakPoint';
@@ -24,6 +22,8 @@ export * from './PageCells/LabelsCell';
 export * from './PageCells/TextCell';
 export * from './PageDataList';
 export * from './PageDialog';
+export * from './PageForm/Inputs/FormGroupSelect';
+export * from './PageForm/Inputs/FormGroupSelectOption';
 export * from './PageForm/Inputs/PageFormSelectOption';
 export * from './PageForm/PageForm';
 export * from './PageFramework';

package/cjs/index.js

@@ -21,8 +21,6 @@ __exportStar(require("./components/Collapse"), exports);
 __exportStar(require("./components/Details"), exports);
 __exportStar(require("./components/Help"), exports);
 __exportStar(require("./components/icons/RunningIcon"), exports);
-__exportStar(require("./components/PageSelect"), exports);
-__exportStar(require("./components/PageSelectOption"), exports);
 __exportStar(require("./components/pfcolors"), exports);
 __exportStar(require("./components/Scrollable"), exports);
 __exportStar(require("./components/useBreakPoint"), exports);
@@ -40,6 +38,8 @@ __exportStar(require("./PageCells/LabelsCell"), exports);
 __exportStar(require("./PageCells/TextCell"), exports);
 __exportStar(require("./PageDataList"), exports);
 __exportStar(require("./PageDialog"), exports);
+__exportStar(require("./PageForm/Inputs/FormGroupSelect"), exports);
+__exportStar(require("./PageForm/Inputs/FormGroupSelectOption"), exports);
 __exportStar(require("./PageForm/Inputs/PageFormSelectOption"), exports);
 __exportStar(require("./PageForm/PageForm"), exports);
 __exportStar(require("./PageFramework"), exports);

package/package.json

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

package/cjs/PageForm/PageFormFromSchema.d.ts

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

package/cjs/PageForm/PageFormFromSchema.js

@@ -1,67 +0,0 @@
-"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/components/PageFormGroup.d.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-export type PageFormGroupProps = {
-    children: ReactNode;
-    helperText?: ReactNode | undefined;
-    helperTextInvalid?: ReactNode | undefined;
-    id?: string;
-    isRequired?: boolean;
-    label?: string;
-};
-/** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
-export declare function PageFormGroup(props: PageFormGroupProps): JSX.Element;

package/cjs/components/PageSelect.d.ts

@@ -1,16 +0,0 @@
-import React, { ChangeEvent, ReactNode } from 'react';
-import { PageFormGroupProps } from './PageFormGroup';
-export type PageSelectProps = {
-    footer?: ReactNode;
-    isCreatable?: boolean;
-    isGrouped?: boolean | undefined;
-    onSelect: (value: string, event: React.MouseEvent<Element, MouseEvent> | ChangeEvent<Element>) => void;
-    placeholder?: string;
-    value: string | undefined;
-    readOnly?: boolean;
-} & PageFormGroupProps;
-/** Wrapper over a PatternFly Select.
- * Simplifies the PatternFly Select.
- * Supports a PageFormGroup with label if label is specififed.
- */
-export declare function PageSelect(props: PageSelectProps): JSX.Element;

package/cjs/components/PageSelectOption.d.ts

@@ -1,14 +0,0 @@
-import { ChangeEvent } from 'react';
-import { PageSelectProps } from './PageSelect';
-export interface IPageSelectOption<T> {
-    group?: string;
-    label: string;
-    description?: string;
-    value: T;
-}
-export type PageSelectOptionProps<T> = {
-    options: IPageSelectOption<T>[];
-    onSelect: (value: T | undefined, event: React.MouseEvent<Element, MouseEvent> | ChangeEvent<Element>) => void;
-    value: T | undefined;
-} & Omit<PageSelectProps, 'onSelect' | 'value' | 'children'>;
-export declare function PageSelectOption<T>(props: PageSelectOptionProps<T>): JSX.Element;