@ansible/ansible-ui-framework 0.0.607 → 0.0.608

package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupSelect.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;
@@ -34,7 +45,7 @@ var react_1 = require("react");
 var PageFormGroup_1 = require("./PageFormGroup");
 /** 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 value = props.value, onSelect = props.onSelect, children = props.children, helperTextInvalid = props.helperTextInvalid, labelHelpTitle = props.labelHelpTitle, labelHelp = props.labelHelp, helperText = props.helperText, isRequired = props.isRequired, isReadOnly = props.isReadOnly, additionalControls = props.additionalControls, placeholderText = props.placeholderText, selectProps = __rest(props, ["value", "onSelect", "children", "helperTextInvalid", "labelHelpTitle", "labelHelp", "helperText", "isRequired", "isReadOnly", "additionalControls", "placeholderText"]);
     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) {
@@ -44,6 +55,6 @@ function FormGroupSelect(props) {
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value.toString());
         setOpen(false);
     }, [onSelect]);
-    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 })) })));
+    return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({}, selectProps, { label: undefined, placeholderText: placeholderText, 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.FormGroupSelect = FormGroupSelect;

package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupSelectOption.d.ts

@@ -1,10 +1,11 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 import { FormGroupSelectProps } from './FormGroupSelect';
 export interface IFormGroupSelectOption<T> {
     group?: string;
     label: string;
     description?: string;
     value: T;
+    additionalControls?: ReactNode;
 }
 export type FormGroupSelectOptionProps<T> = {
     options: IFormGroupSelectOption<T>[];

package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupTextInput.d.ts

@@ -1,7 +1,7 @@
 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' | 'innerRef' | 'minLength' | 'maxLength'> & PageFormGroupProps & {
+export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label' | 'autoComplete' | 'autoFocus' | 'innerRef' | 'minLength' | 'maxLength' | 'onBlur'> & PageFormGroupProps & {
     children?: ReactNode;
 };
 /** A PatternFly FormGroup with a PatternFly TextInput */

package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupTextInput.js

@@ -47,12 +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, _children = props.children, isReadOnly = props.isReadOnly, textInputProps = __rest(props, ["helperTextInvalid", "children", "isReadOnly"]);
+    var _children = props.children, isReadOnly = props.isReadOnly, placeholder = props.placeholder, formGroupProps = __rest(props, ["children", "isReadOnly", "placeholder"]);
     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] }) })));
+    return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupProps, { id: id }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInput, { placeholder: placeholder, onChange: props.onChange, id: id, onBlur: props.onBlur, label: undefined, value: props.value, "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/framework/PageForm/Inputs/FormGroupTypeAheadMultiSelect.d.ts

@@ -0,0 +1,22 @@
+import { SelectOptionObject, SelectProps, FormGroupProps } from '@patternfly/react-core';
+import React from 'react';
+import { Label } from '../../../frontend/awx/interfaces/Label';
+export type FormGroupSelectProps = Pick<FormGroupProps, 'helperTextInvalid' | 'children'> & Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'placeholderText' | 'value' | 'isDisabled' | 'children' | 'onSelect'> & {
+    isReadOnly?: boolean;
+    placeholderText?: string | React.ReactNode;
+    name: string;
+    options: {
+        value: string | Label;
+        label: string;
+    }[];
+    id?: string;
+    onSelect?: (event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean) => void;
+    onHandleSelection: (value: string | SelectOptionObject | {
+        name: string;
+    }) => void;
+    isSubmitting: boolean;
+    value: Partial<Label>[];
+    onHandleClear: (chip?: string) => void;
+};
+/** A PatternFly FormGroup with a PatternFly Select */
+export declare function FormGroupTypeAheadMultiSelect(props: FormGroupSelectProps): JSX.Element;

package/cjs/framework/PageForm/Inputs/FormGroupTypeAheadMultiSelect.js

@@ -0,0 +1,67 @@
+"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 __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;
+    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.FormGroupTypeAheadMultiSelect = 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");
+/** A PatternFly FormGroup with a PatternFly Select */
+function FormGroupTypeAheadMultiSelect(props) {
+    var onHandleSelection = props.onHandleSelection, onHandleClear = props.onHandleClear, value = props.value, id = props.id, name = props.name, options = props.options, placeholderText = props.placeholderText, isSubmitting = props.isSubmitting, isReadOnly = props.isReadOnly, rest = __rest(props, ["onHandleSelection", "onHandleClear", "value", "id", "name", "options", "placeholderText", "isSubmitting", "isReadOnly"]);
+    var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1];
+    var chipGroupComponent = function () {
+        if (!value) {
+            return;
+        }
+        return ((0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, { children: value.map(function (v) { return ((0, jsx_runtime_1.jsx)(react_core_1.Chip, __assign({ onClick: function () {
+                    onHandleClear(v.name);
+                } }, { children: v.name }), v.name)); }) }));
+    };
+    return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ chipGroupComponent: chipGroupComponent(), variant: react_core_1.SelectVariant.typeaheadMulti, isCreatable: true, placeholderText: !(value === null || value === void 0 ? void 0 : value.length) && placeholderText, isOpen: isOpen, isCreateOptionOnTop: true, onClear: function () { return onHandleClear(); }, id: id !== null && id !== void 0 ? id : name, selections: value, onToggle: function () {
+                setIsOpen(!isOpen);
+            }, onSelect: function (_, v) {
+                if (typeof v === 'string') {
+                    return onHandleSelection({ name: v });
+                }
+                onHandleSelection(v);
+            }, isDisabled: isReadOnly || isSubmitting }, { children: options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: option.value }, { children: option.label }), option.label)); }) })) })));
+}
+exports.FormGroupTypeAheadMultiSelect = FormGroupTypeAheadMultiSelect;

