@ansible/ansible-ui-framework 0.0.379 → 0.0.381

package/cjs/PageActions/PageDropdownAction.js

@@ -56,13 +56,10 @@ function PageDropdownAction(props) {
     if (actions.length === 0)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     var Icon = icon;
-    var Toggle = label || Icon ? react_core_1.DropdownToggle : react_core_1.KebabToggle;
+    var toggleIcon = Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label;
     var isPrimary = hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length);
-    var dropdown = ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: (0, jsx_runtime_1.jsx)(Toggle, __assign({ id: "toggle-kebab", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isPrimary ? 'primary' : undefined, toggleIndicator: Icon ? null : undefined, style: isPrimary && !label
-                ? {
-                    color: 'var(--pf-global--Color--light-100)',
-                }
-                : {} }, { children: Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label })), isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(PageDropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: {
+    var Toggle = label || Icon ? ((0, jsx_runtime_1.jsx)(react_core_1.DropdownToggle, __assign({ id: "toggle-dropdown", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isPrimary ? 'primary' : undefined, toggleIndicator: null, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {} }, { children: toggleIcon }))) : ((0, jsx_runtime_1.jsx)(react_core_1.KebabToggle, __assign({ id: "toggle-kebab", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isPrimary ? 'primary' : undefined, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {} }, { children: toggleIcon })));
+    var dropdown = ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: Toggle, isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(PageDropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: {
             zIndex: 201,
         } }));
     return tooltip && (iconOnly || isDisabled) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: dropdown }))) : (__assign({}, dropdown));

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

@@ -4,5 +4,5 @@ import { PageFormGroupProps } from './PageFormGroup';
 export type FormGroupSelectProps = Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'onSelect' | 'placeholder' | 'value' | 'isDisabled'> & PageFormGroupProps & {
     isReadOnly?: boolean;
 };
-/** Thin wrapper combining a PF FormGroup and a PF Select */
+/** A PatternFly FormGroup with a PatternFly Select */
 export declare function FormGroupSelect(props: FormGroupSelectProps): JSX.Element;

package/cjs/PageForm/Inputs/FormGroupSelect.js

@@ -32,7 +32,7 @@ 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");
-/** Thin wrapper combining a PF FormGroup and a PF Select */
+/** 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];

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

@@ -11,4 +11,9 @@ export type FormGroupSelectOptionProps<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/PageForm/Inputs/FormGroupSelectOption.js

@@ -16,6 +16,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 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 (event, label) {

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

@@ -2,5 +2,5 @@
 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;
-/** Thin wrapper combining a PF FormGroup and a PF TextArea */
+/** A PatternFly FormGroup with a PatternFly TextArea */
 export declare function FormGroupTextArea(props: FormGroupTextAreaProps): JSX.Element;

package/cjs/PageForm/Inputs/FormGroupTextArea.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -33,9 +44,10 @@ 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");
-/** Thin wrapper combining a PF FormGroup and a PF TextArea */
+/** 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, {}) })))] }) })));
+    var _helperTextInvalid = props.helperTextInvalid, textAreaProps = __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.TextArea, __assign({}, textAreaProps, { 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

@@ -1,6 +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;
-/** Thin wrapper combining a PF FormGroup and a PF TextInput */
+export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label' | 'autoComplete' | 'autoFocus'> & PageFormGroupProps;
+/** A PatternFly FormGroup with a PatternFly TextInput */
 export declare function FormGroupTextInput(props: FormGroupTextInputProps): JSX.Element;

package/cjs/PageForm/Inputs/FormGroupTextInput.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -33,9 +44,10 @@ 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");
-/** Thin wrapper combining a PF FormGroup and a PF TextInput */
+/** 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 })), 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, 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": "".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/PageFormTextInput.js

@@ -20,7 +20,11 @@ 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.message, isReadOnly: props.isReadOnly || isSubmitting })));
+            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/PageFormSchema.d.ts

@@ -1,6 +1,25 @@
 /// <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;
+    /** https://www.chromium.org/developers/design-documents/create-amazing-password-forms/ */
+    autoComplete?: string;
+};
+export declare function TypeTextInput(options: TypeTextInputOptions): import("@sinclair/typebox").TString<string>;
+export type TypeSecretInputOptions = StringOptions<string> & {
+    placeholder?: string;
+    /** https://www.chromium.org/developers/design-documents/create-amazing-password-forms/ */
+    autoComplete: string;
+};
+export declare function TypeSecretInput(options: TypeSecretInputOptions): 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

@@ -1,7 +1,19 @@
 "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.PageFormSchema = void 0;
+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");
@@ -9,6 +21,7 @@ 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 = [];
@@ -21,9 +34,48 @@ function PageFormSchema(props) {
         }
         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;
-        var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
         switch (property.type) {
             case 'string': {
                 switch (property.variant) {
@@ -41,10 +93,16 @@ function PageFormSchema(props) {
                         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));
+                        {
+                            var typeSecretInputOptions = property;
+                            p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, type: "password", autoComplete: typeSecretInputOptions.autoComplete }, 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));
+                        {
+                            var typeTextInputOptions = property;
+                            p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, autoComplete: typeTextInputOptions.autoComplete }, base + propertyName));
+                        }
                         break;
                 }
                 break;
@@ -66,3 +124,15 @@ function PageFormSchema(props) {
     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/package.json

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