@ansible/ansible-ui-framework 0.0.373 → 0.0.375

package/cjs/{PageForm.js → PageForm/PageForm.js}

@@ -38,10 +38,11 @@ var react_icons_1 = require("@patternfly/react-icons");
 var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
-var Scrollable_1 = require("./components/Scrollable");
-var useBreakPoint_1 = require("./components/useBreakPoint");
-var PageHeader_1 = require("./PageHeader");
-var Settings_1 = require("./Settings");
+var Scrollable_1 = require("../components/Scrollable");
+var useBreakPoint_1 = require("../components/useBreakPoint");
+var PageHeader_1 = require("../PageHeader");
+var Settings_1 = require("../Settings");
+var PageFormSelectOption_1 = require("./PageFormSelectOption");
 function FormPage(props) {
     // const methods = useForm<PartialDeep<T>>({
     //     defaultValues: props.defaultValues,
@@ -110,9 +111,7 @@ function FormTextInput(props) {
     var _c = __read((0, react_1.useState)(false), 2), showSecret = _c[0], setShowSecret = _c[1];
     return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInput, __assign({ id: id, type: props.secret && !showSecret ? 'password' : 'text', "aria-describedby": "".concat(id, "-form-group"), isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder }, registration, { onChange: function (v, e) {
                         void registration.onChange(e);
-                    }, 
-                    // innerRef={registration.ref}
-                    isReadOnly: isSubmitting })), props.secret && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, "aria-label": "Options menu", isDisabled: isSubmitting }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
+                    }, isReadOnly: isSubmitting })), props.secret && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, "aria-label": "Options menu", isDisabled: isSubmitting }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
 }
 exports.FormTextInput = FormTextInput;
 function FormTextArea(props) {
@@ -204,7 +203,7 @@ function FormSelect(props) {
         setOpen(false);
     }, [field, options]);
     var index = 0;
-    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperTextInvalid: error, helperText: props.help, isRequired: props.required, validated: error ? 'error' : undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, variant: react_core_1.SelectVariant.single, "aria-describedby": "".concat(id, "-helper"), validated: error ? 'error' : undefined }, field, { isOpen: open, onToggle: function () { return setOpen(!open); }, selections: selectedIndex === -1 ? '' : selectedIndex.toString(), onSelect: onSelect, isCreatable: props.create, isInputFilterPersisted: props.create, placeholderText: props.placeholder, isGrouped: isGrouped, footer: ((_b = props.footer) === null || _b === void 0 ? void 0 : _b.label) && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, onClick: function () {
+    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperTextInvalid: error, helperText: props.help, isRequired: props.required, validated: error ? 'error' : undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, variant: react_core_1.SelectVariant.single, "aria-describedby": "".concat(id, "-helper"), validated: error ? 'error' : undefined }, field, { isOpen: open, onToggle: function () { return setOpen(!open); }, selections: selectedIndex === -1 ? '' : selectedIndex.toString(), onSelect: onSelect, isCreatable: props.create, isInputFilterPersisted: props.create, placeholderText: props.placeholder, isGrouped: isGrouped, ref: field.ref, footer: ((_b = props.footer) === null || _b === void 0 ? void 0 : _b.label) && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, onClick: function () {
                     var _a, _b;
                     setOpen(false);
                     (_b = (_a = props.footer) === null || _a === void 0 ? void 0 : _a.click) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -282,7 +281,7 @@ function FormSchema(props) {
                     case 'select': {
                         if ('options' in property) {
                             var formSelectProps = property;
-                            p.push((0, jsx_runtime_1.jsx)(FormSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, options: formSelectProps.options, footer: formSelectProps.footer }, base + propertyName));
+                            p.push((0, jsx_runtime_1.jsx)(PageFormSelectOption_1.PageFormSelectOption, { name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, options: formSelectProps.options, footer: formSelectProps.footer }, base + propertyName));
                         }
                         else {
                             p.push((0, jsx_runtime_1.jsx)(FormTextSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, selectTitle: property.selectTitle, selectValue: property.selectValue, selectOpen: property.selectOpen }, base + propertyName));
@@ -353,14 +352,10 @@ function PageForm(props) {
                 flexGrow: 1,
                 overflow: props.disableScrolling ? undefined : 'hidden',
                 gap: 0,
-            } }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, 
-                    // padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
-                    variant: "light", style: { maxWidth: maxWidth } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(FormSchema, { schema: props.schema }), props.children] })) }))) : ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, __assign({ style: { height: '100%', flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, 
-                        // padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
-                        variant: "light", style: { maxWidth: maxWidth } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(FormSchema, { schema: props.schema }), props.children] })) })) }))), 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)(react_core_1.PageSection, __assign({ isFilled: false, style: {
-                        borderTop: 'thin solid var(--pf-global--BorderColor--100)',
+            } }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(FormSchema, { schema: props.schema }), props.children] })) }))) : ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, __assign({ style: { height: '100%', flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(FormSchema, { schema: props.schema }), props.children] })) })) }))), error && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { variant: "danger", title: error !== null && error !== void 0 ? error : '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } })), props.onCancel ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
                         backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--400)' : undefined,