package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormCheckbox.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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageFormCheckbox = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -17,12 +28,12 @@ var react_core_1 = require("@patternfly/react-core");
 var react_hook_form_1 = require("react-hook-form");
 /** PatternFly Checkbox wrapper for use with react-hook-form */
 function PageFormCheckbox(props) {
-    var name = props.name, readOnly = props.readOnly, validate = props.validate;
+    var name = props.name, readOnly = props.readOnly, validate = props.validate, rest = __rest(props, ["name", "readOnly", "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: name, control: control, shouldUnregister: true, render: function (_a) {
             var _b;
             var _c = _a.field, onChange = _c.onChange, value = _c.value;
-            return ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, __assign({}, props, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), isChecked: !!value, onChange: onChange, readOnly: readOnly || isSubmitting, minLength: undefined, maxLength: undefined, ref: undefined })));
+            return ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, __assign({}, rest, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), isChecked: !!value, onChange: onChange, readOnly: readOnly || isSubmitting, minLength: undefined, maxLength: undefined, ref: undefined })));
         }, rules: { validate: validate } }));
 }
 exports.PageFormCheckbox = PageFormCheckbox;

package/cjs/framework/PageForm/Inputs/PageFormCreatableSelect.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { FieldPath, FieldPathValue, FieldValues, Validate } from 'react-hook-form';
+import { Label } from '../../../frontend/awx/interfaces/Label';
+export type PageFormSelectOptionProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TFieldName;
+    id?: string;
+    options: {
+        value: string | Label;
+        label: string;
+    }[];
+    isRequired?: boolean;
+    label: string;
+    additionalControls?: ReactElement;
+    placeholderText?: string;
+    labelHelp?: string;
+    labelHelpTitle?: string;
+    validate?: Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues> | Record<string, Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>>;
+};
+/**  Select wrapper for use with react-hook-form */
+export declare function PageFormCreatableSelect<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormSelectOptionProps<TFieldValues, TFieldName>): JSX.Element;

package/cjs/framework/PageForm/Inputs/PageFormCreatableSelect.js

