@ansible/ansible-ui-framework 0.0.190

package/cjs/framework/TypedActions.js

@@ -0,0 +1,303 @@
+"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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTypedActionsToTableActions = exports.TypedActions = exports.TypedActionButton = exports.TypedActionsButtons = 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 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, _a = props.isPrimary, isPrimary = _a === void 0 ? false : _a, selectedItems = props.selectedItems;
+    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 Toggle = label ? react_core_1.DropdownToggle : react_core_1.KebabToggle;
+    return ((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", onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: hasItemActions && (selectedItems === null || selectedItems === void 0 ? void 0 : 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(function (action, index) {
+            switch (action.type) {
+                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 || !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 !== null && selectedItems !== void 0 ? 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: '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 ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
+                case TypedActionType.seperator:
+                    return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
+            }
+        }), position: props.position, style: { zIndex: 201 } }));
+}
+exports.TypedActionsDropdown = TypedActionsDropdown;
+function TypedActionsButtons(props) {
+    var actions = props.actions, selectedItems = props.selectedItems, wrapper = props.wrapper;
+    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, wrapper: wrapper }, index)); }) })));
+}
+exports.TypedActionsButtons = TypedActionsButtons;
+function TypedActionButton(props) {
+    var _a, _b, _c;
+    var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, wrapper = props.wrapper, noPrimary = props.noPrimary;
+    var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
+    switch (action.type) {
+        case TypedActionType.seperator: {
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+        }
+        case TypedActionType.single: {
+            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 (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: 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) })) })) }));
+        }
+        case TypedActionType.bulk: {
+            var Icon = action.icon;
+            var tooltip = action.tooltip;
+            var isDisabled = false;
+            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 (!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 })) })) }));
+        }
+        case TypedActionType.button: {
+            var Icon = action.icon;
+            var tooltip = action.tooltip;
+            var isDisabled = false;
+            var variant = (_c = action.variant) !== null && _c !== void 0 ? _c : react_core_1.ButtonVariant.secondary;
+            if (selectedItems && selectedItems.length) {
+                switch (variant) {
+                    case react_core_1.ButtonVariant.danger:
+                    case react_core_1.ButtonVariant.primary:
+                        variant = react_core_1.ButtonVariant.secondary;
+                        break;
+                }
+            }
+            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 })) })) }));
+        }
+        case TypedActionType.dropdown: {
+            return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { actions: action.options, label: action.label, isPrimary: action.variant === react_core_1.ButtonVariant.primary && !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) }));
+        }
+    }
+}
+exports.TypedActionButton = TypedActionButton;
+function TypedActions(props) {
+    var _a, _b;
+    var actions = props.actions;
+    var collapseButtons = !(0, useBreakPoint_1.useBreakpoint)((_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg');
+    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 buttonActions = (0, react_1.useMemo)(function () {
+        var _a;
+        if (collapseButtons) {
+            return [];
+        }
+        return (_a = actions === null || actions === void 0 ? void 0 : actions.filter(isButtonAction)) !== null && _a !== void 0 ? _a : [];
+    }, [collapseButtons, actions, isButtonAction]);
+    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); })) !== 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]);
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(TypedActionsButtons, __assign({}, props, { actions: buttonActions })), (0, jsx_runtime_1.jsx)(TypedActionsDropdown, __assign({}, props, { actions: dropdownActions, 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 } }); };
+function useTypedActionsToTableActions(props) {
+    var _a;
+    var actions = props.actions;
+    var collapseButtons = !(0, useBreakPoint_1.useBreakpoint)((_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg');
+    var buttonActions = (0, react_1.useMemo)(function () {
+        if (collapseButtons) {
+            return [];
+        }
+        else {
+            var buttonActions_1 = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
+                return (action.type === TypedActionType.button ||
+                    action.type === TypedActionType.bulk ||
+                    action.type === TypedActionType.single) &&
+                    (action.variant === react_core_1.ButtonVariant.primary ||
+                        action.variant === react_core_1.ButtonVariant.secondary ||
+                        action.variant === react_core_1.ButtonVariant.danger);
+            });
+            return buttonActions_1 !== null && buttonActions_1 !== void 0 ? buttonActions_1 : [];
+        }
+    }, [collapseButtons, actions]);
+    var dropdownActions = (0, react_1.useMemo)(function () {
+        if (collapseButtons) {
+            return actions !== null && actions !== void 0 ? actions : [];
+        }
+        else {
+            var dropdownActions_1 = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
+                return !((action.type === TypedActionType.button ||
+                    action.type === TypedActionType.bulk ||
+                    action.type === TypedActionType.single) &&
+                    (action.variant === react_core_1.ButtonVariant.primary ||
+                        action.variant === react_core_1.ButtonVariant.secondary ||
+                        action.variant === react_core_1.ButtonVariant.danger));
+            });
+            dropdownActions_1 = dropdownActions_1 !== null && dropdownActions_1 !== void 0 ? dropdownActions_1 : [];
+            while (dropdownActions_1.length && dropdownActions_1[0].type === TypedActionType.seperator)
+                dropdownActions_1.shift();
+            while (dropdownActions_1.length &&
+                dropdownActions_1[dropdownActions_1.length - 1].type === TypedActionType.seperator)
+                dropdownActions_1.pop();
+            return dropdownActions_1;
+        }
+    }, [collapseButtons, actions]);
+    return __spreadArray(__spreadArray([], __read(buttonActions.map(function (buttonAction) {
+        switch (buttonAction.type) {
+            case TypedActionType.button:
+                return {
+                    title: (0, jsx_runtime_1.jsx)(TypedActionButton, { action: buttonAction }),
+                    isOutsideDropdown: true,
+                };
+            case TypedActionType.single:
+                return {
+                    title: ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: __assign(__assign({}, buttonAction), { tooltip: buttonAction.label }), selectedItem: props.item, iconOnly: true })),
+                    isOutsideDropdown: true,
+                };
+            case TypedActionType.bulk:
+                return {
+                    title: ((0, jsx_runtime_1.jsx)(TypedActionButton, { action: buttonAction, selectedItems: props.item ? [props.item] : [] })),
+                    isOutsideDropdown: true,
+                };
+            default:
+                return null;
+        }
+    })), false), __read(dropdownActions.map(function (buttonAction) {
+        switch (buttonAction.type) {
+            case TypedActionType.button: {
+                var Icon = buttonAction.icon;
+                return {
+                    title: ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [Icon && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: buttonAction.label })] }))),
+                    onClick: function () {
+                        buttonAction.onClick();
+                    },
+                };
+            }
+            case TypedActionType.single: {
+                var Icon = buttonAction.icon;
+                return {
+                    title: ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [Icon && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: buttonAction.label })] }))),
+                    onClick: function () {
+                        buttonAction.onClick(props.item);
+                    },
+                };
+            }
+            case TypedActionType.bulk: {
+                var Icon = buttonAction.icon;
+                return {
+                    title: ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [Icon && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: buttonAction.label })] }))),
+                    onClick: function () {
+                        buttonAction.onClick([props.item]);
+                    },
+                };
+            }
+            default:
+                return { isSeparator: true };
+        }
+    })), false).filter(function (i) { return i !== null; });
+}
+exports.useTypedActionsToTableActions = useTypedActionsToTableActions;

