@ansible/ansible-ui-framework 0.0.477 → 0.0.479

package/cjs/PageActions/PageAction.d.ts

@@ -12,23 +12,41 @@ export interface IPageActionCommon {
 export interface IPageActionSeperator {
     type: PageActionType.seperator;
 }
-export type IPageActionButton = IPageActionCommon & {
+type IPageActionWithLink = IPageActionCommon & {
+    type: PageActionType.button;
+    variant?: ButtonVariant;
+    href: string;
+    onClick?: never;
+};
+type IPageActionWithOnClick = IPageActionCommon & {
     type: PageActionType.button;
     variant?: ButtonVariant;
     onClick: () => void;
+    href?: never;
 };
+export type IPageActionButton = IPageActionWithLink | IPageActionWithOnClick;
 export type IPageBulkAction<T extends object> = IPageActionCommon & {
     type: PageActionType.bulk;
     variant?: ButtonVariant;
     onClick: (selectedItems: T[]) => void;
 };
-export type IPageSingleAction<T extends object> = IPageActionCommon & {
+type IPageSingleActionWithLink<T extends object> = IPageActionCommon & {
+    type: PageActionType.singleLink;
+    variant?: ButtonVariant;
+    href: (item: T) => string;
+    onClick?: never;
+    isDisabled?: (item: T) => string | undefined;
+    isHidden?: (item: T) => boolean;
+};
+type IPageSingleActionWithOnClick<T extends object> = IPageActionCommon & {
     type: PageActionType.single;
     variant?: ButtonVariant;
     onClick: (item: T) => void;
+    href?: never;
     isDisabled?: (item: T) => string | undefined;
     isHidden?: (item: T) => boolean;
 };
+export type IPageSingleAction<T extends object> = IPageSingleActionWithLink<T> | IPageSingleActionWithOnClick<T>;
 export type IPageDropdownAction<T extends object> = IPageActionCommon & {
     type: PageActionType.dropdown;
     variant?: ButtonVariant;
@@ -36,3 +54,4 @@ export type IPageDropdownAction<T extends object> = IPageActionCommon & {
     isDisabled?: (item: T) => string;
     options: IPageAction<T>[];
 };
+export {};

package/cjs/PageActions/PageActionType.d.ts

@@ -2,6 +2,7 @@ export declare enum PageActionType {
     seperator = "seperator",
     button = "button",
     single = "single",
+    singleLink = "singleLink",
     bulk = "bulk",
     dropdown = "dropdown"
 }

package/cjs/PageActions/PageActionType.js

@@ -6,6 +6,7 @@ var PageActionType;
     PageActionType["seperator"] = "seperator";
     PageActionType["button"] = "button";
     PageActionType["single"] = "single";
+    PageActionType["singleLink"] = "singleLink";
     PageActionType["bulk"] = "bulk";
     PageActionType["dropdown"] = "dropdown";
 })(PageActionType = exports.PageActionType || (exports.PageActionType = {}));

package/cjs/PageActions/PageActions.js

@@ -57,6 +57,7 @@ function isPinnedAction(action) {
 function isHiddenAction(action, selectedItem) {
     switch (action.type) {
         case PageActionType_1.PageActionType.single:
+        case PageActionType_1.PageActionType.singleLink:
         case PageActionType_1.PageActionType.dropdown:
             return action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
         case PageActionType_1.PageActionType.bulk:

package/cjs/PageActions/PageButtonAction.js

@@ -15,6 +15,7 @@ exports.PageButtonAction = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
 function PageButtonAction(props) {
     var _a, _b;
     var action = props.action, isSecondary = props.isSecondary, wrapper = props.wrapper;
@@ -32,6 +33,8 @@ function PageButtonAction(props) {
     if (props.iconOnly) {
         variant = react_core_1.ButtonVariant.plain;
     }
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ id: props.action.label.toLowerCase().split(' ').join('-'), variant: variant, isDanger: action.isDanger, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
+    var id = props.action.label.toLowerCase().split(' ').join('-');
+    var content = props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label;
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ id: id, variant: variant, isDanger: action.isDanger, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick ? action.onClick : undefined, component: action.href ? function (props) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: action.href })); } : undefined }, { children: content })) })) }));
 }
 exports.PageButtonAction = PageButtonAction;

package/cjs/PageActions/PageDropdownAction.js

@@ -41,6 +41,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_icons_1 = require("@patternfly/react-icons");
 var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
 var PageActions_1 = require("./PageActions");
 var PageActionType_1 = require("./PageActionType");
 function PageDropdownAction(props) {
@@ -72,14 +73,17 @@ exports.PageDropdownAction = PageDropdownAction;
 function PageDropdownActionItem(props) {
     var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, hasIcons = props.hasIcons, index = props.index;
     switch (action.type) {
-        case PageActionType_1.PageActionType.single: {
+        case PageActionType_1.PageActionType.single:
+        case PageActionType_1.PageActionType.singleLink: {
             var Icon = action.icon;
             if (!Icon && hasIcons)
                 Icon = TransparentIcon;
             var tooltip = action.tooltip;
             var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
             tooltip = isDisabled ? isDisabled : tooltip;
-            return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: function () { return selectedItem && action.onClick(selectedItem); }, isAriaDisabled: Boolean(isDisabled), icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
+            return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: action.onClick ? function () { return selectedItem && action.onClick(selectedItem); } : undefined, component: action.href
+                        ? function (props) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: selectedItem ? action.href(selectedItem) : '' }))); }
+                        : undefined, isAriaDisabled: Boolean(isDisabled), icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
                         color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
                     } }, { children: action.label })) }), action.label));
         }