-                    }, variant: "light" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [(0, jsx_runtime_1.jsx)(PageFormSubmitButton, { children: props.submitText }), props.onCancel && ((0, jsx_runtime_1.jsx)(PageFormCancelButton, __assign({ onCancel: props.onCancel }, { children: props.cancelText })))] })) }))) : ((0, jsx_runtime_1.jsx)(PageFormSubmitButton, __assign({ style: { marginTop: 48 } }, { children: props.submitText })))] })) }))
+                        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 })))] })) }))
     // </PageBody>
     );
 }

package/cjs/PageForm/PageFormSelectOption.d.ts

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

package/cjs/PageForm/PageFormSelectOption.js

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

package/cjs/PageHeader.d.ts

@@ -37,7 +37,7 @@ export interface PageHeaderProps {
  *       breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
  *       title='Page title'
  *       description='Page description'
- *       headerActions={<PageActions actions={actions} />}
+ *       headerActions={<TypedActions actions={actions} />}
  *     />
  *     <PageBody />...</PageBody>
  *   </PageLayout>

package/cjs/PageHeader.js

@@ -51,14 +51,14 @@ function Breadcrumbs(props) {
  *       breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
  *       title='Page title'
  *       description='Page description'
- *       headerActions={<PageActions actions={actions} />}
+ *       headerActions={<TypedActions actions={actions} />}
  *     />
  *     <PageBody />...</PageBody>
  *   </PageLayout>
  * <Page>
  */
 function PageHeader(props) {
-    var navigation = props.navigation, breadcrumbs = props.breadcrumbs, title = props.title, description = props.description, controls = props.controls, pageActions = props.headerActions;
+    var navigation = props.navigation, breadcrumbs = props.breadcrumbs, title = props.title, description = props.description, controls = props.controls, headerActions = props.headerActions;
     var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
     var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
     var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
@@ -91,6 +91,6 @@ function PageHeader(props) {
                                                     marginTop: 1,
                                                     marginLeft: 8,
                                                     verticalAlign: 'top',
-                                                } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) }))] })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: title })))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "160px" }) }))), isMdOrLarger && description && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 } }, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: description })) : ((0, jsx_runtime_1.jsx)(react_core_1.Stack, { children: description.map(function (d) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: d }, d)); }) })) })))] })), title && (pageActions || controls) && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' } }, { children: [controls && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: controls })), pageActions && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: pageActions })] })))] })) })))] }));
+                                                } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) }))] })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: title })))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "160px" }) }))), isMdOrLarger && description && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 } }, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: description })) : ((0, jsx_runtime_1.jsx)(react_core_1.Stack, { children: description.map(function (d) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: d }, d)); }) })) })))] })), title && (headerActions || controls) && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' } }, { children: [controls && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: controls })), headerActions && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: headerActions })] })))] })) })))] }));
 }
 exports.PageHeader = PageHeader;

package/cjs/PageTable.d.ts

@@ -1,8 +1,8 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { IPageAction } from './PageActions/PageAction';
 import { PageHeaderProps } from './PageHeader';
 import { PageTableViewType } from './PageTableViewType';
 import { IToolbarFilter } from './PageToolbar';
