@ansible/ansible-ui-framework 0.0.190

package/mjs/framework/TypedActions.js

@@ -0,0 +1,251 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, KebabToggle, Split, SplitItem, Tooltip, } from '@patternfly/react-core';
+import { CircleIcon } from '@patternfly/react-icons';
+import { Fragment, useCallback, useMemo, useState } from 'react';
+import { useBreakpoint } from './components/useBreakPoint';
+export var TypedActionType;
+(function (TypedActionType) {
+    TypedActionType["seperator"] = "seperator";
+    TypedActionType["button"] = "button";
+    TypedActionType["single"] = "single";
+    TypedActionType["bulk"] = "bulk";
+    TypedActionType["dropdown"] = "dropdown";
+})(TypedActionType || (TypedActionType = {}));
+export function TypedActionsDropdown(props) {
+    const { actions, label, isPrimary = false, selectedItems } = props;
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const hasItemActions = useMemo(() => !actions.every((action) => action.type !== TypedActionType.bulk), [actions]);
+    const hasIcons = useMemo(() => actions.find((action) => action.type !== TypedActionType.seperator && action.icon !== undefined) !== undefined, [actions]);
+    if (actions.length === 0)
+        return _jsx(_Fragment, {});
+    const Toggle = label ? DropdownToggle : KebabToggle;
+    return (_jsx(Dropdown, { onSelect: () => setDropdownOpen(false), toggle: _jsx(Toggle, { id: "toggle-kebab", onToggle: () => setDropdownOpen(!dropdownOpen), toggleVariant: hasItemActions && selectedItems?.length ? 'primary' : undefined, isPrimary: isPrimary, style: isPrimary && !label
+                ? {
+                    color: 'var(--pf-global--Color--light-100)',
+                }
+                : {}, children: label }), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map((action, index) => {
+            switch (action.type) {
+                case TypedActionType.button:
+                case TypedActionType.bulk: {
+                    let Icon = action.icon;
+                    if (!Icon && hasIcons)
+                        Icon = TransparentIcon;
+                    let tooltip = action.tooltip;
+                    let isDisabled = false;
+                    if (action.type === TypedActionType.bulk && (!selectedItems || !selectedItems.length)) {
+                        tooltip = 'No selections';
+                        isDisabled = true;
+                    }
+                    return (_jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(DropdownItem, { onClick: () => action.onClick(selectedItems ?? []), isAriaDisabled: isDisabled, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, 
+                            // style={{ color: 'var(--pf-global--primary-color--100)' }}
+                            style: {
+                                color: action.isDanger && !isDisabled
+                                    ? 'var(--pf-global--danger-color--100)'
+                                    : undefined,
+                            }, children: action.label }) }, action.label));
+                }
+                case TypedActionType.dropdown:
+                    return (_jsx(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
+                case TypedActionType.seperator:
+                    return _jsx(DropdownSeparator, {}, `separator-${index}`);
+            }
+        }), position: props.position, style: { zIndex: 201 } }));
+}
+export function TypedActionsButtons(props) {
+    const { actions, selectedItems, wrapper } = props;
+    if (actions.length === 0)
+        return _jsx(_Fragment, {});
+    return (_jsx(Split, { hasGutter: true, children: actions.map((action, index) => (_jsx(TypedActionButton, { action: action, selectedItems: selectedItems, wrapper: wrapper }, index))) }));
+}
+export function TypedActionButton(props) {
+    const { action, selectedItems, selectedItem, wrapper, noPrimary } = props;
+    const Wrapper = wrapper ?? Fragment;
+    switch (action.type) {
+        case TypedActionType.seperator: {
+            return _jsx(_Fragment, {});
+        }
+        case TypedActionType.single: {
+            const Icon = action.icon;
+            const tooltip = action.tooltip;
+            const isDisabled = false;
+            let variant = action.variant ?? ButtonVariant.secondary;
+            if (variant === ButtonVariant.primary && noPrimary) {
+                variant = ButtonVariant.secondary;
+            }
+            if (variant === ButtonVariant.primary && action.isDanger) {
+                variant = ButtonVariant.danger;
+            }
+            if (props.iconOnly) {
+                variant = ButtonVariant.plain;
+            }
+            return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { marginLeft: -4, paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => selectedItem && action.onClick(selectedItem), isDanger: action.isDanger, children: props.iconOnly && Icon ? (_jsx(Icon, {})) : action.shortLabel ? (action.shortLabel) : (action.label) }) }) }));
+        }
+        case TypedActionType.bulk: {
+            const Icon = action.icon;
+            let tooltip = action.tooltip;
+            let isDisabled = false;
+            let variant = action.variant ?? ButtonVariant.secondary;
+            if (variant === ButtonVariant.primary && noPrimary) {
+                variant = ButtonVariant.secondary;
+            }
+            if (variant === ButtonVariant.primary && action.isDanger) {
+                variant = ButtonVariant.danger;
+            }
+            if (!selectedItems || !selectedItems.length) {
+                tooltip = 'No selections';
+                isDisabled = true;
+            }
+            return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: () => action.onClick(selectedItems ?? []), isDanger: action.isDanger, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
+        }
+        case TypedActionType.button: {
+            const Icon = action.icon;
+            const tooltip = action.tooltip;
+            const isDisabled = false;
+            let variant = action.variant ?? ButtonVariant.secondary;
+            if (selectedItems && selectedItems.length) {
+                switch (variant) {
+                    case ButtonVariant.danger:
+                    case ButtonVariant.primary:
+                        variant = ButtonVariant.secondary;
+                        break;
+                }
+            }
+            if (variant === ButtonVariant.primary && noPrimary) {
+                variant = ButtonVariant.secondary;
+            }
+            if (variant === ButtonVariant.primary && action.isDanger) {
+                variant = ButtonVariant.danger;
+            }
+            return (_jsx(Wrapper, { children: _jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(Button, { variant: variant, isDanger: action.isDanger, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _jsx(Icon, {}) })) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick, children: action.shortLabel ? action.shortLabel : action.label }) }) }));
+        }
+        case TypedActionType.dropdown: {
+            return (_jsx(TypedActionsDropdown, { actions: action.options, label: action.label, isPrimary: action.variant === ButtonVariant.primary && !selectedItems?.length }));
+        }
+    }
+}
+export function TypedActions(props) {
+    const { actions } = props;
+    const collapseButtons = !useBreakpoint(props.collapse ?? 'lg');
+    const isButtonAction = useCallback((action) => {
+        const actionVariants = [
+            ButtonVariant.primary,
+            ButtonVariant.secondary,
+            ButtonVariant.danger,
+        ];
+        return action.type !== TypedActionType.seperator && actionVariants.includes(action.variant);
+    }, []);
+    const buttonActions = useMemo(() => {
+        if (collapseButtons) {
+            return [];
+        }
+        return actions?.filter(isButtonAction) ?? [];
+    }, [collapseButtons, actions, isButtonAction]);
+    const dropdownActions = useMemo(() => {
+        if (collapseButtons) {
+            return actions ?? [];
+        }
+        const dropdownActions = actions?.filter((action) => !isButtonAction(action)) ?? [];
+        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]);
+    return (_jsxs(Split, { hasGutter: true, children: [_jsx(TypedActionsButtons, { ...props, actions: buttonActions }), _jsx(TypedActionsDropdown, { ...props, actions: dropdownActions, position: props.position, isPrimary: !!props.selectedItems?.length })] }));
+}
+const TransparentIcon = () => _jsx(CircleIcon, { style: { opacity: 0 } });
+export function useTypedActionsToTableActions(props) {
+    const { actions } = props;
+    const collapseButtons = !useBreakpoint(props.collapse ?? 'lg');
+    const buttonActions = useMemo(() => {
+        if (collapseButtons) {
+            return [];
+        }
+        else {
+            const buttonActions = actions?.filter((action) => (action.type === TypedActionType.button ||
+                action.type === TypedActionType.bulk ||
+                action.type === TypedActionType.single) &&
+                (action.variant === ButtonVariant.primary ||
+                    action.variant === ButtonVariant.secondary ||
+                    action.variant === ButtonVariant.danger));
+            return buttonActions ?? [];
+        }
+    }, [collapseButtons, actions]);
+    const dropdownActions = useMemo(() => {
+        if (collapseButtons) {
+            return actions ?? [];
+        }
+        else {
+            let dropdownActions = actions?.filter((action) => !((action.type === TypedActionType.button ||
+                action.type === TypedActionType.bulk ||
+                action.type === TypedActionType.single) &&
+                (action.variant === ButtonVariant.primary ||
+                    action.variant === ButtonVariant.secondary ||
+                    action.variant === ButtonVariant.danger)));
+            dropdownActions = dropdownActions ?? [];
+            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]);
+    return [
+        ...buttonActions.map((buttonAction) => {
+            switch (buttonAction.type) {
+                case TypedActionType.button:
+                    return {
+                        title: _jsx(TypedActionButton, { action: buttonAction }),
+                        isOutsideDropdown: true,
+                    };
+                case TypedActionType.single:
+                    return {
+                        title: (_jsx(TypedActionButton, { action: { ...buttonAction, tooltip: buttonAction.label }, selectedItem: props.item, iconOnly: true })),
+                        isOutsideDropdown: true,
+                    };
+                case TypedActionType.bulk:
+                    return {
+                        title: (_jsx(TypedActionButton, { action: buttonAction, selectedItems: props.item ? [props.item] : [] })),
+                        isOutsideDropdown: true,
+                    };
+                default:
+                    return null;
+            }
+        }),
+        ...dropdownActions.map((buttonAction) => {
+            switch (buttonAction.type) {
+                case TypedActionType.button: {
+                    const Icon = buttonAction.icon;
+                    return {
+                        title: (_jsxs(Split, { hasGutter: true, children: [Icon && (_jsx(SplitItem, { children: _jsx(Icon, {}) })), _jsx(SplitItem, { children: buttonAction.label })] })),
+                        onClick: () => {
+                            buttonAction.onClick();
+                        },
+                    };
+                }
+                case TypedActionType.single: {
+                    const Icon = buttonAction.icon;
+                    return {
+                        title: (_jsxs(Split, { hasGutter: true, children: [Icon && (_jsx(SplitItem, { children: _jsx(Icon, {}) })), _jsx(SplitItem, { children: buttonAction.label })] })),
+                        onClick: () => {
+                            buttonAction.onClick(props.item);
+                        },
+                    };
+                }
+                case TypedActionType.bulk: {
+                    const Icon = buttonAction.icon;
+                    return {
+                        title: (_jsxs(Split, { hasGutter: true, children: [Icon && (_jsx(SplitItem, { children: _jsx(Icon, {}) })), _jsx(SplitItem, { children: buttonAction.label })] })),
+                        onClick: () => {
+                            buttonAction.onClick([props.item]);
+                        },
+                    };
+                }
+                default:
+                    return { isSeparator: true };
+            }
+        }),
+    ].filter((i) => i !== null);
+}

package/mjs/framework/components/BulkSelector.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface BulkSelectorProps<T> {
+    itemCount?: number;
+    pageItems?: T[];
+    selectedItems?: T[];
+    selectItems?: (items: T[]) => void;
+    unselectAll?: () => void;
+    keyFn: (item: T) => string | number;
+    selectNoneText?: string;
+}
+export declare function BulkSelector<T extends object>(props: BulkSelectorProps<T>): JSX.Element;

package/mjs/framework/components/BulkSelector.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown, DropdownItem, DropdownToggle, DropdownToggleCheckbox, } from '@patternfly/react-core';
+import { useCallback, useMemo, useState } from 'react';
+import { useBreakpoint } from './useBreakPoint';
+export function BulkSelector(props) {
+    const [isOpen, setIsOpen] = useState(false);
+    const isSmallOrLarger = useBreakpoint('sm');
+    const { pageItems, selectedItems, selectItems, unselectAll } = props;
+    const allPageItemsSelected = props.itemCount !== undefined &&
+        props.itemCount > 0 &&
+        pageItems &&
+        pageItems.length > 0 &&
+        (pageItems ?? []).every((item) => selectedItems?.includes(item));
+    const onToggleCheckbox = useCallback(() => {
+        if (allPageItemsSelected) {
+            unselectAll?.();
+        }
+        else {
+            selectItems?.(pageItems ?? []);
+        }
+    }, [allPageItemsSelected, unselectAll, selectItems, pageItems]);
+    const toggleText = useMemo(() => {
+        if (isSmallOrLarger) {
+            if (selectedItems && selectedItems.length > 0) {
+                return `${selectedItems.length} selected`;
+            }
+            return '';
+        }
+        else {
+            if (selectedItems && selectedItems.length > 0) {
+                return `${selectedItems.length}`;
+            }
+            return '';
+        }
+    }, [isSmallOrLarger, selectedItems]);
+    const toggle = useMemo(() => {
+        const selectedCount = selectedItems ? selectedItems.length : 0;
+        return (_jsx(DropdownToggle, { splitButtonItems: [
+                _jsx(DropdownToggleCheckbox, { id: "select-all", "aria-label": "Select all", isChecked: allPageItemsSelected ? true : selectedCount > 0 ? null : false, onChange: onToggleCheckbox, children: toggleText }, "select-all"),
+            ], onToggle: (isOpen) => setIsOpen(isOpen) }));
+    }, [selectedItems, allPageItemsSelected, onToggleCheckbox, toggleText]);
+    const selectNoneDropdownItem = useMemo(() => {
+        return (_jsx(DropdownItem, { id: "select-none", onClick: () => {
+                unselectAll?.();
+                setIsOpen(false);
+            }, children: props.selectNoneText ?? 'Select none' }, "select-none"));
+    }, [props.selectNoneText, unselectAll]);
+    const selectPageDropdownItem = useMemo(() => {
+        return (_jsx(DropdownItem, { id: "select-page", onClick: () => {
+                selectItems?.(pageItems ?? []);
+                setIsOpen(false);
+            }, children: `Select ${pageItems?.length ?? 0} page items` }, "select-page"));
+    }, [selectItems, pageItems]);
+    const dropdownItems = useMemo(() => [selectNoneDropdownItem, selectPageDropdownItem], [selectNoneDropdownItem, selectPageDropdownItem]);
+    return (_jsx(Dropdown, { isOpen: isOpen, toggle: toggle, dropdownItems: dropdownItems, style: { zIndex: 302 } }));
+}

