@ansible/ansible-ui-framework 0.0.190

package/cjs/framework/PageCatalog.js

@@ -0,0 +1,178 @@
+"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.CardList = exports.CardSection = exports.CatalogCard = exports.CatalogCardListItemIcon = exports.CatalogCardItemType = exports.CatalogColor = exports.CatalogIconColor = exports.Catalog = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-empty-function */
+var react_core_1 = require("@patternfly/react-core");
+var react_icons_1 = require("@patternfly/react-icons");
+var react_1 = require("react");
+var Grid_1 = require("./components/Grid");
+var IconWrapper_1 = require("./components/IconWrapper");
+var Scrollable_1 = require("./components/Scrollable");
+function Catalog(props) {
+    var keyFn = props.keyFn, items = props.items, itemToCardFn = props.itemToCardFn, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, itemActions = props.itemActions, showSelect = props.showSelect;
+    var catalogCards = (0, react_1.useMemo)(function () {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(Grid_1.Grid, __assign({ size: (_a = props.cardWidth) !== null && _a !== void 0 ? _a : 470 }, { children: items.map(function (item) { return ((0, jsx_runtime_1.jsx)(CatalogCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: itemActions, showSelect: showSelect }, keyFn(item))); }) })));
+    }, [
+        props.cardWidth,
+        items,
+        keyFn,
+        itemToCardFn,
+        isSelected,
+        selectItem,
+        unselectItem,
+        itemActions,
+        showSelect,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ style: { flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)("div", { children: catalogCards }) })));
+}
+exports.Catalog = Catalog;
+var CatalogIconColor;
+(function (CatalogIconColor) {
+    CatalogIconColor["red"] = "red";
+    CatalogIconColor["green"] = "green";
+    CatalogIconColor["blue"] = "blue";
+    CatalogIconColor["yellow"] = "yellow";
+})(CatalogIconColor = exports.CatalogIconColor || (exports.CatalogIconColor = {}));
+var CatalogColor;
+(function (CatalogColor) {
+    CatalogColor["blue"] = "blue";
+    CatalogColor["cyan"] = "cyan";
+    CatalogColor["green"] = "green";
+    CatalogColor["orange"] = "orange";
+    CatalogColor["purple"] = "purple";
+    CatalogColor["red"] = "red";
+    CatalogColor["grey"] = "grey";
+})(CatalogColor = exports.CatalogColor || (exports.CatalogColor = {}));
+var CatalogCardItemType;
+(function (CatalogCardItemType) {
+    CatalogCardItemType["Description"] = "description";
+    CatalogCardItemType["List"] = "list";
+})(CatalogCardItemType = exports.CatalogCardItemType || (exports.CatalogCardItemType = {}));
+var CatalogCardListItemIcon;
+(function (CatalogCardListItemIcon) {
+    CatalogCardListItemIcon["Checkmark"] = "checkmark";
+    CatalogCardListItemIcon["Plus"] = "plus";
+    CatalogCardListItemIcon["CheckCircle"] = "check-circle";
+    CatalogCardListItemIcon["ExclamationCircle"] = "exclamation-circle";
+})(CatalogCardListItemIcon = exports.CatalogCardListItemIcon || (exports.CatalogCardListItemIcon = {}));
+function CatalogCard(props) {
+    var _a;
+    var t = props.t;
+    t = t ? t : function (t) { return t; };
+    var item = props.item, itemToCardFn = props.itemToCardFn, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, itemActions = props.itemActions, showSelect = props.showSelect;
+    var card = (0, react_1.useMemo)(function () { return itemToCardFn(item); }, [item, itemToCardFn]);
+    var _b = __read((0, react_1.useState)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
+    var onSelect = (0, react_1.useCallback)(function () { }, []);
+    var onClick = (0, react_1.useCallback)(function () {
+        if (isSelected(item)) {
+            unselectItem(item);
+        }
+        else {
+            selectItem(item);
+        }
+    }, [isSelected, item, selectItem, unselectItem]);
+    var showDropdown = itemActions !== undefined && itemActions.length > 0;
+    var showActions = showSelect || showDropdown;
+    var dropdownItems = (0, react_1.useMemo)(function () {
+        return itemActions === null || itemActions === void 0 ? void 0 : itemActions.map(function (itemAction, index) {
+            // if (isItemActionClick(itemAction)) {
+            //   return (
+            //     <DropdownItem
+            //       key={itemAction.label}
+            //       onClick={() => {
+            //         itemAction.onClick(item)
+            //         setIsOpen(false)
+            //       }}
+            //     >
+            //       {itemAction.label}
+            //     </DropdownItem>
+            //   )
+            // }
+            return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, index);
+        });
+    }, [itemActions]);
+    var disabled = !card.onClick;
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, __assign({ id: card.id, onClick: card.onClick, isFlat: true, isLarge: true, isSelectable: !disabled, isRounded: true, style: {
+            transition: 'box-shadow 0.25s',
+            cursor: !disabled ? 'pointer' : undefined,
+        } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, __assign({ style: { opacity: !disabled ? undefined : '0.5' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true, style: { width: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [card.icon && ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                                                display: 'flex',
+                                                height: 40,
+                                                width: 40,
+                                                marginTop: -20,
+                                                marginBottom: -20,
+                                                marginRight: 12,
+                                                alignItems: 'center',
+                                                justifyItems: 'stretch',
+                                            } }, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "lg" }, { children: card.icon })) }))), (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: card.title })] })) })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, __assign({ hasNoOffset: true }, { children: [showDropdown && ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: onSelect, toggle: (0, jsx_runtime_1.jsx)(react_core_1.KebabToggle, { onToggle: setIsOpen }), isOpen: isOpen, isPlain: true, dropdownItems: dropdownItems, position: "right" })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected(item), onChange: onClick, "aria-label": "card checkbox example", id: "check-1", name: "check1" }))] })))] })), card.items && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(react_core_1.CardBody, __assign({ style: { paddingTop: 0, opacity: !disabled ? undefined : '0.5' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, { children: card.items &&
+                            card.items.map(function (item, index) {
+                                switch (item.type) {
+                                    case CatalogCardItemType.Description:
+                                        return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListGroup, { children: (0, jsx_runtime_1.jsx)("span", __assign({ style: { opacity: 9 } }, { children: item.description })) }) }, index));
+                                    case CatalogCardItemType.List:
+                                        return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: item.horizontal ? { sm: 'horizontal' } : undefined }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: item.title }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(CardList, { icon: item.icon, items: item.items }) })] }) }), index));
+                                    default:
+                                        return (0, jsx_runtime_1.jsx)(react_1.Fragment, {}, index);
+                                }
+                            }) }) })) })), (card.labels || card.learnMore) && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'end',
+                        gap: 16,
+                    } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: { flexGrow: 1, opacity: !disabled ? undefined : '0.5' } }, { children: card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.LabelGroup, { children: card.labels.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: item.color }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: item.label, style: { minWidth: 0 } }) }), item.label)); }) })) })), card.learnMore && ((0, jsx_runtime_1.jsxs)(react_core_1.Button, __assign({ variant: "link", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), isInline: true, onClick: function () { return window.open(card.learnMore, '_blank'); } }, { children: ["\u00A0", t('Learn more')] })))] })) })), card.alertTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, __assign({ title: card.alertTitle, isInline: true, variant: card.alertVariant }, { children: card.alertContent })))] }), (_a = card.id) !== null && _a !== void 0 ? _a : card.title));
+}
+exports.CatalogCard = CatalogCard;
+function CardSection(props) {
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [props.title && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h6", style: { paddingBottom: 8 } }, { children: props.title })) })), props.children] }));
+}
+exports.CardSection = CardSection;
+function CardList(props) {
+    var items = props.items, icon = props.icon;
+    return ((0, jsx_runtime_1.jsx)(react_core_1.List, __assign({ isPlain: true }, { children: items === null || items === void 0 ? void 0 : items.map(function (listItem, index) {
+            var itemIcon;
+            if (listItem.icon) {
+                itemIcon = ((0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "md", noPadding: true }, { children: listItem.icon })));
+            }
+            else if (icon) {
+                itemIcon = ((0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "md", noPadding: true }, { children: icon })));
+            }
+            return ((0, jsx_runtime_1.jsxs)(react_core_1.ListItem, __assign({ icon: itemIcon, style: { opacity: 0.85 } }, { children: [listItem.text, listItem.help && (
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                    (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: listItem.helpTitle, bodyContent: listItem.help, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
+                                    padding: 0,
+                                    marginLeft: '8px',
+                                    verticalAlign: 'middle',
+                                } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) })) })) })))] }), index));
+        }) })));
+}
+exports.CardList = CardList;