-import { ITypedAction } from './TypedActions';
 export type TablePageProps<T extends object> = PageHeaderProps & PageTableProps<T> & {
     error?: Error;
 };
@@ -11,9 +11,9 @@ export type PageTableProps<T extends object> = {
     keyFn: (item: T) => string | number;
     itemCount?: number;
     pageItems: T[] | undefined;
-    toolbarActions?: ITypedAction<T>[];
+    toolbarActions?: IPageAction<T>[];
     tableColumns: ITableColumn<T>[];
-    rowActions?: ITypedAction<T>[];
+    rowActions?: IPageAction<T>[];
     toolbarFilters?: IToolbarFilter[];
     filters?: Record<string, string[]>;
     setFilters?: Dispatch<SetStateAction<Record<string, string[]>>>;

package/cjs/PageTable.js

@@ -42,6 +42,8 @@ var LabelsCell_1 = require("./cells/LabelsCell");
 var TextCell_1 = require("./cells/TextCell");
 var Scrollable_1 = require("./components/Scrollable");
 var useBreakPoint_1 = require("./components/useBreakPoint");
+var PageActions_1 = require("./PageActions/PageActions");
+var PageActionType_1 = require("./PageActions/PageActionType");
 var PageBody_1 = require("./PageBody");
 var PageColumnModal_1 = require("./PageColumnModal");
 var PageHeader_1 = require("./PageHeader");
@@ -52,7 +54,6 @@ var PageTableList_1 = require("./PageTableList");
 var PageTableViewType_1 = require("./PageTableViewType");
 var PageToolbar_1 = require("./PageToolbar");
 var Settings_1 = require("./Settings");
-var TypedActions_1 = require("./TypedActions");
 function TablePage(props) {
     return ((0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageTable, __assign({}, props))] }));
 }
@@ -77,7 +78,7 @@ function PageTable(props) {
     // const { disableBodyPadding } = props
     var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
     var _b = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
-    var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; })) !==
+    var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
         undefined;
     var hasTableViewType = !props.disableTableView;
     var hasListViewType = !props.disableListView;
@@ -121,7 +122,7 @@ function PageTableView(props) {
     var t = props.t;
     t = t ? t : function (t) { return t; };
     var showSelect = props.showSelect ||
-        (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; })) !==
+        (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
             undefined;
     var containerRef = (0, react_1.useRef)(null);
     var _a = __read((0, react_1.useState)({
@@ -242,8 +243,7 @@ function TableCells(props) {
                     paddingLeft: 8,
                     width: '0%',
                     right: 0,
-                    // display: 'flex',
-                }, isStickyColumn: true, stickyMinWidth: "0px", className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true, isFilled: true }) })))] }));
+                }, isStickyColumn: true, stickyMinWidth: "0px", 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 }) })))] }));
 }
 var TableColumnSomething;
 (function (TableColumnSomething) {

package/cjs/PageTableCard.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { LabelColor } from './components/pfcolors';
+import { IPageAction } from './PageActions/PageAction';
 import { ITableColumn } from './PageTable';
-import { ITypedAction } from './TypedActions';
 export interface IPageTableCard {
     id: string | number;
     icon?: ReactNode;
@@ -26,7 +26,7 @@ export declare function PageTableCard<T extends object>(props: {
     isSelected?: (item: T) => boolean;
     selectItem?: (item: T) => void;
     unselectItem?: (item: T) => void;
-    itemActions?: ITypedAction<T>[];
+    itemActions?: IPageAction<T>[];
     showSelect?: boolean;
     defaultCardSubtitle?: ReactNode;
 }): JSX.Element;

package/cjs/PageTableCard.js

@@ -30,8 +30,8 @@ var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 var Details_1 = require("./components/Details");
 var IconWrapper_1 = require("./components/IconWrapper");
+var PageActions_1 = require("./PageActions/PageActions");
 var PageTable_1 = require("./PageTable");
-var TypedActions_1 = require("./TypedActions");
 function PageTableCard(props) {
     var _a;
     var item = props.item, itemToCardFn = props.itemToCardFn, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, itemActions = props.itemActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultCardSubtitle;
@@ -63,7 +63,7 @@ function PageTableCard(props) {
                                     alignItems: 'center',
                                     gap: 16,
                                     maxWidth: '100%',
-                                } }, { children: [card.icon && (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "xl" }, { children: card.icon })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: card.title }), card.subtitle ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.subtitle }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }))] })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true, collapse: "always" })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick, 
+                                } }, { children: [card.icon && (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "xl" }, { children: card.icon })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: card.title }), card.subtitle ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.subtitle }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }))] })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true, collapse: "always" })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick, 
                                 // aria-label="card checkbox example"
                                 id: "check-1" }))] }))] })), card.cardBody, card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                         display: 'flex',