package/cjs/framework/components/BulkSelector.js

@@ -0,0 +1,89 @@
+"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.BulkSelector = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var useBreakPoint_1 = require("./useBreakPoint");
+function BulkSelector(props) {
+    var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1];
+    var isSmallOrLarger = (0, useBreakPoint_1.useBreakpoint)('sm');
+    var pageItems = props.pageItems, selectedItems = props.selectedItems, selectItems = props.selectItems, unselectAll = props.unselectAll;
+    var allPageItemsSelected = props.itemCount !== undefined &&
+        props.itemCount > 0 &&
+        pageItems &&
+        pageItems.length > 0 &&
+        (pageItems !== null && pageItems !== void 0 ? pageItems : []).every(function (item) { return selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(item); });
+    var onToggleCheckbox = (0, react_1.useCallback)(function () {
+        if (allPageItemsSelected) {
+            unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
+        }
+        else {
+            selectItems === null || selectItems === void 0 ? void 0 : selectItems(pageItems !== null && pageItems !== void 0 ? pageItems : []);
+        }
+    }, [allPageItemsSelected, unselectAll, selectItems, pageItems]);
+    var toggleText = (0, react_1.useMemo)(function () {
+        if (isSmallOrLarger) {
+            if (selectedItems && selectedItems.length > 0) {
+                return "".concat(selectedItems.length, " selected");
+            }
+            return '';
+        }
+        else {
+            if (selectedItems && selectedItems.length > 0) {
+                return "".concat(selectedItems.length);
+            }
+            return '';
+        }
+    }, [isSmallOrLarger, selectedItems]);
+    var toggle = (0, react_1.useMemo)(function () {
+        var selectedCount = selectedItems ? selectedItems.length : 0;
+        return ((0, jsx_runtime_1.jsx)(react_core_1.DropdownToggle, { splitButtonItems: [
+                (0, jsx_runtime_1.jsx)(react_core_1.DropdownToggleCheckbox, __assign({ id: "select-all", "aria-label": "Select all", isChecked: allPageItemsSelected ? true : selectedCount > 0 ? null : false, onChange: onToggleCheckbox }, { children: toggleText }), "select-all"),
+            ], onToggle: function (isOpen) { return setIsOpen(isOpen); } }));
+    }, [selectedItems, allPageItemsSelected, onToggleCheckbox, toggleText]);
+    var selectNoneDropdownItem = (0, react_1.useMemo)(function () {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ id: "select-none", onClick: function () {
+                unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
+                setIsOpen(false);
+            } }, { children: (_a = props.selectNoneText) !== null && _a !== void 0 ? _a : 'Select none' }), "select-none"));
+    }, [props.selectNoneText, unselectAll]);
+    var selectPageDropdownItem = (0, react_1.useMemo)(function () {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ id: "select-page", onClick: function () {
+                selectItems === null || selectItems === void 0 ? void 0 : selectItems(pageItems !== null && pageItems !== void 0 ? pageItems : []);
+                setIsOpen(false);
+            } }, { children: "Select ".concat((_a = pageItems === null || pageItems === void 0 ? void 0 : pageItems.length) !== null && _a !== void 0 ? _a : 0, " page items") }), "select-page"));
+    }, [selectItems, pageItems]);
+    var dropdownItems = (0, react_1.useMemo)(function () { return [selectNoneDropdownItem, selectPageDropdownItem]; }, [selectNoneDropdownItem, selectPageDropdownItem]);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { isOpen: isOpen, toggle: toggle, dropdownItems: dropdownItems, style: { zIndex: 302 } }));
+}
+exports.BulkSelector = BulkSelector;