package/mjs/framework/components/Collapse.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function Collapse(props: {
+    open: boolean;
+    children: ReactNode;
+}): JSX.Element;

package/mjs/framework/components/Collapse.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Collapse(props) {
+    let className = 'collapsed';
+    if (props.open)
+        className += ' expanded';
+    return _jsx("div", { className: className, children: props.children });
+}

package/mjs/framework/components/DetailInfo.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function DetailInfo(props: {
+    children: ReactNode;
+    disablePaddingTop?: boolean;
+}): JSX.Element;

package/mjs/framework/components/DetailInfo.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageSection } from '@patternfly/react-core';
+export function DetailInfo(props) {
+    return (_jsx(PageSection, { className: "pf-c-alert pf-m-inline pf-m-info", style: {
+            border: 0,
+            paddingTop: props.disablePaddingTop ? 0 : undefined,
+        }, children: props.children }));
+}

package/mjs/framework/components/Details.d.ts

@@ -0,0 +1,38 @@
+import { ComponentClass, ReactNode } from 'react';
+export interface IDetailText {
+    label: string;
+    icon?: ComponentClass;
+    text?: string;
+    helpTitle?: string;
+    help?: ReactNode;
+    to?: string;
+    link?: string;
+    color?: string;
+    copy?: boolean;
+    since?: boolean;
+}
+export declare function isDetailText(detail: IDetail): detail is IDetailText;
+export interface IDetailList {
+    label: string;
+    icon?: ComponentClass;
+    items: IDetailListItem[];
+}
+export declare function isDetailList(detail: IDetail): detail is IDetailList;
+export interface IDetailListItem {
+    icon?: ComponentClass;
+    text: string;
+    helpTitle?: string;
+    help?: ReactNode;
+}
+export declare type IDetail = IDetailText | IDetailList;
+export declare function Details(props: {
+    details: IDetail[];
+}): JSX.Element;
+export declare function DetailsList(props: {
+    children?: ReactNode;
+}): JSX.Element;
+export declare function Detail(props: {
+    label: string;
+    children?: ReactNode;
+}): JSX.Element;
+export declare function DetailsSkeleton(): JSX.Element;