package/cjs/PageTableList.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
+import { IPageAction } from './PageActions/PageAction';
 import { ITableColumn, PageTableProps } from './PageTable';
-import { ITypedAction } from './TypedActions';
 export type PageTableListProps<T extends object> = PageTableProps<T>;
 export declare function PageTableList<T extends object>(props: PageTableListProps<T>): JSX.Element;
-export declare function useColumnsToDataList<T extends object>(tableColumns: ITableColumn<T>[], keyFn: (item: T) => string | number, isSelected?: (item: T) => boolean, selectItem?: (item: T) => void, unselectItem?: (item: T) => void, rowActions?: ITypedAction<T>[], defaultCardSubtitle?: ReactNode, showSelect?: boolean): (item: T) => ReactNode;
+export declare function useColumnsToDataList<T extends object>(tableColumns: ITableColumn<T>[], keyFn: (item: T) => string | number, isSelected?: (item: T) => boolean, selectItem?: (item: T) => void, unselectItem?: (item: T) => void, rowActions?: IPageAction<T>[], defaultCardSubtitle?: ReactNode, showSelect?: boolean): (item: T) => ReactNode;

package/cjs/PageTableList.js

@@ -27,8 +27,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 var IconWrapper_1 = require("./components/IconWrapper");
+var PageActions_1 = require("./PageActions/PageActions");
 var PageTable_1 = require("./PageTable");
-var TypedActions_1 = require("./TypedActions");
 function PageTableList(props) {
     var keyFn = props.keyFn, pageItems = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, defaultCardSubtitle = props.defaultSubtitle, showSelect = props.showSelect;
     var columnsToDataList = useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect);
@@ -133,7 +133,7 @@ function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unsel
                                             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                                         return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7, whiteSpace: 'nowrap' } }, { children: column.header })) }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) })] }, column.header));
                                     }) })) }, "secondary")) : null,
