@ansible/ansible-ui-framework 0.0.373 → 0.0.374

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

@@ -46,9 +46,10 @@ var react_1 = require("react");
 var BulkSelector_1 = require("./components/BulkSelector");
 var SingleSelect_1 = require("./components/SingleSelect");
 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 : '') : '';
@@ -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/index.d.ts

@@ -15,6 +15,9 @@ export * from './components/icons/RunningIcon';
 export * from './components/pfcolors';
 export * from './components/Scrollable';
 export * from './components/useBreakPoint';
+export * from './PageActions/PageAction';
+export * from './PageActions/PageActions';
+export * from './PageActions/PageActionType';
 export * from './PageAlertToaster';
 export * from './PageBody';
 export * from './PageDataList';
@@ -29,7 +32,6 @@ export * from './PageTableDetails';
 export * from './PageTabs';
 export * from './PageToolbar';
 export * from './Settings';
-export * from './TypedActions';
 export * from './useFrameworkTranslations';
 export * from './useInMemoryView';
 export * from './useSelectDialog';

package/cjs/index.js

@@ -31,6 +31,9 @@ __exportStar(require("./components/icons/RunningIcon"), exports);
 __exportStar(require("./components/pfcolors"), exports);
 __exportStar(require("./components/Scrollable"), exports);
 __exportStar(require("./components/useBreakPoint"), exports);
+__exportStar(require("./PageActions/PageAction"), exports);
+__exportStar(require("./PageActions/PageActions"), exports);
+__exportStar(require("./PageActions/PageActionType"), exports);
 __exportStar(require("./PageAlertToaster"), exports);
 __exportStar(require("./PageBody"), exports);
 __exportStar(require("./PageDataList"), exports);
@@ -45,7 +48,6 @@ __exportStar(require("./PageTableDetails"), exports);
 __exportStar(require("./PageTabs"), exports);
 __exportStar(require("./PageToolbar"), exports);
 __exportStar(require("./Settings"), exports);
-__exportStar(require("./TypedActions"), exports);
 __exportStar(require("./useFrameworkTranslations"), exports);
 __exportStar(require("./useInMemoryView"), exports);
 __exportStar(require("./useSelectDialog"), exports);

package/docs/components/PageHeader.md

@@ -23,7 +23,7 @@ PageHeader enables the responsive layout of the header.
       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/package.json

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

package/cjs/TypedActions/TypedActions.d.ts

@@ -1,76 +0,0 @@
-import { ButtonVariant, DropdownPosition } from '@patternfly/react-core';
-import { ComponentClass, FunctionComponent } from 'react';
-import { WindowSize } from '../components/useBreakPoint';
-export declare enum TypedActionType {
-    seperator = "seperator",
-    button = "button",
-    single = "single",
-    bulk = "bulk",
-    dropdown = "dropdown"
-}
-export interface ITypedActionSeperator {
-    type: TypedActionType.seperator;
-}
-interface ITypedActionCommon {
-    icon?: ComponentClass;
-    label: string;
-    shortLabel?: string;
-    tooltip?: string;
-    isDanger?: boolean;
-}
-export type ITypedActionButton = ITypedActionCommon & {
-    type: TypedActionType.button;
-    variant?: ButtonVariant;
-    onClick: () => void;
-};
-export type ITypedBulkAction<T extends object> = ITypedActionCommon & {
-    type: TypedActionType.bulk;
-    variant?: ButtonVariant;
-    onClick: (selectedItems: T[]) => void;
-};
-export type ITypedSingleAction<T extends object> = ITypedActionCommon & {
-    type: TypedActionType.single;
-    variant?: ButtonVariant;
-    onClick: (item: T) => void;
-    isDisabled?: (item: T) => string;
-    isHidden?: (item: T) => boolean;
-};
-export type ITypedDropdownAction<T extends object> = ITypedActionCommon & {
-    type: TypedActionType.dropdown;
-    variant?: ButtonVariant;
-    isHidden?: (item: T) => boolean;
-    isDisabled?: (item: T) => string;
-    options: ITypedAction<T>[];
-};
-export type ITypedAction<T extends object> = ITypedActionSeperator | ITypedActionButton | ITypedBulkAction<T> | ITypedSingleAction<T> | ITypedDropdownAction<T>;
-export declare function TypedActionsDropdown<T extends object>(props: {
-    actions: ITypedAction<T>[];
-    label?: string;
-    icon?: ComponentClass | FunctionComponent;
-    isDisabled?: boolean;
-    tooltip?: string;
-    isPrimary?: boolean;
-    selectedItems?: T[];
-    selectedItem?: T;
-    position?: DropdownPosition;
-    iconOnly?: boolean;
-}): JSX.Element;
-export declare function DropdownActionItem<T extends object>(props: {
-    action: ITypedAction<T>;
-    selectedItems: T[];
-    selectedItem?: T;
-    hasIcons: boolean;
-    index: number;
-}): JSX.Element | null;
-export declare function TypedActions<T extends object>(props: {
-    actions: ITypedAction<T>[];
-    selectedItems?: T[];
-    selectedItem?: T;
-    wrapper?: ComponentClass | FunctionComponent;
-    collapse?: WindowSize | 'always';
-    noPrimary?: boolean;
-    position?: DropdownPosition;
-    iconOnly?: boolean;
-    isFilled?: boolean;
-}): JSX.Element;
-export {};