package/mjs/framework/components/Details.js

@@ -0,0 +1,68 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Skeleton, Split, SplitItem, Stack, } from '@patternfly/react-core';
+import { Link } from 'react-router-dom';
+import { CopyCell, SinceCell } from '../PageCells';
+import { useSettings } from '../Settings';
+import { Help } from './Help';
+import { IconWrapper } from './IconWrapper';
+export function isDetailText(detail) {
+    return 'label' in detail && !('items' in detail);
+}
+export function isDetailList(detail) {
+    return 'items' in detail && 'label' in detail;
+}
+export function Details(props) {
+    const { details } = props;
+    return (_jsx(DescriptionList, { orientation: {
+            sm: 'vertical',
+            md: 'horizontal',
+            lg: 'horizontal',
+            xl: 'horizontal',
+            '2xl': 'horizontal',
+        }, children: details.map((detail, index) => {
+            if (isDetailText(detail)) {
+                if (!detail.text)
+                    return _jsx(_Fragment, {});
+                const Icon = detail.icon;
+                return (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: detail.label }), _jsx(DescriptionListDescription, { id: detail.label.toLowerCase().split(' ').join('-'), children: _jsxs(Split, { children: [Icon && (_jsx(IconWrapper, { size: "sm", children: _jsx(Icon, {}) })), detail.to ? (_jsx(Link, { to: detail.to, children: detail.text })) : detail.link ? (_jsx("a", { href: detail.link, target: "_blank", rel: "noreferrer", children: detail.text })) : detail.color ? (_jsx("span", { style: { color: detail.color }, children: detail.text })) : detail.copy ? (_jsx(CopyCell, { text: detail.text })) : detail.since ? (_jsx(SinceCell, { value: detail.text })) : (detail.text), detail.help && _jsx(Help, { title: detail.helpTitle, help: detail.help })] }, index) })] }, index));
+            }
+            else if (isDetailList(detail)) {
+                return (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: detail.label }), _jsx(DescriptionListDescription, { id: detail.label.toLowerCase().split(' ').join('-'), children: _jsx(Stack, { hasGutter: true, children: detail.items.map((item, index) => {
+                                    const Icon = item.icon;
+                                    return (_jsxs(Split, { hasGutter: true, children: [Icon && _jsx(SplitItem, { children: item.icon }), _jsx(SplitItem, { children: item.text }), item.help && _jsx(Help, { title: item.helpTitle, help: item.help })] }, index));
+                                }) }) })] }, index));
+            }
+            else
+                return _jsx(_Fragment, {});
+        }) }));
+}
+export function DetailsList(props) {
+    const settings = useSettings();
+    const orientation = settings.formLayout;
+    const columns = settings.formColumns;
+    const isCompact = false;
+    return (_jsx(DescriptionList, { orientation: {
+            sm: orientation,
+            md: orientation,
+            lg: orientation,
+            xl: orientation,
+            '2xl': orientation,
+        }, columnModifier: columns === 'multiple'
+            ? {
+                default: '1Col',
+                sm: '1Col',
+                md: '2Col',
+                lg: '2Col',
+                xl: '3Col',
+                '2xl': '3Col',
+            }
+            : undefined, style: { maxWidth: 1200, padding: isCompact ? undefined : 8 }, isCompact: isCompact, children: props.children }));
+}
+export function Detail(props) {
+    if (!props.children)
+        return _jsx(_Fragment, {});
+    return (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: props.label }), _jsx(DescriptionListDescription, { id: props.label.toLowerCase().split(' ').join('-'), children: props.children })] }));
+}
+export function DetailsSkeleton() {
+    return (_jsxs(Stack, { hasGutter: true, children: [_jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {})] }));
+}

