@ansible/ansible-ui-framework 0.0.425 → 0.0.426

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

@@ -1,6 +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;
+export type FormGroupTextAreaProps = Pick<TextAreaProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label' | 'minLength' | 'maxLength'> & PageFormGroupProps;
 /** A PatternFly FormGroup with a PatternFly TextArea */
 export declare function FormGroupTextArea(props: FormGroupTextAreaProps): JSX.Element;

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

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

package/cjs/PageForm/Inputs/FormGroupTextInput.js

@@ -47,7 +47,12 @@ 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];
-    var _helperTextInvalid = props.helperTextInvalid, textInputProps = __rest(props, ["helperTextInvalid"]);
-    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({}, textInputProps, { id: props.id, label: undefined, "aria-describedby": props.id ? "".concat(props.id, "-form-group") : undefined, 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, {}) })))] }) })));
+    var _helperTextInvalid = props.helperTextInvalid, _children = props.children, isReadOnly = props.isReadOnly, textInputProps = __rest(props, ["helperTextInvalid", "children", "isReadOnly"]);
+    var id = props.id
+        ? props.id
+        : typeof props.label === 'string'
+            ? props.label.toLowerCase().split(' ').join('-')
+            : undefined;
+    return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { id: id }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInput, __assign({}, textInputProps, { id: id, label: undefined, "aria-describedby": id ? "".concat(id, "-form-group") : undefined, validated: props.helperTextInvalid ? 'error' : undefined, type: props.type === 'password' ? (showSecret ? 'text' : 'password') : props.type, readOnlyVariant: isReadOnly ? 'default' : 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, {}) }))), props.children] }) })));
 }
 exports.FormGroupTextInput = FormGroupTextInput;

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

@@ -1,6 +1,6 @@
 import { FormGroupProps } from '@patternfly/react-core';
 import { ReactNode } from 'react';
-export type PageFormGroupProps = Pick<FormGroupProps, 'children' | 'label' | 'helperText' | 'helperTextInvalid' | 'isRequired'> & {
+export type PageFormGroupProps = Pick<FormGroupProps, 'children' | 'helperText' | 'helperTextInvalid' | 'isRequired' | 'label'> & {
     id?: string;
     labelHelpTitle?: string;
     labelHelp?: ReactNode;

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

@@ -1,7 +1,12 @@
 /// <reference types="react" />
+import { Validate, ValidationRule } from 'react-hook-form';
 import { FormGroupTextAreaProps } from './FormGroupTextArea';
 export type PageFormTextAreaProps = {
     name: string;
+    minLength?: number | ValidationRule<number>;
+    maxLength?: number | ValidationRule<number>;
+    pattern?: ValidationRule<RegExp>;
+    validate?: Validate<string> | Record<string, Validate<string>>;
 } & 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

@@ -14,13 +14,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageFormTextArea = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_hook_form_1 = require("react-hook-form");
+var capitalize_1 = require("../../utils/capitalize");
 var FormGroupTextArea_1 = require("./FormGroupTextArea");
 /** PatternFly TextArea wrapper for use with react-hook-form */
 function PageFormTextArea(props) {
+    var name = props.name, label = props.label, isReadOnly = props.isReadOnly, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern, validate = props.validate;
     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 })));
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, render: function (_a) {
+            var _b;
+            var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
+            return ((0, jsx_runtime_1.jsx)(FormGroupTextArea_1.FormGroupTextArea, __assign({}, props, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name, value: value, onChange: onChange, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, isReadOnly: isReadOnly || isSubmitting, minLength: undefined, maxLength: undefined })));
+        }, rules: {
+            required: typeof label === 'string' && typeof isRequired === 'boolean'
+                ? {
+                    value: true,
+                    message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " is required."),
+                }
+                : isRequired,
+            minLength: typeof label === 'string' && typeof minLength === 'number'
+                ? {
+                    value: minLength,
+                    message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " must be at least ").concat(minLength, " characters."),
+                }
+                : minLength,
+            maxLength: typeof label === 'string' && typeof maxLength === 'number'
+                ? {
+                    value: maxLength,
+                    message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " cannot be greater than ").concat(maxLength, " characters."),
+                }
+                : maxLength,
+            pattern: pattern,
+            validate: validate,
         } }));
 }
 exports.PageFormTextArea = PageFormTextArea;

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

@@ -1,7 +1,15 @@
 /// <reference types="react" />
+import { Validate, ValidationRule } from 'react-hook-form';
 import { FormGroupTextInputProps } from './FormGroupTextInput';