@@ -0,0 +1,82 @@
+"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 __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;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageFormCreatableSelect = 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 FormGroupTypeAheadMultiSelect_1 = require("./FormGroupTypeAheadMultiSelect");
+/**  Select wrapper for use with react-hook-form */
+function PageFormCreatableSelect(props) {
+    var isRequired = props.isRequired, validate = props.validate, rest = __rest(props, ["isRequired", "validate"]);
+    var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting, getValues = _a.getValues;
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, shouldUnregister: true, 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)(FormGroupTypeAheadMultiSelect_1.FormGroupTypeAheadMultiSelect, __assign({}, rest, { id: (_b = props.id) !== null && _b !== void 0 ? _b : props.name, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, value: value, isSubmitting: isSubmitting, onHandleClear: function (chip) {
+                    var values = getValues(props.name);
+                    onChange(!chip ? [] : values.filter(function (v) { return v.name !== chip; }));
+                }, onHandleSelection: function (v) {
+                    var values = getValues(props.name);
+                    if (values) {
+                        return onChange(__spreadArray(__spreadArray([], __read(values), false), [v], false));
+                    }
+                    return onChange([v]);
+                } })));
+        }, rules: {
+            required: typeof props.label === 'string' && typeof isRequired === 'boolean'
+                ? {
+                    value: true,
+                    message: "".concat((0, capitalize_1.capitalizeFirstLetter)(props.label.toLocaleLowerCase()), " is required."),
+                }
+                : isRequired,
+            validate: validate,
+        } }));
+}
+exports.PageFormCreatableSelect = PageFormCreatableSelect;

package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormGroup.d.ts

@@ -1,9 +1,10 @@
 import { FormGroupProps } from '@patternfly/react-core';
 import { ReactNode } from 'react';