package/cjs/TypedActions/TypedActions.js

@@ -1,159 +0,0 @@
-"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.TypedActions = exports.DropdownActionItem = exports.TypedActionsDropdown = exports.TypedActionType = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_core_1 = require("@patternfly/react-core");
-var react_icons_1 = require("@patternfly/react-icons");
-var react_1 = require("react");
-var useBreakPoint_1 = require("../components/useBreakPoint");
-var TypedActionsButtons_1 = require("./TypedActionsButtons");
-var TypedActionType;
-(function (TypedActionType) {
-    TypedActionType["seperator"] = "seperator";
-    TypedActionType["button"] = "button";
-    TypedActionType["single"] = "single";
-    TypedActionType["bulk"] = "bulk";
-    TypedActionType["dropdown"] = "dropdown";
-})(TypedActionType = exports.TypedActionType || (exports.TypedActionType = {}));
-function TypedActionsDropdown(props) {
-    var actions = props.actions, label = props.label, icon = props.icon, _a = props.isPrimary, isPrimary = _a === void 0 ? false : _a, selectedItems = props.selectedItems, selectedItem = props.selectedItem, iconOnly = props.iconOnly, isDisabled = props.isDisabled, tooltip = props.tooltip;
-    var _b = __read((0, react_1.useState)(false), 2), dropdownOpen = _b[0], setDropdownOpen = _b[1];
-    var hasItemActions = (0, react_1.useMemo)(function () { return !actions.every(function (action) { return action.type !== TypedActionType.bulk; }); }, [actions]);
-    var hasIcons = (0, react_1.useMemo)(function () {
-        return actions.find(function (action) { return action.type !== TypedActionType.seperator && action.icon !== undefined; }) !== undefined;
-    }, [actions]);
-    if (actions.length === 0)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    var Icon = icon;
-    var Toggle = label || Icon ? react_core_1.DropdownToggle : react_core_1.KebabToggle;
-    var dropdown = ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: (0, jsx_runtime_1.jsx)(Toggle, __assign({ id: "toggle-kebab", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: hasItemActions && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? 'primary' : undefined, isPrimary: isPrimary, toggleIndicator: Icon ? null : undefined, style: isPrimary && !label
-                ? {
-                    color: 'var(--pf-global--Color--light-100)',
-                }
-                : {} }, { children: Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label })), isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(DropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: {
-            zIndex: 201,
-        } }));
-    return tooltip && (iconOnly || isDisabled) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: dropdown }))) : (__assign({}, dropdown));
-}
-exports.TypedActionsDropdown = TypedActionsDropdown;
-function DropdownActionItem(props) {
-    var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, hasIcons = props.hasIcons, index = props.index;
-    switch (action.type) {
-        case TypedActionType.single: {
-            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;
-            var isHidden = action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
-            if (isHidden) {
-                return null;
-            }
-            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: {
-                        color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
-                    } }, { children: action.label })) }), action.label));
-        }
-        case TypedActionType.button:
-        case TypedActionType.bulk: {
-            var Icon = action.icon;
-            if (!Icon && hasIcons)
-                Icon = TransparentIcon;
-            var tooltip = action.tooltip;
-            var isDisabled = false;
-            if (action.type === TypedActionType.bulk && !selectedItems.length) {
-                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: {
-                        color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
-                    } }, { children: action.label })) }), action.label));
-        }
-        case TypedActionType.dropdown: {
-            var isHidden = action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
-            if (isHidden) {
-                return null;
-            }
-            var tooltip = action.label;
-            var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
-            tooltip = isDisabled ? isDisabled : tooltip;
-            return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { label: action.label, actions: action.options, selectedItem: selectedItem, isDisabled: Boolean(isDisabled), tooltip: tooltip }, action.label));
-        }
-        case TypedActionType.seperator:
-            return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
-        default:
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    }
-}
-exports.DropdownActionItem = DropdownActionItem;
-function TypedActions(props) {
-    var _a, _b;
-    var actions = props.actions;
-    var bp = (0, useBreakPoint_1.useBreakpoint)(props.collapse !== 'always' ? (_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg' : 'lg');
-    var collapseButtons = props.collapse === 'always' || !bp;
-    var isButtonAction = (0, react_1.useCallback)(function (action) {
-        var actionVariants = [
-            react_core_1.ButtonVariant.primary,
-            react_core_1.ButtonVariant.secondary,
-            react_core_1.ButtonVariant.danger,
-        ];
-        return action.type !== TypedActionType.seperator && actionVariants.includes(action.variant);
-    }, []);
-    var isHidden = (0, react_1.useCallback)(function (action) {
-        return (action.type === TypedActionType.single || action.type === TypedActionType.dropdown) &&
-            action.isHidden !== undefined &&
-            props.selectedItem
-            ? action.isHidden(props.selectedItem)
-            : false;
-    }, [props.selectedItem]);
-    var buttonActions = (0, react_1.useMemo)(function () {
-        var _a;
-        if (collapseButtons) {
-            return [];
-        }
-        return ((_a = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) { return isButtonAction(action) && !isHidden(action); })) !== null && _a !== void 0 ? _a : []);
-    }, [collapseButtons, actions, isButtonAction, isHidden]);
-    var dropdownActions = (0, react_1.useMemo)(function () {
-        var _a;
-        if (collapseButtons) {
-            return actions !== null && actions !== void 0 ? actions : [];
-        }
-        var dropdownActions = (_a = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) { return !isButtonAction(action) && !isHidden(action); })) !== null && _a !== void 0 ? _a : [];
-        while (dropdownActions.length && dropdownActions[0].type === TypedActionType.seperator)
-            dropdownActions.shift();
-        while (dropdownActions.length &&
-            dropdownActions[dropdownActions.length - 1].type === TypedActionType.seperator)
-            dropdownActions.pop();
-        return dropdownActions;
-    }, [collapseButtons, actions, isButtonAction, isHidden]);
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ style: props.isFilled ? { width: '100%' } : undefined, hasGutter: !props.iconOnly }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true }, { children: (0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionsButtons, __assign({}, props, { actions: buttonActions })) })), (0, jsx_runtime_1.jsx)(TypedActionsDropdown, __assign({}, props, { actions: dropdownActions, selectedItem: props.selectedItem, position: props.position, isPrimary: !!((_b = props.selectedItems) === null || _b === void 0 ? void 0 : _b.length) }))] })));
-}
-exports.TypedActions = TypedActions;
-var TransparentIcon = function () { return (0, jsx_runtime_1.jsx)(react_icons_1.CircleIcon, { style: { opacity: 0 } }); };