package/mjs/framework/components/Dotted.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function Dotted(props: {
+    children: ReactNode;
+}): JSX.Element;

package/mjs/framework/components/Dotted.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Dotted(props) {
+    return _jsx("span", { style: { textDecoration: 'underline dotted' }, children: props.children });
+}

package/mjs/framework/components/DropdownControlled.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function DropdownControlled(props: {
+    items: ReactNode[];
+}): JSX.Element;

package/mjs/framework/components/DropdownControlled.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown, KebabToggle } from '@patternfly/react-core';
+import { useCallback, useState } from 'react';
+export function DropdownControlled(props) {
+    const [open, setOpen] = useState(false);
+    const onToggle = useCallback(() => setOpen((open) => !open), []);
+    return (_jsx(Dropdown, { toggle: _jsx(KebabToggle, { onToggle: onToggle }), isOpen: open, isPlain: true, dropdownItems: props.items }));
+}

package/mjs/framework/components/ErrorBoundary.d.ts

@@ -0,0 +1,15 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    message: string;
+    children?: ReactNode;
+}
+interface State {
+    hasError: boolean;
+}
+declare class ErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(_: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): ReactNode;
+}
+export default ErrorBoundary;

package/mjs/framework/components/ErrorBoundary.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+class ErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hasError: false,
+        };
+    }
+    static getDerivedStateFromError(_) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        // eslint-disable-next-line no-console
+        console.error('Uncaught error:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return _jsx("h1", { children: this.props.message });
+        }
+        return this.props.children;
+    }
+}
+export default ErrorBoundary;