@@ -94,7 +98,7 @@ function PageDropdownActionItem(props) {
                 tooltip = 'No selections';
                 isDisabled = true;
             }
-            return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: function () { return action.onClick(selectedItems); }, isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
+            return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: action.onClick ? function () { return action.onClick(selectedItems); } : undefined, component: !action.onClick ? function (props) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: action.href })); } : undefined, isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
                         color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
                     } }, { children: action.label })) }), action.label));
         }

package/cjs/PageActions/PagePinnedActions.js

@@ -32,7 +32,8 @@ function PagePinnedAction(props) {
         case PageActionType_1.PageActionType.seperator: {
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         }
-        case PageActionType_1.PageActionType.single: {
+        case PageActionType_1.PageActionType.single:
+        case PageActionType_1.PageActionType.singleLink: {
             return ((0, jsx_runtime_1.jsx)(PageSingleAction_1.PageSingleAction, { action: action, selectedItem: selectedItem, iconOnly: props.iconOnly, wrapper: wrapper }));
         }
         case PageActionType_1.PageActionType.bulk: {

package/cjs/PageActions/PageSingleAction.js

@@ -15,6 +15,7 @@ exports.PageSingleAction = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
 function PageSingleAction(props) {
     var _a, _b;
     var action = props.action, selectedItem = props.selectedItem, wrapper = props.wrapper;
@@ -30,6 +31,8 @@ function PageSingleAction(props) {
     if (props.iconOnly) {
         variant = react_core_1.ButtonVariant.plain;
     }
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ id: props.action.label.toLowerCase().split(' ').join('-'), variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { marginLeft: -4, paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: Boolean(isDisabled), onClick: function () { return selectedItem && action.onClick(selectedItem); }, isDanger: action.isDanger }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ id: props.action.label.toLowerCase().split(' ').join('-'), variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { marginLeft: -4, paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: Boolean(isDisabled), onClick: action.onClick ? function () { return selectedItem && action.onClick(selectedItem); } : undefined, component: action.href
+                    ? function (props) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({}, props, { to: selectedItem && action.href(selectedItem) })); }
+                    : undefined, isDanger: action.isDanger }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
 }
 exports.PageSingleAction = PageSingleAction;

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { CheckboxProps } from '@patternfly/react-core';
-import { Validate } from 'react-hook-form';
-export type PageFormCheckboxProps = {
+import { FieldPath, FieldPathValue, FieldValues, Validate } from 'react-hook-form';
+export type PageFormCheckboxProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     id?: string;
-    name: string;
-    validate?: Validate<string> | Record<string, Validate<string>>;
+    name: TFieldName;
+    validate?: Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues> | Record<string, Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>>;
 } & Omit<CheckboxProps, 'id' | 'onChange' | 'value'>;
 /** PatternFly Checkbox wrapper for use with react-hook-form */
-export declare function PageFormCheckbox(props: PageFormCheckboxProps): JSX.Element;
+export declare function PageFormCheckbox<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormCheckboxProps<TFieldValues, TFieldName>): JSX.Element;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { Validate } from 'react-hook-form';
+import { FieldPath, FieldPathValue, FieldValues, Validate } from 'react-hook-form';
 import { FormGroupSelectOptionProps } from './FormGroupSelectOption';
-export type PageFormSelectOptionProps<T> = {
-    name: string;
-    validate?: Validate<string> | Record<string, Validate<string>>;
-} & Omit<FormGroupSelectOptionProps<T>, 'onSelect' | 'value'>;
+export type PageFormSelectOptionProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TSelection = unknown> = {
+    name: TFieldName;
+    validate?: Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues> | Record<string, Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>>;
+} & Omit<FormGroupSelectOptionProps<TSelection>, 'onSelect' | 'value'>;
 /**  Select wrapper for use with react-hook-form */
-export declare function PageFormSelectOption<T>(props: PageFormSelectOptionProps<T>): JSX.Element;
+export declare function PageFormSelectOption<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TSelection = unknown>(props: PageFormSelectOptionProps<TFieldValues, TFieldName, TSelection>): JSX.Element;

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { Validate, ValidationRule } from 'react-hook-form';
+import { FieldPath, FieldPathValue, FieldValues, Validate, ValidationRule } from 'react-hook-form';
 import { FormGroupTextAreaProps } from './FormGroupTextArea';
-export type PageFormTextAreaProps = {
-    name: string;
+export type PageFormTextAreaProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TFieldName;
     minLength?: number | ValidationRule<number>;
     maxLength?: number | ValidationRule<number>;
     pattern?: ValidationRule<RegExp>;
-    validate?: Validate<string> | Record<string, Validate<string>>;
+    validate?: Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues> | Record<string, Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>>;
 } & Omit<FormGroupTextAreaProps, 'onChange' | 'value'>;
 /** PatternFly TextArea wrapper for use with react-hook-form */
-export declare function PageFormTextArea(props: PageFormTextAreaProps): JSX.Element;
+export declare function PageFormTextArea<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormTextAreaProps<TFieldValues, TFieldName>): JSX.Element;

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

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

@@ -30,7 +30,9 @@ function PageFormTextInput(props) {
                         return (_a = props.selectOpen) === null || _a === void 0 ? void 0 : _a.call(props, function (item) {
                             if (props.selectValue) {
                                 var value_1 = props.selectValue(item);
-                                setValue(name, value_1, { shouldValidate: true });
+                                setValue(name, value_1, {
+                                    shouldValidate: true,
+                                });
                             }
                         }, props.selectTitle);
                     }, "aria-label": "Options menu", isDisabled: isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.SearchIcon, {}) }))) })));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.477",
+  "version": "0.0.479",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",