package/cjs/framework/PageCells.js

@@ -0,0 +1,141 @@
+"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.BytesCell = exports.CapacityCell = exports.SinceCell = exports.CopyCell = exports.TextCell = exports.DateCell = exports.LabelsCell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var luxon_1 = require("luxon");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var react_router_dom_1 = require("react-router-dom");
+var IconWrapper_1 = require("./components/IconWrapper");
+var patternfly_colors_1 = require("./components/patternfly-colors");
+var Settings_1 = require("./Settings");
+function LabelsCell(props) {
+    return ((0, jsx_runtime_1.jsx)(react_core_1.LabelGroup, __assign({ numLabels: 999, style: { flexWrap: 'nowrap' } }, { children: props.labels.map(function (label) { return ((0, jsx_runtime_1.jsx)(react_core_1.Label, { children: label }, label)); }) })));
+}
+exports.LabelsCell = LabelsCell;
+function DateCell(props) {
+    var date = new Date(props.value);
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: date.toLocaleDateString() }), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: date.toLocaleTimeString() })] })));
+}
+exports.DateCell = DateCell;
+function TextCell(props) {
+    var _a, _b, _c, _d, _e;
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, { children: [props.icon && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: (_a = props.iconSize) !== null && _a !== void 0 ? _a : 'md' }, { children: props.icon })) })), props.to ? ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: (_b = props.text) !== null && _b !== void 0 ? _b : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                            maxWidth: 300,
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                        } }, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, __assign({ to: props.to }, { children: (_c = props.text) !== null && _c !== void 0 ? _c : '' })) })) })) })) : props.onClick !== undefined ? ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ onClick: props.onClick }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, style: {
+                        whiteSpace: 'nowrap',
+                    } }, { children: props.text })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: {
+                    color: props.textColor ? (0, patternfly_colors_1.getPatternflyColor)(props.textColor) : undefined,
+                } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: (_d = props.text) !== null && _d !== void 0 ? _d : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                            maxWidth: 300,
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                        } }, { children: (_e = props.text) !== null && _e !== void 0 ? _e : '' })) })) })))] }));
+}
+exports.TextCell = TextCell;
+function CopyCell(props) {
+    if (!props.text)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    return ((0, jsx_runtime_1.jsx)(react_core_1.ClipboardCopy, __assign({ hoverTip: "Copy", clickTip: "Copied", variant: "inline-compact", style: { display: 'flex', flexWrap: 'nowrap', borderRadius: 4 }, onCopy: function () {
+            var _a;
+            void navigator.clipboard.writeText((_a = props.text) !== null && _a !== void 0 ? _a : '');
+        } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: props.text, style: { minWidth: props.minWidth } }) })));
+}
+exports.CopyCell = CopyCell;
+function SinceCell(props) {
+    var t = props.t;
+    t = t ? t : function (t) { return t; };
+    var author = props.author, onClick = props.onClick;
+    var _a = __read((0, react_1.useState)(null), 2), dateTime = _a[0], setDateTime = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (props.value) {
+            setDateTime(luxon_1.DateTime.fromISO(props.value).toRelative());
+        }
+        var timeout = setInterval(function () {
+            if (props.value) {
+                setDateTime(luxon_1.DateTime.fromISO(props.value).toRelative());
+            }
+        }, 1000);
+        return function () { return clearTimeout(timeout); };
+    }, [props.value]);
+    if (props.value === undefined)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { whiteSpace: 'nowrap' } }, { children: [dateTime, author && (0, jsx_runtime_1.jsxs)("span", { children: ["\u00A0", t('by'), "\u00A0"] }), onClick ? ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, onClick: onClick }, { children: author }))) : ((0, jsx_runtime_1.jsx)("span", { children: author }))] })));
+}
+exports.SinceCell = SinceCell;
+function CapacityCell(props) {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var settings = (0, Settings_1.useSettings)();
+    var ratio = props.used / props.capacity;
+    if (props.capacity === 0)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    var base = ratio >= 0.8
+        ? 'var(--pf-global--palette--red'
+        : ratio >= 0.5
+            ? 'var(--pf-global--palette--gold'
+            : 'var(--pf-global--palette--green';
+    var color1 = settings.theme === 'light' ? "".concat(base, "-100)") : "".concat(base, "-600)");
+    var color2 = settings.theme === 'light' ? "".concat(base, "-400)") : "".concat(base, "-200)");
+    var borderColor = settings.theme === 'light' ? "#0002" : "#fff2";
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ alignItems: { default: 'alignItemsBaseline' }, spaceItems: { default: 'spaceItemsSm' } }, { children: [props.capacity > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                        width: 18,
+                        height: 25,
+                        background: color1,
+                        marginBottom: -9,
+                        paddingTop: Math.max(0, Math.min(25, (25 * (props.capacity - props.used)) / props.capacity)),
+                        borderRadius: 2,
+                        border: "thin solid ".concat(borderColor),
+                    } }, { children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: '100%',
+                            height: '100%',
+                            background: color2,
+                            borderRadius: 2,
+                        } }) })) })), props.format ? ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: props.format
+                    .replace('{used}', props.used.toString())
+                    .replace('{capacity}', props.capacity.toString()) })) : ((0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, { children: [props.used, t(' of '), props.capacity] }))] })));
+}
+exports.CapacityCell = CapacityCell;
+function BytesCell(props) {
+    var bytes = props.bytes;
+    if (!+bytes)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    var k = 1024;
+    var decimals = props.decimals ? props.decimals : 0;
+    var dm = decimals < 0 ? 0 : decimals;
+    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    var i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "".concat(parseFloat((bytes / Math.pow(k, i)).toFixed(dm)), " ").concat(sizes[i]) });
+}
+exports.BytesCell = BytesCell;