package/cjs/framework/components/Collapse.js

@@ -0,0 +1,22 @@
+"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.Collapse = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+function Collapse(props) {
+    var className = 'collapsed';
+    if (props.open)
+        className += ' expanded';
+    return (0, jsx_runtime_1.jsx)("div", __assign({ className: className }, { children: props.children }));
+}
+exports.Collapse = Collapse;

package/cjs/framework/components/DetailInfo.js

@@ -0,0 +1,23 @@
+"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.DetailInfo = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+function DetailInfo(props) {
+    return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ className: "pf-c-alert pf-m-inline pf-m-info", style: {
+            border: 0,
+            paddingTop: props.disablePaddingTop ? 0 : undefined,
+        } }, { children: props.children })));
+}
+exports.DetailInfo = DetailInfo;

package/cjs/framework/components/Details.js

@@ -0,0 +1,88 @@
+"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.DetailsSkeleton = exports.Detail = exports.DetailsList = exports.Details = exports.isDetailList = exports.isDetailText = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_router_dom_1 = require("react-router-dom");
+var PageCells_1 = require("../PageCells");
+var Settings_1 = require("../Settings");
+var Help_1 = require("./Help");
+var IconWrapper_1 = require("./IconWrapper");
+function isDetailText(detail) {
+    return 'label' in detail && !('items' in detail);
+}
+exports.isDetailText = isDetailText;
+function isDetailList(detail) {
+    return 'items' in detail && 'label' in detail;
+}
+exports.isDetailList = isDetailList;
+function Details(props) {
+    var details = props.details;
+    return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: {
+            sm: 'vertical',
+            md: 'horizontal',
+            lg: 'horizontal',
+            xl: 'horizontal',
+            '2xl': 'horizontal',
+        } }, { children: details.map(function (detail, index) {
+            if (isDetailText(detail)) {
+                if (!detail.text)
+                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                var Icon = detail.icon;
+                return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: detail.label }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: detail.label.toLowerCase().split(' ').join('-') }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Split, { children: [Icon && ((0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "sm" }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))), detail.to ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({ to: detail.to }, { children: detail.text }))) : detail.link ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: detail.link, target: "_blank", rel: "noreferrer" }, { children: detail.text }))) : detail.color ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { color: detail.color } }, { children: detail.text }))) : detail.copy ? ((0, jsx_runtime_1.jsx)(PageCells_1.CopyCell, { text: detail.text })) : detail.since ? ((0, jsx_runtime_1.jsx)(PageCells_1.SinceCell, { value: detail.text })) : (detail.text), detail.help && (0, jsx_runtime_1.jsx)(Help_1.Help, { title: detail.helpTitle, help: detail.help })] }, index) }))] }, index));
+            }
+            else if (isDetailList(detail)) {
+                return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: detail.label }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: detail.label.toLowerCase().split(' ').join('-') }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Stack, __assign({ hasGutter: true }, { children: detail.items.map(function (item, index) {
+                                    var Icon = item.icon;
+                                    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [Icon && (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: item.icon }), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: item.text }), item.help && (0, jsx_runtime_1.jsx)(Help_1.Help, { title: item.helpTitle, help: item.help })] }), index));
+                                }) })) }))] }, index));
+            }
+            else
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+        }) })));
+}
+exports.Details = Details;
+function DetailsList(props) {
+    var settings = (0, Settings_1.useSettings)();
+    var orientation = settings.formLayout;
+    var columns = settings.formColumns;
+    var isCompact = false;
+    return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ 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 })));
+}
+exports.DetailsList = DetailsList;
+function Detail(props) {
+    if (!props.children)
+        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: props.label }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: props.label.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
+}
+exports.Detail = Detail;
+function DetailsSkeleton() {
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}), (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}), (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}), (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {})] })));
+}
+exports.DetailsSkeleton = DetailsSkeleton;