-export type PageFormTextInputProps = {
+export type PageFormTextInputProps<T> = {
     name: string;
+    minLength?: number | ValidationRule<number>;
+    maxLength?: number | ValidationRule<number>;
+    pattern?: ValidationRule<RegExp>;
+    validate?: Validate<string> | Record<string, Validate<string>>;
+    selectTitle?: string;
+    selectValue?: (item: T) => string | number;
+    selectOpen?: (callback: (item: T) => void, title: string) => void;
 } & Omit<FormGroupTextInputProps, 'onChange' | 'value'>;
 /** PatternFly TextInput wrapper for use with react-hook-form */
-export declare function PageFormTextInput(props: PageFormTextInputProps): JSX.Element;
+export declare function PageFormTextInput<T = unknown>(props: PageFormTextInputProps<T>): JSX.Element;

package/cjs/PageForm/Inputs/PageFormTextInput.js

@@ -13,18 +13,48 @@ var __assign = (this && this.__assign) || function () {
 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_hook_form_1 = require("react-hook-form");
+var capitalize_1 = require("../../utils/capitalize");
 var FormGroupTextInput_1 = require("./FormGroupTextInput");
 /** PatternFly TextInput wrapper for use with react-hook-form */
 function PageFormTextInput(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)(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 })));
+    var label = props.label, name = props.name, isReadOnly = props.isReadOnly, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern, validate = props.validate, selectTitle = props.selectTitle;
+    var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, render: function (_a) {
+            var _b;
+            var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
+            return ((0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, props, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), value: value, onChange: onChange, helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message), isReadOnly: isReadOnly || isSubmitting, minLength: undefined, maxLength: undefined }, { children: selectTitle && ((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_1 = props.selectValue(item);
+                                setValue(name, value_1, { shouldValidate: true });
+                            }
+                        }, props.selectTitle);
+                    }, "aria-label": "Options menu", isDisabled: isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.SearchIcon, {}) }))) })));
+        }, rules: {
+            required: typeof label === 'string' && typeof isRequired === 'boolean'
+                ? {
+                    value: true,
+                    message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " is required."),
+                }
+                : isRequired,
+            minLength: typeof label === 'string' && typeof minLength === 'number'
+                ? {
+                    value: minLength,
+                    message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " must be at least ").concat(minLength, " characters."),
+                }
+                : minLength,
+            maxLength: typeof label === 'string' && typeof maxLength === 'number'
+                ? {
+                    value: maxLength,
+                    message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " cannot be greater than ").concat(maxLength, " characters."),
+                }
+                : maxLength,
+            pattern: pattern,
+            validate: validate,
         } }));
 }
 exports.PageFormTextInput = PageFormTextInput;

package/cjs/PageForm/Inputs/PageFormTextSelect.js

@@ -25,9 +25,7 @@ function FormTextSelect(props) {
     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);
-                        }, 
+    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) { return 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;

package/cjs/PageForm/PageForm.d.ts

@@ -6,7 +6,7 @@ export declare function PageForm<T extends object>(props: {
     children?: ReactNode;
     submitText: string;
     onSubmit: PageFormSubmitHandler<T>;
-    cancelText: string;
+    cancelText?: string;
     onCancel?: () => void;
     defaultValue?: DeepPartial<T>;
     isVertical?: boolean;

package/cjs/PageForm/PageForm.js

@@ -72,8 +72,10 @@ 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 useFrameworkTranslations_1 = require("../useFrameworkTranslations");
 function PageForm(props) {
     var _this = this;
+    var _a;
     var schema = props.schema, defaultValue = props.defaultValue;
     var form = (0, react_hook_form_1.useForm)({
         defaultValues: defaultValue !== null && defaultValue !== void 0 ? defaultValue : {},
@@ -81,10 +83,11 @@ function PageForm(props) {
             ? (0, ajv_1.ajvResolver)(schema, { strict: false, addFormats: true })
             : undefined,
     });
+    var _b = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), frameworkTranslations = _b[0];
     var handleSubmit = form.handleSubmit, setFieldError = form.setError;
-    var _a = __read((0, react_1.useState)(''), 2), error = _a[0], setError = _a[1];
+    var _c = __read((0, react_1.useState)(''), 2), error = _c[0], setError = _c[1];
     var isMd = (0, useBreakPoint_1.useBreakpoint)('md');
-    var _b = __read((0, react_1.useContext)(Settings_1.SettingsContext), 1), settings = _b[0];
+    var _d = __read((0, react_1.useContext)(Settings_1.SettingsContext), 1), settings = _d[0];
     var isHorizontal = props.isVertical ? false : settings.formLayout === 'horizontal';
     var multipleColumns = props.singleColumn ? false : settings.formColumns === 'multiple';
     var sm = multipleColumns ? (isHorizontal ? 12 : 12) : 12;
@@ -128,7 +131,7 @@ function PageForm(props) {
             } }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: 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.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: 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 })))] })) }))
+                    } }, { 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: (_a = props.cancelText) !== null && _a !== void 0 ? _a : frameworkTranslations.cancelText })))] })) }))) : ((0, jsx_runtime_1.jsx)(PageFormSubmitButton, __assign({ style: { marginTop: 48 } }, { children: props.submitText })))] })) }))
     // </PageBody>
     );
 }

package/cjs/utils/capitalize.d.ts

@@ -0,0 +1 @@
+export declare function capitalizeFirstLetter(text: string): string;

package/cjs/utils/capitalize.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalizeFirstLetter = void 0;
+function capitalizeFirstLetter(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+exports.capitalizeFirstLetter = capitalizeFirstLetter;

package/package.json

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