@ansible/ansible-ui-framework 0.0.259 → 0.0.260

package/mjs/Settings.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Form, Modal, ModalVariant, SelectOption } from '@patternfly/react-core';
-import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { SingleSelect } from './components/SingleSelect';
-import { usePageDialog } from './PageDialog';
-export const SettingsContext = createContext([
-    {},
-    () => null,
-]);
-export function useSettings() {
-    const [settings] = useContext(SettingsContext);
-    return settings;
-}
-export function SettingsProvider(props) {
-    const [settings, setSettingsState] = useState(() => {
-        const settings = {
-            theme: localStorage.getItem('theme'),
-            tableLayout: localStorage.getItem('tableLayout'),
-            formColumns: localStorage.getItem('formColumns'),
-            formLayout: localStorage.getItem('formLayout'),
-            borders: localStorage.getItem('borders') !== 'false',
-        };
-        const activeTheme = settings.theme !== 'dark' && settings.theme !== 'light'
-            ? window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light'
-            : settings.theme;
-        if (activeTheme === 'dark') {
-            document.documentElement.classList.add('pf-theme-dark');
-        }
-        else {
-            document.documentElement.classList.remove('pf-theme-dark');
-        }
-        return settings;
-    });
-    const setSettings = useCallback((settings) => {
-        localStorage.setItem('theme', settings.theme ?? 'system');
-        localStorage.setItem('tableLayout', settings.tableLayout ?? 'comfortable');
-        localStorage.setItem('formColumns', settings.formColumns ?? 'multiple');
-        localStorage.setItem('formLayout', settings.formLayout ?? 'vertical');
-        localStorage.setItem('borders', settings.borders ? 'true' : 'false');
-        setSettingsState(settings);
-        const activeTheme = settings.theme === 'system'
-            ? window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light'
-            : settings.theme;
-        if (activeTheme === 'dark') {
-            document.documentElement.classList.add('pf-theme-dark');
-        }
-        else {
-            document.documentElement.classList.remove('pf-theme-dark');
-        }
-    }, []);
-    return (_jsx(SettingsContext.Provider, { value: [settings, setSettings], children: props.children }));
-}
-export function useSettingsDialog(t) {
-    const [open, setOpen] = useState(false);
-    const openSetting = useCallback(() => setOpen(true), []);
-    const [_, setDialog] = usePageDialog();
-    useEffect(() => {
-        if (open) {
-            setDialog(_jsx(SettingsDialog, { open: open, setOpen: setOpen, t: t }));
-        }
-        else {
-            setDialog(undefined);
-        }
-    }, [open, setDialog, t]);
-    return openSetting;
-}
-export function SettingsDialog(props) {
-    const onClose = () => props.setOpen(false);
-    const [settings, setSettings] = useContext(SettingsContext);
-    const { t } = props;
-    return (_jsx(Modal, { title: "Settings", isOpen: props.open, onClose: onClose, variant: ModalVariant.medium, tabIndex: 0, actions: [
-            _jsx(Button, { variant: "primary", onClick: onClose, children: t('Close') }, "close"),
-        ], children: _jsxs(Form, { isHorizontal: settings.formLayout === 'horizontal', children: [_jsxs(SingleSelect, { label: "Theme", value: settings.theme ?? 'system', onChange: (theme) => setSettings({ ...settings, theme: theme }), children: [_jsx(SelectOption, { value: "system", children: t('System default') }), _jsx(SelectOption, { value: "light", children: t('Light') }), _jsx(SelectOption, { value: "dark", children: t('Dark') })] }), _jsxs(SingleSelect, { label: "Table Layout", value: settings.tableLayout ?? 'comfortable', onChange: (tableLayout) => setSettings({
-                        ...settings,
-                        tableLayout: tableLayout,
-                    }), children: [_jsx(SelectOption, { value: "comfortable", children: t('Comfortable') }), _jsx(SelectOption, { value: "compact", children: t('Compact') })] }), _jsxs(SingleSelect, { label: "Form Columns", value: settings.formColumns ?? 'multiple', onChange: (formColumns) => setSettings({
-                        ...settings,
-                        formColumns: formColumns,
-                    }), children: [_jsx(SelectOption, { value: "multiple", children: t('Multiple columns') }), _jsx(SelectOption, { value: "single", children: t('Single column') })] }), _jsxs(SingleSelect, { label: "Form Layout", value: settings.formLayout ?? 'vertical', onChange: (formLayout) => setSettings({
-                        ...settings,
-                        formLayout: formLayout,
-                    }), children: [_jsx(SelectOption, { value: "vertical", children: t('Vertical labels') }), _jsx(SelectOption, { value: "horizontal", children: t('Horizontal labels') })] }), _jsxs(SingleSelect, { label: "Borders", value: settings.borders ? 'true' : 'false', onChange: (value) => setSettings({ ...settings, borders: value === 'true' }), style: { paddingBottom: 120 }, children: [_jsx(SelectOption, { value: "true", children: t('Yes') }), _jsx(SelectOption, { value: "false", children: t('No') })] })] }) }));
-}