-export type PageFormGroupProps = Pick<FormGroupProps, 'children' | 'helperText' | 'helperTextInvalid' | 'isRequired' | 'label'> & {
+export type PageFormGroupProps = Pick<FormGroupProps, 'children' | 'helperText' | 'helperTextInvalid' | 'isRequired' | 'label' | 'labelIcon'> & {
     id?: string;
     labelHelpTitle?: string;
-    labelHelp?: ReactNode;
+    labelHelp?: string;
+    additionalControls?: 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/{PageForm → framework/PageForm}/Inputs/PageFormGroup.js

@@ -14,11 +14,11 @@ 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");
+var Help_1 = require("../../components/Help");
 /** 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;
-    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat((_a = props.id) !== null && _a !== void 0 ? _a : '', "-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 })));
+    var children = props.children, helperText = props.helperText, helperTextInvalid = props.helperTextInvalid, isRequired = props.isRequired, labelHelp = props.labelHelp, labelHelpTitle = props.labelHelpTitle, label = props.label;
+    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat((_a = props.id) !== null && _a !== void 0 ? _a : '', "-form-group"), fieldId: props.id, label: label, helperText: helperText, helperTextInvalid: helperTextInvalid, validated: helperTextInvalid ? 'error' : undefined, isRequired: isRequired, labelInfo: props.additionalControls, labelIcon: labelHelp ? (0, jsx_runtime_1.jsx)(Help_1.Help, { title: labelHelpTitle, help: labelHelp }) : undefined }, { children: children })));
 }
 exports.PageFormGroup = PageFormGroup;

package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormMultiInput.d.ts

@@ -1,15 +1,17 @@
 /// <reference types="react" />
+import { ChipGroupProps } from '@patternfly/react-core';
 import { FieldPath, FieldValues, Validate, ValidationRule } from 'react-hook-form';
 import { PageFormGroupProps } from './PageFormGroup';
 export type PageFormMultiInputProps<T, TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     name: TFieldName;
+    placeholder?: string;
     minLength?: number | ValidationRule<number>;
     maxLength?: number | ValidationRule<number>;
     pattern?: ValidationRule<RegExp>;
     validate?: Validate<T[], TFieldValues>;
     selectTitle?: string;
     selectOpen?: (callback: (selection: T[]) => void, title: string) => void;
-} & Omit<PageFormGroupProps, 'onChange' | 'value'>;
+} & Omit<PageFormGroupProps, 'onChange' | 'value'> & ChipGroupProps;
 interface FieldValuesWithArray<T> extends FieldValues {
     [key: string]: T[];
 }

package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormMultiInput.js

@@ -58,7 +58,7 @@ var ChipHolder = styled_components_1.default.div(templateObject_1 || (templateOb
     return props.isDisabled ? 'var(--pf-global--disabled-color--300)' : null;
 });
 function PageFormMultiInput(props) {
-    var validate = props.validate, selectTitle = props.selectTitle, selectOpen = props.selectOpen, formGroupInputProps = __rest(props, ["validate", "selectTitle", "selectOpen"]);
+    var validate = props.validate, selectTitle = props.selectTitle, selectOpen = props.selectOpen, placeholder = props.placeholder, formGroupInputProps = __rest(props, ["validate", "selectTitle", "selectOpen", "placeholder"]);
     var label = props.label, name = props.name, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern;
     var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
     var _c = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _c[0];
@@ -68,7 +68,7 @@ function PageFormMultiInput(props) {
             var removeItem = function (item) {
                 onChange(value.filter(function (i) { return i.id !== item.id; }));
             };
-            return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), helperTextInvalid: !(validate && isValidating) && (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)(ChipHolder, __assign({ isDisabled: isSubmitting, className: "pf-c-form-control" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, __assign({ numChips: 5, expandedText: translations.showLess, collapsedText: translations.countMore.replace('{count}', "".concat((value === null || value === void 0 ? void 0 : value.length) - 5)) }, { children: value === null || value === void 0 ? void 0 : value.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Chip, __assign({ onClick: function () { return removeItem(item); } }, { children: item.name }), item.id)); }) })) })), selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
+            return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message) }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(value === null || value === void 0 ? void 0 : value.length) ? ((0, jsx_runtime_1.jsx)(ChipHolder, __assign({ isDisabled: isSubmitting, className: "pf-c-form-control" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, __assign({ numChips: 5, expandedText: translations.showLess, collapsedText: translations.countMore.replace('{count}', "".concat((value === null || value === void 0 ? void 0 : value.length) - 5)) }, { children: value === null || value === void 0 ? void 0 : value.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Chip, __assign({ onClick: function () { return removeItem(item); } }, { children: item.name }), item.id)); }) })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.TextInput, { "aria-label": placeholder, isDisabled: true, placeholder: placeholder })), selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
                                 return selectOpen === null || selectOpen === void 0 ? void 0 : selectOpen(function (items) {
                                     setValue(name, items, {
                                         shouldValidate: true,

package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormSelectOption.js

@@ -23,6 +23,11 @@ function PageFormSelectOption(props) {
     return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, shouldUnregister: true, render: function (_a) {
             var _b;
             var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
+            if (value === '') {
+                if (props.options.length === 1 && isRequired) {
+                    onChange(props.options[0].value);
+                }
+            }
             return ((0, jsx_runtime_1.jsx)(FormGroupSelectOption_1.FormGroupSelectOption, __assign({}, props, { id: (_b = props.id) !== null && _b !== void 0 ? _b : props.name, value: value, onSelect: function (_, value) { return onChange(value); }, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
         }, rules: {
             required: typeof label === 'string' && typeof isRequired === 'boolean'

package/cjs/framework/PageForm/Inputs/PageFormSwitch.d.ts

@@ -0,0 +1,16 @@
+import { FieldPath, FieldValues, Validate, ValidationRule } from 'react-hook-form';
+import { SwitchProps } from '@patternfly/react-core';
+import { ReactElement } from 'react';
+export type PageFormSwitchProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TFieldName;
+    helperText?: string;
+    isRequired?: boolean;
+    pattern?: ValidationRule<RegExp>;
+    validate?: Validate<string, TFieldValues> | Record<string, Validate<string, TFieldValues>>;
+    autoFocus?: boolean;
+    additionalControls?: ReactElement;
+    formLabel?: string;
+    labelHelp?: string;
+    labelHelpTitle?: string;
+} & Omit<SwitchProps, 'onChange' | 'ref' | 'instance'>;
+export declare function PageFormSwitch<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormSwitchProps<TFieldValues, TFieldName>): JSX.Element;

package/cjs/framework/PageForm/Inputs/PageFormSwitch.js

@@ -0,0 +1,38 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageFormSwitch = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_hook_form_1 = require("react-hook-form");
+var Help_1 = require("../../components/Help");
+function PageFormSwitch(props) {
+    var name = props.name, id = props.id, helperText = props.helperText, validate = props.validate, additionalControls = props.additionalControls, formLabel = props.formLabel, labelHelp = props.labelHelp, labelHelpTitle = props.labelHelpTitle, rest = __rest(props, ["name", "id", "helperText", "validate", "additionalControls", "formLabel", "labelHelp", "labelHelpTitle"]);
+    var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
+            var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
+            return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message), fieldId: id, label: formLabel, helperText: helperText, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, labelInfo: additionalControls, labelIcon: labelHelp ? (0, jsx_runtime_1.jsx)(Help_1.Help, { title: labelHelpTitle, help: labelHelp }) : undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Switch, __assign({}, rest, { isChecked: value, onChange: function (e) { return onChange(e); }, isDisabled: isSubmitting })) })));
+        } }));
+}
+exports.PageFormSwitch = PageFormSwitch;

package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormTextInput.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { FieldPath, FieldPathValue, FieldValues, Validate, ValidationRule } from 'react-hook-form';
 import { FormGroupTextInputProps } from './FormGroupTextInput';
 export type PageFormTextInputProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TSelection extends FieldValues = FieldValues> = {
@@ -10,6 +10,7 @@ export type PageFormTextInputProps<TFieldValues extends FieldValues = FieldValue
     selectTitle?: string;
     selectValue?: (selection: TSelection) => FieldPathValue<TSelection, FieldPath<TSelection>>;
     selectOpen?: (callback: (selection: TSelection) => void, title: string) => void;
+    button?: ReactElement;
 } & Omit<FormGroupTextInputProps, 'onChange' | 'value'>;
 /** PatternFly TextInput wrapper for use with react-hook-form */
 export declare function PageFormTextInput<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TSelection extends FieldValues = FieldValues>(props: PageFormTextInputProps<TFieldValues, TFieldName, TSelection>): JSX.Element;

package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormTextInput.js

@@ -31,13 +31,12 @@ var capitalize_1 = require("../../utils/capitalize");
 var FormGroupTextInput_1 = require("./FormGroupTextInput");
 /** PatternFly TextInput wrapper for use with react-hook-form */
 function PageFormTextInput(props) {
-    var isReadOnly = props.isReadOnly, validate = props.validate, selectTitle = props.selectTitle, selectValue = props.selectValue, selectOpen = props.selectOpen, formGroupInputProps = __rest(props, ["isReadOnly", "validate", "selectTitle", "selectValue", "selectOpen"]);
-    var label = props.label, name = props.name, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern;
-    var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
+    var name = props.name, isReadOnly = props.isReadOnly, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern, validate = props.validate, selectTitle = props.selectTitle, button = props.button, id = props.id, selectOpen = props.selectOpen, selectValue = props.selectValue, rest = __rest(props, ["name", "isReadOnly", "isRequired", "minLength", "maxLength", "pattern", "validate", "selectTitle", "button", "id", "selectOpen", "selectValue"]);
+    var label = props.label;
+    var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, trigger = _a.trigger, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
     return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, 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({}, formGroupInputProps, { 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 _b = _a.field, onChange = _b.onChange, value = _b.value, name = _b.name, error = _a.fieldState.error;
+            return ((0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, rest, { onBlur: function () { return trigger(name); }, isRequired: isRequired, id: id !== null && id !== void 0 ? id : 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({ ouiaId: "lookup-".concat(name, "-button"), variant: "control", onClick: function () {
                         return selectOpen === null || selectOpen === void 0 ? void 0 : selectOpen(function (item) {
                             if (selectValue) {
                                 var value_1 = selectValue(item);
@@ -45,7 +44,7 @@ function PageFormTextInput(props) {
                                     shouldValidate: true,
                                 });
                             }
-                        }, props.selectTitle);
+                        }, 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'

package/cjs/{PageTable → framework/PageTable}/PageTable.d.ts

@@ -81,11 +81,6 @@ export interface ITableColumnCommon<T extends object> {
     card?: 'name' | 'subtitle' | 'description' | 'hidden';
     list?: 'name' | 'subtitle' | 'description' | 'hidden' | 'primary' | 'secondary';
 }
-export declare enum TableColumnSomething {
-    'id' = 0,
-    'name' = 1,
-    'description' = 2
-}
 export declare enum TableColumnCardType {
     'description' = 0,
     'hidden' = 1,

package/cjs/{PageTable → framework/PageTable}/PageTable.js

@@ -30,7 +30,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableColumnCell = exports.TableColumnCardType = exports.TableColumnSomething = exports.PageTable = void 0;
+exports.TableColumnCell = exports.TableColumnCardType = exports.PageTable = 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");
@@ -180,7 +180,7 @@ function TableHead(props) {
                     }, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] })) }));
 }
 function TableRow(props) {
-    var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, unselectAll = props.unselectAll, isItemSelected = props.isItemSelected, isSelectMultiple = props.isSelectMultiple, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
+    var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, isItemSelected = props.isItemSelected, isSelectMultiple = props.isSelectMultiple, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
     var _a = __read((0, react_1.useState)(false), 2), expanded = _a[0], setExpanded = _a[1];
     var settings = (0, Settings_1.useSettings)();
     var expandedContent = expandedRow === null || expandedRow === void 0 ? void 0 : expandedRow(item);
@@ -207,12 +207,13 @@ function TableRow(props) {
                             }
                             : undefined, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
                             rowIndex: rowIndex,
-                            onSelect: function () {
-                                if (!isSelectMultiple) {
-                                    unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
+                            onSelect: function (_event, isSelecting) {
+                                if (isSelecting) {
+                                    selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+                                }
+                                else {
+                                    unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
                                 }
-                                selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
-                                onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
                             },
                             isSelected: isItemSelected !== null && isItemSelected !== void 0 ? isItemSelected : false,
                             variant: isSelectMultiple ? 'checkbox' : 'radio',
@@ -236,12 +237,6 @@ function TableCells(props) {
                     zIndex: actionsExpanded ? 301 : undefined,
                 }, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true, onOpen: setActionsExpanded }) })))] }));
 }