-                        ] }), rowActions && ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: rowActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true }) })))] }) }), key));
+                        ] }), rowActions && ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true }) })))] }) }), key));
     }, [
         keyFn,
         isSelected,

package/cjs/PageToolbar.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
+import { IPageAction } from './PageActions/PageAction';
 import { PageTableViewType } from './PageTableViewType';
-import { ITypedAction } from './TypedActions';
 export interface IItemFilter<T extends object> {
     label: string;
     type?: 'search' | 'filter';
@@ -11,7 +11,7 @@ export interface IItemFilter<T extends object> {
     filter: (item: T, values: string[]) => boolean;
 }
 export type SetFilterValues<T extends object> = (filter: IItemFilter<T>, values: string[]) => void;
-export declare function toolbarActionsHaveBulkActions<T extends object>(actions?: ITypedAction<T>[]): boolean;
+export declare function toolbarActionsHaveBulkActions<T extends object>(actions?: IPageAction<T>[]): boolean;
 export interface IToolbarStringFilter {
     key: string;
     label: string;
@@ -36,7 +36,7 @@ export type PagetableToolbarProps<T extends object> = {
     openColumnModal?: () => void;
     keyFn: (item: T) => string | number;
     itemCount?: number;
-    toolbarActions?: ITypedAction<T>[];
+    toolbarActions?: IPageAction<T>[];
     toolbarFilters?: IToolbarFilter[];
     filters?: Record<string, string[]>;
     setFilters?: Dispatch<SetStateAction<Record<string, string[]>>>;

package/cjs/PageToolbar.js

@@ -44,11 +44,12 @@ var react_core_1 = require("@patternfly/react-core");
 var react_icons_1 = require("@patternfly/react-icons");
 var react_1 = require("react");
 var BulkSelector_1 = require("./components/BulkSelector");
-var SingleSelect_1 = require("./components/SingleSelect");
+var PageSelect_1 = require("./components/PageSelect");
 var useBreakPoint_1 = require("./components/useBreakPoint");
+var PageActions_1 = require("./PageActions/PageActions");
+var PageActionType_1 = require("./PageActions/PageActionType");
 var PageTableViewType_1 = require("./PageTableViewType");
 var Settings_1 = require("./Settings");
-var TypedActions_1 = require("./TypedActions");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 function toolbarActionsHaveBulkActions(actions) {
     var e_1, _a;
@@ -85,7 +86,7 @@ function PageTableToolbar(props) {
     var showSelect = props.showSelect === true ||
         (selectedItems !== undefined &&
             toolbarActions &&
-            toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; }));
+            toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; }));
     var showToolbar = showSelect || showSearchAndFilters || showToolbarActions;
     var _b = __read((0, react_1.useState)(function () {
         return toolbarFilters ? ((toolbarFilters === null || toolbarFilters === void 0 ? void 0 : toolbarFilters.length) > 0 ? toolbarFilters[0].key : '') : '';
@@ -111,7 +112,7 @@ function PageTableToolbar(props) {
             paddingBottom: sm ? undefined : 8,
             paddingTop: sm ? undefined : 8,
             backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-        } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(SingleSelect_1.SingleSelect2, __assign({ onChange: setSeletedFilter, value: selectedFilter }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
+        } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(PageSelect_1.PageSelect, __assign({ onSelect: setSeletedFilter, value: selectedFilter }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
                                         var _a;
                                         var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
                                         if (!values)
@@ -158,7 +159,7 @@ function PageTableToolbar(props) {
                                             return newState;
                                         });
                                     }, showToolbarItem: false }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), filter.label));
-                            })] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) }) })), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1 } }), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [openColumnModal && viewType === 'table' && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroup, __assign({ "aria-label": "table view toggle" }, { children: [PageTableViewType_1.PageTableViewTypeE.Table, PageTableViewType_1.PageTableViewTypeE.List, PageTableViewType_1.PageTableViewTypeE.Cards]
+                            })] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) })), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1 } }), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [openColumnModal && viewType === 'table' && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroup, __assign({ "aria-label": "table view toggle" }, { children: [PageTableViewType_1.PageTableViewTypeE.Table, PageTableViewType_1.PageTableViewTypeE.List, PageTableViewType_1.PageTableViewTypeE.Cards]
                                     // .filter((vt) => {
                                     //   switch (vt) {
                                     //     case PageTableViewTypeE.Cards:

package/cjs/Settings.js

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

package/cjs/components/PageFormGroup.d.ts

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

package/cjs/components/PageFormGroup.js

@@ -0,0 +1,27 @@
+"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.PageFormGroup = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+/** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
+function PageFormGroup(props) {
+    var _a;
+    var children = props.children, helperText = props.helperText, helperTextInvalid = props.helperTextInvalid, isRequired = props.isRequired, label = props.label;
+    if (!label) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
+    }
+    var id = (_a = props.id) !== null && _a !== void 0 ? _a : label === null || label === void 0 ? void 0 : label.toLocaleLowerCase().split(' ').join('-');
+    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ fieldId: id, helperText: helperText, helperTextInvalid: helperTextInvalid, id: "".concat(id, "-form-group"), isRequired: isRequired, label: label, validated: helperTextInvalid ? 'error' : undefined }, { children: children })));
+}
+exports.PageFormGroup = PageFormGroup;

package/cjs/components/PageSelect.d.ts

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

package/cjs/components/PageSelect.js