package/mjs/framework/components/Grid.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare function Grid(props: {
+    size?: number;
+    maxColumns?: number;
+    children?: ReactNode;
+}): JSX.Element;

package/mjs/framework/components/Grid.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import useResizeObserver from '@react-hook/resize-observer';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useBreakpoint } from './useBreakPoint';
+export function Grid(props) {
+    const size = props.size ?? 350;
+    const target = useRef(null);
+    const [gridTemplateColumns, setGridTemplateColumns] = useState('1fr');
+    const resize = useCallback((width) => {
+        let columns = Math.min(props.maxColumns ?? 12, Math.max(Math.floor(width / size), 1));
+        if (columns < 1)
+            columns = 1;
+        setGridTemplateColumns(() => new Array(columns).fill('1fr').join(' '));
+    }, [props.maxColumns, size]);
+    useResizeObserver(target, (entry) => resize(entry.contentRect.width));
+    useLayoutEffect(() => {
+        resize(target.current?.clientWidth ?? 0);
+    }, [resize]);
+    const isMd = !useBreakpoint('lg');
+    const isXS = !useBreakpoint('xs');
+    let gap = 24;
+    if (isMd)
+        gap = 16;
+    if (isXS)
+        gap = 8;
+    return (_jsx("div", { ref: target, style: { display: 'grid', gridAutoRows: '1fr', gridTemplateColumns, gap }, children: props.children }));
+}