package/mjs/TypedActions/TypedActions.js

@@ -1,190 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, KebabToggle, Split, SplitItem, Tooltip, } from '@patternfly/react-core';
-import { CircleIcon } from '@patternfly/react-icons';
-import { useCallback, useMemo, useState } from 'react';
-import { useBreakpoint } from '../components/useBreakPoint';
-import { TypedActionButton, TypedActionsButtons } from './TypedActionsButtons';
-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, selectedItem } = 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) => (_jsx(DropdownActionItem, { action: action, selectedItems: selectedItems ?? [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : `action-${index}`))), position: props.position, style: { zIndex: 201 } }));
-}
-export function DropdownActionItem(props) {
-    const { action, selectedItems, selectedItem, hasIcons, index } = props;
-    switch (action.type) {
-        case TypedActionType.single: {
-            let Icon = action.icon;
-            if (!Icon && hasIcons)
-                Icon = TransparentIcon;
-            const tooltip = action.tooltip;
-            const isDisabled = false;
-            return (_jsx(Tooltip, { content: tooltip, trigger: tooltip ? undefined : 'manual', children: _jsx(DropdownItem, { onClick: () => selectedItem && action.onClick(selectedItem), isAriaDisabled: isDisabled, icon: Icon ? (_jsx("span", { style: { paddingRight: 4 }, children: _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: {
-            let Icon = action.icon;
-            if (!Icon && hasIcons)
-                Icon = TransparentIcon;
-            let tooltip = action.tooltip;
-            let isDisabled = false;
-            if (action.type === TypedActionType.bulk && !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: 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}`);
-        default:
-            return _jsx(_Fragment, {});
-    }
-}
-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/TypedActions/TypedActionsButtons.js

@@ -1,87 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { Button, ButtonVariant, Tooltip, Split } from '@patternfly/react-core';
-import { TypedActionType, TypedActionsDropdown, } from './TypedActions';
-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;
-    switch (action.type) {
-        case TypedActionType.seperator: {
-            return _jsx(_Fragment, {});
-        }
-        case TypedActionType.single: {
-            return (_jsx(ActionSingleButton, { action: action, selectedItem: selectedItem, noPrimary: noPrimary, iconOnly: props.iconOnly, wrapper: wrapper }));
-        }
-        case TypedActionType.bulk: {
-            return (_jsx(ActionBulkButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
-        }
-        case TypedActionType.button: {
-            return (_jsx(ActionButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
-        }
-        case TypedActionType.dropdown: {
-            return (_jsx(TypedActionsDropdown, { actions: action.options, selectedItems: selectedItems, label: action.label, isPrimary: action.variant === ButtonVariant.primary && !selectedItems?.length }));
-        }
-    }
-}
-function ActionButton(props) {
-    const { action, selectedItems, noPrimary, wrapper } = props;
-    const Wrapper = wrapper ?? Fragment;
-    const Icon = action.icon;
-    const tooltip = action.tooltip;
-    const isDisabled = false;
-    let variant = action.variant ?? ButtonVariant.secondary;
-    if (selectedItems &&
-        selectedItems.length &&
-        [ButtonVariant.primary, ButtonVariant.danger].includes(variant)) {
-        variant = ButtonVariant.secondary;
-    }
-    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 }) }) }));
-}
-function ActionBulkButton(props) {
-    const { action, noPrimary, selectedItems, wrapper } = props;
-    const Wrapper = wrapper ?? Fragment;
-    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 }) }) }));
-}
-function ActionSingleButton(props) {
-    const { action, selectedItem, noPrimary, wrapper } = props;
-    const Wrapper = wrapper ?? Fragment;
-    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 }) }) }));
-}

package/mjs/TypedActions/index.js

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

package/mjs/components/BulkSelector.js

@@ -1,56 +0,0 @@
-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/components/Collapse.js

@@ -1,7 +0,0 @@
-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/components/DetailInfo.js

@@ -1,8 +0,0 @@
-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/components/Details.js

@@ -1,68 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Skeleton, Split, SplitItem, Stack, Text, } 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: [props.label && (_jsx(DescriptionListTerm, { children: _jsx(Text, { component: "small", style: { opacity: 0.7 }, 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/components/Dotted.js

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

package/mjs/components/DropdownControlled.js

@@ -1,8 +0,0 @@
-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/components/ErrorBoundary.js

@@ -1,25 +0,0 @@
-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/components/Grid.js

@@ -1,27 +0,0 @@
-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/components/Help.js

@@ -1,9 +0,0 @@
-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/components/IconWrapper.js

@@ -1,40 +0,0 @@
-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/components/LoadingPage.js

@@ -1,9 +0,0 @@
-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'}
-            , {})] }));
-}