@@ -0,0 +1,54 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageSelect = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var PageFormGroup_1 = require("./PageFormGroup");
+/** Wrapper over a PatternFly Select.
+ * Simplifies the PatternFly Select.
+ * Supports a PageFormGroup with label if label is specififed.
+ */
+function PageSelect(props) {
+    var _a;
+    var children = props.children, footer = props.footer, helperTextInvalid = props.helperTextInvalid, isCreatable = props.isCreatable, isGrouped = props.isGrouped, isReadonly = props.readOnly, label = props.label, onSelect = props.onSelect, placeholder = props.placeholder, value = props.value;
+    var _b = __read((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
+    var onToggle = (0, react_1.useCallback)(function () { return setOpen(function (open) { return !open; }); }, []);
+    var onSelectHandler = (0, react_1.useCallback)(function (event, value) {
+        if (typeof value === 'string')
+            onSelect(value, event);
+        else
+            onSelect(value.toString(), event);
+        setOpen(false);
+    }, [onSelect]);
+    var id = (_a = props.id) !== null && _a !== void 0 ? _a : label === null || label === void 0 ? void 0 : label.toLocaleLowerCase().split(' ').join('-');
+    return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ "aria-describedby": id ? "".concat(id, "-form-group") : undefined, footer: footer, id: id, isCreatable: isCreatable, isGrouped: isGrouped, isInputFilterPersisted: isCreatable, isOpen: open, maxHeight: 280, onSelect: onSelectHandler, onToggle: onToggle, placeholderText: placeholder, selections: value, validated: helperTextInvalid ? 'error' : undefined, variant: react_core_1.SelectVariant.single, isDisabled: isReadonly }, { children: children })) })));
+}
+exports.PageSelect = PageSelect;

package/cjs/components/PageSelectOption.d.ts

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

package/cjs/components/PageSelectOption.js

@@ -0,0 +1,56 @@
+"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.PageSelectOption = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var PageSelect_1 = require("./PageSelect");
+function PageSelectOption(props) {
+    var onSelect = props.onSelect, value = props.value;
+    var onSelectHandler = (0, react_1.useCallback)(function (label, event) {
+        var _a;
+        onSelect((_a = props.options.find(function (option) { return option.label === label; })) === null || _a === void 0 ? void 0 : _a.value, event);
+    }, [onSelect, props.options]);
+    var options = props.options;
+    options.sort(function (l, r) {
+        var _a, _b, _c, _d;
+        if (((_a = l.group) !== null && _a !== void 0 ? _a : '') < ((_b = r.group) !== null && _b !== void 0 ? _b : ''))
+            return -1;
+        if (((_c = l.group) !== null && _c !== void 0 ? _c : '') > ((_d = r.group) !== null && _d !== void 0 ? _d : ''))
+            return 1;
+        if (l.label < r.label)
+            return -1;
+        if (l.label > r.label)
+            return 1;
+        return 0;
+    });
+    var groups = options.reduce(function (groups, option) {
+        var _a;
+        var group = (_a = option.group) !== null && _a !== void 0 ? _a : '';
+        var optionsArray = groups[group];
+        if (!optionsArray) {
+            optionsArray = [];
+            groups[group] = optionsArray;
+        }
+        optionsArray.push(option);
+        return groups;
+    }, {});
+    var isGrouped = Object.keys(groups).length > 1 ||
+        (Object.keys(groups).length === 1 && Object.keys(groups)[0] !== '');
+    var selected = props.options.find(function (option) { return option.value === value; });
+    return ((0, jsx_runtime_1.jsx)(PageSelect_1.PageSelect, __assign({}, props, { value: selected === null || selected === void 0 ? void 0 : selected.label, onSelect: onSelectHandler, isGrouped: isGrouped }, { children: !isGrouped
+            ? options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: option.label, label: option.label, description: option.description }, { children: option.label }), option.label)); })
+            : Object.keys(groups).map(function (group) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectGroup, __assign({ label: group }, { children: groups[group].map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: option.label, label: option.label, description: option.description }, { children: option.label }), option.label)); }) }), group)); }) })));
+}
+exports.PageSelectOption = PageSelectOption;

package/cjs/components/useOpen.d.ts

@@ -1,4 +1,4 @@
-export declare function useOpen(props: {
+export declare function useOpen(props?: {
     open?: boolean;
     setOpen?: (open: boolean) => void;
 }): [boolean, (open: boolean) => void, () => void];