-var TableColumnSomething;
-(function (TableColumnSomething) {
-    TableColumnSomething[TableColumnSomething["id"] = 0] = "id";
-    TableColumnSomething[TableColumnSomething["name"] = 1] = "name";
-    TableColumnSomething[TableColumnSomething["description"] = 2] = "description";
-})(TableColumnSomething = exports.TableColumnSomething || (exports.TableColumnSomething = {}));
 var TableColumnCardType;
 (function (TableColumnCardType) {
     TableColumnCardType[TableColumnCardType["description"] = 0] = "description";

package/cjs/{PageTable → framework/PageTable}/PageToolbar.js

@@ -195,9 +195,7 @@ function ToolbarFilterInput(props) {
 }
 function ToolbarTextFilter(props) {
     var _a = __read((0, react_1.useState)(''), 2), value = _a[0], setValue = _a[1];
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.TextInputGroup, __assign({ style: { minWidth: 220 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupMain, { id: props.id, 
-                        // ref={ref}
-                        value: value, onChange: function (e, v) {
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.TextInputGroup, __assign({ style: { minWidth: 220 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupMain, { id: props.id, value: value, onChange: function (e, v) {
                             if (typeof e === 'string')
                                 setValue(e);
                             else
@@ -206,11 +204,8 @@ function ToolbarTextFilter(props) {
                             if (value && event.key === 'Enter') {
                                 props.addFilter(value);
                                 setValue('');
-                                // ref.current?.focus() // Does not work because PF does not expose ref
                             }
-                        }, placeholder: props.placeholder }), value !== '' && ((0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupUtilities, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "plain", "aria-label": "clear filter", onClick: function () { return setValue(''); }, style: { opacity: value ? undefined : 0 }, 
-                            // tabIndex={value ? undefined : -1}
-                            tabIndex: -1 }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.TimesIcon, {}) })) }))] })), (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: value ? 'primary' : 'control', "aria-label": "apply filter", onClick: function () {
+                        }, placeholder: props.placeholder }), value !== '' && ((0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupUtilities, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "plain", "aria-label": "clear filter", onClick: function () { return setValue(''); }, style: { opacity: value ? undefined : 0 }, tabIndex: -1 }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.TimesIcon, {}) })) }))] })), (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: value ? 'primary' : 'control', "aria-label": "apply filter", onClick: function () {
                     props.addFilter(value);
                     setValue('');
                 }, tabIndex: -1, isDisabled: !value }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ArrowRightIcon, {}) }))] }));

package/cjs/{components → framework/components}/Help.js

@@ -19,6 +19,6 @@ function Help(props) {
     var help = props.help, title = props.title;
     if (!help)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: title, bodyContent: help, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: { padding: 0, marginLeft: '8px', verticalAlign: 'middle' } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) })) })));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: title, bodyContent: help, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "plain", style: { padding: 0, marginLeft: '8px', verticalAlign: 'middle' } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) })) })));
 }
 exports.Help = Help;