package/cjs/framework/PageColumnModal.js

@@ -0,0 +1,130 @@
+"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 __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+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.useColumnModal = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+function useColumnModal(columns, t) {
+    t = t ? t : function (t) { return t; };
+    var _a = __read((0, react_1.useState)(false), 2), columnModalOpen = _a[0], setColumnModalOpen = _a[1];
+    var openColumnModal = (0, react_1.useCallback)(function () {
+        setColumnModalOpen(true);
+    }, []);
+    var _b = __read((0, react_1.useState)(function () { return columns; }), 2), managedColumns = _b[0], setManagedColumns = _b[1];
+    (0, react_1.useEffect)(function () {
+        setManagedColumns(function (managedColumns) {
+            return managedColumns.map(function (managedColumn) { var _a; return (_a = columns.find(function (column) { return column.header === managedColumn.header; })) !== null && _a !== void 0 ? _a : managedColumn; });
+        });
+    }, [columns]);
+    var onClose = (0, react_1.useCallback)(function () {
+        setColumnModalOpen(false);
+    }, []);
+    // const selectAllColumns = useCallback(() => {
+    //     setManagedColumns((managedColumns) => {
+    //         for (const column of managedColumns) {
+    //             column.enabled = true
+    //         }
+    //         return [...managedColumns]
+    //     })
+    // }, [])
+    var onDragFinish = (0, react_1.useCallback)(function (itemOrder) {
+        setManagedColumns(function (managedColumns) {
+            return itemOrder.map(function (header) {
+                return managedColumns.find(function (column) { return column.header === header; });
+            });
+        });
+    }, []);
+    var handleChange = (0, react_1.useCallback)(function (checked, event) {
+        var columnHeader = event.target.name;
+        if (columnHeader) {
+            setManagedColumns(function (managedColumns) {
+                var e_1, _a;
+                try {
+                    for (var managedColumns_1 = __values(managedColumns), managedColumns_1_1 = managedColumns_1.next(); !managedColumns_1_1.done; managedColumns_1_1 = managedColumns_1.next()) {
+                        var column = managedColumns_1_1.value;
+                        if (column.header !== columnHeader)
+                            continue;
+                        column.enabled = checked;
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (managedColumns_1_1 && !managedColumns_1_1.done && (_a = managedColumns_1.return)) _a.call(managedColumns_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                return __spreadArray([], __read(managedColumns), false);
+            });
+        }
+    }, []);
+    var columnModal = ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ variant: react_core_1.ModalVariant.medium, title: "Manage columns", 
+        // description={
+        //     <TextContent>
+        //         <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>
+        //         <Button isInline onClick={selectAllColumns} variant="link">
+        //             Select all
+        //         </Button>
+        //     </TextContent>
+        // }
+        isOpen: columnModalOpen, onClose: onClose, actions: [
+            (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: t('Close') }), "save"),
+            // <Button key="cancel" variant="link" onClick={onClose}>
+            //     Cancel
+            // </Button>,
+        ] }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "Table column management", id: "table-column-management", isCompact: true, onDragFinish: onDragFinish, itemOrder: managedColumns.map(function (column) { return column.header; }), gridBreakpoint: "none", style: { borderTopWidth: 'thin' } }, { children: managedColumns.map(function (column) {
+                // if (index === 0) return <Fragment />
+                return ((0, jsx_runtime_1.jsx)(react_core_1.DataListItem, __assign({ id: column.header, "aria-labelledby": "table-column-management-item1", style: { borderBottomWidth: 'thin' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DataListItemRow, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.DataListControl, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DataListDragButton, { "aria-label": "Reorder", "aria-labelledby": "table-column-management-item1", "aria-describedby": "Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.", "aria-pressed": "false" }), (0, jsx_runtime_1.jsx)(react_core_1.DataListCheck, { "aria-labelledby": "table-column-management-item1", checked: column.enabled !== false, name: column.header, id: column.header, onChange: handleChange, otherControls: true })] }), (0, jsx_runtime_1.jsx)(react_core_1.DataListItemCells, { dataListCells: [
+                                    (0, jsx_runtime_1.jsx)(react_core_1.DataListCell, __assign({ id: "table-column-management-item1" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: column.header }, { children: column.header })) }), column.header),
+                                ] })] }) }), column.header));
+            }) })) })));
+    return { openColumnModal: openColumnModal, columnModal: columnModal, managedColumns: managedColumns };
+}
+exports.useColumnModal = useColumnModal;