package/cjs/TypedActions/TypedActionsButtons.d.ts

@@ -1,18 +0,0 @@
-import { ComponentClass, FunctionComponent } from 'react';
-import { ITypedAction } from './TypedActions';
-export declare function TypedActionsButtons<T extends object>(props: {
-    actions: ITypedAction<T>[];
-    selectedItems?: T[];
-    selectedItem?: T;
-    wrapper?: ComponentClass | FunctionComponent;
-    noPrimary?: boolean;
-    iconOnly?: boolean;
-}): JSX.Element;
-export declare function TypedActionButton<T extends object>(props: {
-    action: ITypedAction<T>;
-    selectedItems?: T[];
-    selectedItem?: T;
-    wrapper?: ComponentClass | FunctionComponent;
-    noPrimary?: boolean;
-    iconOnly?: boolean;
-}): JSX.Element;

package/cjs/TypedActions/TypedActionsButtons.js

@@ -1,113 +0,0 @@
-"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.TypedActionButton = exports.TypedActionsButtons = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_core_1 = require("@patternfly/react-core");
-var react_1 = require("react");
-var TypedActions_1 = require("./TypedActions");
-function TypedActionsButtons(props) {
-    var actions = props.actions, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper, iconOnly = props.iconOnly;
-    if (actions.length === 0)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Split, __assign({ hasGutter: true }, { children: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: action, selectedItems: selectedItems, selectedItem: selectedItem, wrapper: wrapper, iconOnly: iconOnly }, index)); }) })));
-}
-exports.TypedActionsButtons = TypedActionsButtons;
-function TypedActionButton(props) {
-    var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper, noPrimary = props.noPrimary;
-    switch (action.type) {
-        case TypedActions_1.TypedActionType.seperator: {
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-        }
-        case TypedActions_1.TypedActionType.single: {
-            return ((0, jsx_runtime_1.jsx)(ActionSingleButton, { action: action, selectedItem: selectedItem, noPrimary: noPrimary, iconOnly: props.iconOnly, wrapper: wrapper }));
-        }
-        case TypedActions_1.TypedActionType.bulk: {
-            return ((0, jsx_runtime_1.jsx)(ActionBulkButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
-        }
-        case TypedActions_1.TypedActionType.button: {
-            return ((0, jsx_runtime_1.jsx)(ActionButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
-        }
-        case TypedActions_1.TypedActionType.dropdown: {
-            var tooltip = action.label;
-            var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
-            tooltip = isDisabled ? isDisabled : tooltip;
-            return ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActionsDropdown, { actions: action.options, selectedItems: selectedItems, selectedItem: selectedItem, label: action.label, icon: action.icon, iconOnly: props.iconOnly, position: react_core_1.DropdownPosition.right, isDisabled: Boolean(isDisabled), tooltip: props.iconOnly || isDisabled ? tooltip : undefined, isPrimary: action.variant === react_core_1.ButtonVariant.primary && !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) }));
-        }
-        default: {
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-        }
-    }
-}
-exports.TypedActionButton = TypedActionButton;
-function ActionButton(props) {
-    var _a;
-    var action = props.action, selectedItems = props.selectedItems, noPrimary = props.noPrimary, wrapper = props.wrapper;
-    var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
-    var Icon = action.icon;
-    var tooltip = action.tooltip;
-    var isDisabled = false;
-    var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
-    if (selectedItems &&
-        selectedItems.length &&
-        [react_core_1.ButtonVariant.primary, react_core_1.ButtonVariant.danger].includes(variant)) {
-        variant = react_core_1.ButtonVariant.secondary;
-    }
-    if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
-        variant = react_core_1.ButtonVariant.secondary;
-    }
-    if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
-        variant = react_core_1.ButtonVariant.danger;
-    }
-    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({ 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: action.shortLabel ? action.shortLabel : action.label })) })) }));
-}
-function ActionBulkButton(props) {
-    var _a;
-    var action = props.action, noPrimary = props.noPrimary, selectedItems = props.selectedItems, wrapper = props.wrapper;
-    var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
-    var Icon = action.icon;
-    var tooltip = action.tooltip;
-    var isDisabled = false;
-    var variant = (_a = action.variant) !== null && _a !== void 0 ? _a : react_core_1.ButtonVariant.secondary;
-    if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
-        variant = react_core_1.ButtonVariant.secondary;
-    }
-    if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
-        variant = react_core_1.ButtonVariant.danger;
-    }
-    if (!selectedItems || !selectedItems.length) {
-        tooltip = 'No selections';
-        isDisabled = true;
-    }
-    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({ variant: variant, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: function () { return action.onClick(selectedItems !== null && selectedItems !== void 0 ? selectedItems : []); }, isDanger: action.isDanger }, { children: action.shortLabel ? action.shortLabel : action.label })) })) }));
-}
-function ActionSingleButton(props) {
-    var _a, _b;
-    var action = props.action, selectedItem = props.selectedItem, noPrimary = props.noPrimary, wrapper = props.wrapper;
-    var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
-    var Icon = action.icon;
-    var tooltip = ((_a = action.tooltip) !== null && _a !== void 0 ? _a : props.iconOnly) ? props.action.label : undefined;
-    var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
-    tooltip = isDisabled ? isDisabled : tooltip;
-    var variant = (_b = action.variant) !== null && _b !== void 0 ? _b : react_core_1.ButtonVariant.secondary;
-    if (variant === react_core_1.ButtonVariant.primary && noPrimary) {
-        variant = react_core_1.ButtonVariant.secondary;
-    }
-    if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
-        variant = react_core_1.ButtonVariant.danger;
-    }
-    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({ 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 })) })) }));
-}

package/cjs/TypedActions/index.d.ts

@@ -1,2 +0,0 @@
-export * from './TypedActions';
-export * from './TypedActionsButtons';

package/cjs/TypedActions/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TypedActions"), exports);
-__exportStar(require("./TypedActionsButtons"), exports);