package/mjs/framework/components/Help.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function Help(props: {
+    help?: ReactNode;
+    title?: string;
+}): JSX.Element;

package/mjs/framework/components/Help.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Button, Popover } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+export function Help(props) {
+    const { help, title } = props;
+    if (!help)
+        return _jsx(_Fragment, {});
+    return (_jsx(Popover, { headerContent: title, bodyContent: help, removeFindDomNode: true, children: _jsx(Button, { variant: "link", style: { padding: 0, marginLeft: '8px', verticalAlign: 'middle' }, children: _jsx(OutlinedQuestionCircleIcon, {}) }) }));
+}

package/mjs/framework/components/IconWrapper.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { PatternFlyColor } from './patternfly-colors';
+export declare function IconWrapper(props: {
+    children: ReactNode;
+    color?: PatternFlyColor;
+    size?: 'sm' | 'md' | 'lg';
+    noPadding?: boolean;
+}): JSX.Element;

package/mjs/framework/components/IconWrapper.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
+import { getPatternflyColor } from './patternfly-colors';
+export function IconWrapper(props) {
+    const newProps = {};
+    if (props.color) {
+        newProps.color = getPatternflyColor(props.color);
+    }
+    let marginOffset = undefined;
+    let marginRight = undefined;
+    if (props.size) {
+        newProps.size = props.size;
+        switch (props.size) {
+            case 'sm':
+                marginRight = 6;
+                break;
+            case 'md':
+                marginOffset = -2;
+                marginRight = 6;
+                break;
+            case 'lg':
+                marginOffset = -6;
+                marginRight = 6;
+                break;
+        }
+    }
+    if (props.noPadding) {
+        marginRight = undefined;
+    }
+    const newChildren = Children.toArray(props.children).map((child) => {
+        if (isValidElement(child)) {
+            const newChild = cloneElement(child, newProps);
+            return newChild;
+        }
+        else {
+            return child;
+        }
+    });
+    return (_jsx("div", { style: { marginTop: marginOffset, marginBottom: marginOffset, marginRight }, children: newChildren }));
+}

package/mjs/framework/components/LoadingPage.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ICatalogBreadcrumb } from '../PageHeader';
+export declare function LoadingPage(props: {
+    title?: string;
+    breadcrumbs?: ICatalogBreadcrumb[];
+}): JSX.Element;

package/mjs/framework/components/LoadingPage.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageSection, Skeleton } from '@patternfly/react-core';
+import { Fragment } from 'react';
+import { PageHeader } from '../PageHeader';
+export function LoadingPage(props) {
+    return (_jsxs(Fragment, { children: [_jsx(PageHeader, { breadcrumbs: props.breadcrumbs, title: props.title ?? (_jsx(Skeleton, { width: "200px" })) }), _jsx(PageSection
+            // variant={theme === ThemeE.Dark ? undefined : 'light'}
+            , {})] }));
+}