package/cjs/framework/components/Dotted.js

@@ -0,0 +1,19 @@
+"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.Dotted = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+function Dotted(props) {
+    return (0, jsx_runtime_1.jsx)("span", __assign({ style: { textDecoration: 'underline dotted' } }, { children: props.children }));
+}
+exports.Dotted = Dotted;

package/cjs/framework/components/DropdownControlled.js

@@ -0,0 +1,28 @@
+"use strict";
+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.DropdownControlled = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+function DropdownControlled(props) {
+    var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
+    var onToggle = (0, react_1.useCallback)(function () { return setOpen(function (open) { return !open; }); }, []);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { toggle: (0, jsx_runtime_1.jsx)(react_core_1.KebabToggle, { onToggle: onToggle }), isOpen: open, isPlain: true, dropdownItems: props.items }));
+}
+exports.DropdownControlled = DropdownControlled;

package/cjs/framework/components/ErrorBoundary.js

@@ -0,0 +1,45 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            hasError: false,
+        };
+        return _this;
+    }
+    ErrorBoundary.getDerivedStateFromError = function (_) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    };
+    ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        // eslint-disable-next-line no-console
+        console.error('Uncaught error:', error, errorInfo);
+    };
+    ErrorBoundary.prototype.render = function () {
+        if (this.state.hasError) {
+            return (0, jsx_runtime_1.jsx)("h1", { children: this.props.message });
+        }
+        return this.props.children;
+    };
+    return ErrorBoundary;
+}(react_1.Component));
+exports.default = ErrorBoundary;