package/cjs/framework/PageDataList.js

@@ -0,0 +1,61 @@
+"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.PageDataList = exports.DataListPage = 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 Scrollable_1 = require("./components/Scrollable");
+var PageBody_1 = require("./PageBody");
+var PageHeader_1 = require("./PageHeader");
+var PageLayout_1 = require("./PageLayout");
+var PagePagination_1 = require("./PagePagination");
+var PageToolbar_1 = require("./PageToolbar");
+var Settings_1 = require("./Settings");
+var TypedActions_1 = require("./TypedActions");
+function DataListPage(props) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: (0, jsx_runtime_1.jsx)(PageDataList, __assign({}, props)) })] }) }));
+}
+exports.DataListPage = DataListPage;
+function PageDataList(props) {
+    var pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, 
+    // clearAllFilters,
+    filters = props.filters, error = props.error, dataCells = props.dataCells;
+    var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; })) !==
+        undefined;
+    var settings = (0, Settings_1.useSettings)();
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+                height: '100%',
+            } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: {
+                    paddingTop: 64,
+                } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
+    }
+    if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
+        return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageToolbar_1.PageTableToolbar, __assign({}, props, { disableBorderBottom: true })), (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "Simple data list example" }, { children: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.DataListItem, __assign({ "aria-labelledby": "simple-item1" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DataListItemRow, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.DataListCheck, { "aria-labelledby": "check-action-item1", name: "check-action-check1", isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onClick: function () {
+                                        if (isSelected === null || isSelected === void 0 ? void 0 : isSelected(item)) {
+                                            selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
+                                        }
+                                        else {
+                                            unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
+                                        }
+                                    } })), (0, jsx_runtime_1.jsx)(react_core_1.DataListItemCells, { dataListCells: dataCells.map(function (dataCell, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.DataListCell, __assign({ width: index === 0 ? 5 : 1 }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "simple-item1" }, { children: dataCell(item) })) }), "primary content")); }) }), props.actions && (0, jsx_runtime_1.jsx)(DataListActions, { actions: props.actions })] }) }), keyFn(item))); }) })) }), (!props.autoHidePagination || (itemCount !== null && itemCount !== void 0 ? itemCount : 0) > perPage) && (0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))] }));
+}
+exports.PageDataList = PageDataList;
+function DataListActions(props) {
+    return ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: props.actions, position: react_core_1.DropdownPosition.right }) })));
+}

package/cjs/framework/PageDialog.js

@@ -0,0 +1,28 @@
+"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.usePageDialog = exports.PageDialogProvider = exports.SetDialogContext = exports.DialogContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+exports.DialogContext = (0, react_1.createContext)(undefined);
+exports.SetDialogContext = (0, react_1.createContext)(function () { return null; });
+var PageDialogContext = (0, react_1.createContext)([undefined, function () { return alert('Use PageDialogProvider'); }]);
+function PageDialogProvider(props) {
+    var state = (0, react_1.useState)();
+    return ((0, jsx_runtime_1.jsxs)(PageDialogContext.Provider, __assign({ value: state }, { children: [state[0] !== undefined && state[0], props.children] })));
+}
+exports.PageDialogProvider = PageDialogProvider;
+function usePageDialog() {
+    return (0, react_1.useContext)(PageDialogContext);
+}
+exports.usePageDialog = usePageDialog;