@ansible/ansible-ui-framework 0.0.473 → 0.0.475

package/README.md

@@ -3,3 +3,21 @@
 A framework for building applications using [PatternFly](https://www.patternfly.org), developed by the Ansible UI developers.
 
 [Documentation](https://github.com/ansible/ansible-ui/wiki/Ansible-UI-Framework)
+
+####Storybook
+
+For development you may use Storybook. It allows you to try some of the existing components and develop new ones without running the whole UI.
+
+Install dependencies:
+
+`npm ci`
+
+Build Storybook:
+
+`npm run build-storybook`
+
+Start Storybook:
+
+`npm run storybook`
+
+Storybook will run at http://localhost:6006/

package/cjs/PageAlertToaster.d.ts

@@ -1,11 +1,10 @@
 import { AlertProps } from '@patternfly/react-core';
 import { ReactNode } from 'react';
-export type AlertToasterProps = AlertProps;
 export interface IPageAlertToaster {
-    addAlert: (alert: AlertToasterProps) => void;
-    removeAlert: (alert: AlertToasterProps) => void;
-    replaceAlert: (oldAlert: AlertToasterProps, newAlert: AlertToasterProps) => void;
-    removeAlerts: (filter?: (alert: AlertToasterProps) => boolean) => void;
+    addAlert: (alert: AlertProps) => void;
+    removeAlert: (alert: AlertProps) => void;
+    replaceAlert: (oldAlert: AlertProps, newAlert: AlertProps) => void;
+    removeAlerts: (filter?: (alert: AlertProps) => boolean) => void;
 }
 export declare const PageAlertToasterContext: import("react").Context<IPageAlertToaster>;
 export declare function usePageAlertToaster(): IPageAlertToaster;

package/cjs/PageAlertToaster.js

@@ -65,7 +65,17 @@ function PageAlertToasterProvider(props) {
                 setTimeout(function () { return removeAlert(alert); }, alert.timeout);
                 delete alert.timeout;
             }
-            setToasterAlerts(function (alerts) { return __spreadArray(__spreadArray([], __read(alerts), false), [alert], false); });
+            setToasterAlerts(function (alerts) {
+                var alertIndex = alerts.findIndex(function (a) { return a === alert; });
+                if (alertIndex !== -1) {
+                    var newAlerts = __spreadArray([], __read(alerts), false);
+                    newAlerts[alertIndex] = alert;
+                    return newAlerts;
+                }
+                else {
+                    return __spreadArray(__spreadArray([], __read(alerts), false), [alert], false);
+                }
+            });
         }
         function replaceAlert(oldAlert, alert) {
             setToasterAlerts(function (alerts) {

package/cjs/PageAlerts.d.ts

@@ -0,0 +1,14 @@
+import { AlertProps } from '@patternfly/react-core';
+import { ReactNode } from 'react';
+export interface IPageAlerts {
+    addAlert: (alert: AlertProps) => void;
+    removeAlert: (alert: AlertProps) => void;
+    replaceAlert: (oldAlert: AlertProps, newAlert: AlertProps) => void;
+    removeAlerts: (filter?: (alert: AlertProps) => boolean) => void;
+}
+export declare const PageAlertsContext: import("react").Context<IPageAlerts>;
+export declare const PageAlertsArrayContext: import("react").Context<AlertProps[]>;
+export declare function usePageAlerts(): IPageAlerts;
+export declare function PageAlertsProvider(props: {
+    children: ReactNode;
+}): JSX.Element;

package/cjs/PageAlerts.js

@@ -0,0 +1,98 @@
+"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.PageAlertsProvider = exports.usePageAlerts = exports.PageAlertsArrayContext = exports.PageAlertsContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+exports.PageAlertsContext = (0, react_1.createContext)({
+    addAlert: function () { return null; },
+    removeAlert: function () { return null; },
+    replaceAlert: function () { return null; },
+    removeAlerts: function () { return null; },
+});
+exports.PageAlertsArrayContext = (0, react_1.createContext)([]);
+function usePageAlerts() {
+    return (0, react_1.useContext)(exports.PageAlertsContext);
+}
+exports.usePageAlerts = usePageAlerts;
+function PageAlertsProvider(props) {
+    var _a = __read((0, react_1.useState)([]), 2), toasterAlerts = _a[0], setToasterAlerts = _a[1];
+    var _b = __read((0, react_1.useState)(function () {
+        function removeAlerts(filter) {
+            setToasterAlerts(function (alerts) { return (filter ? alerts.filter(filter) : []); });
+        }
+        function removeAlert(alert) {
+            setToasterAlerts(function (alerts) { return alerts.filter(function (a) { return a !== alert; }); });
+        }
+        function addAlert(alert) {
+            if (Number.isInteger(alert.timeout)) {
+                setTimeout(function () { return removeAlert(alert); }, alert.timeout);
+                delete alert.timeout;
+            }
+            setToasterAlerts(function (alerts) {
+                var alertIndex = alerts.findIndex(function (a) { return a === alert; });
+                if (alertIndex !== -1) {
+                    var newAlerts = __spreadArray([], __read(alerts), false);
+                    newAlerts[alertIndex] = alert;
+                    return newAlerts;
+                }
+                else {
+                    return __spreadArray(__spreadArray([], __read(alerts), false), [alert], false);
+                }
+            });
+        }
+        function replaceAlert(oldAlert, alert) {
+            setToasterAlerts(function (alerts) {
+                var oldAlertIndex = alerts.findIndex(function (a) { return a === oldAlert; });
+                if (oldAlertIndex !== -1) {
+                    if (Number.isInteger(alert.timeout)) {
+                        setTimeout(function () { return removeAlert(alert); }, alert.timeout);
+                        delete alert.timeout;
+                    }
+                    var newAlerts = __spreadArray([], __read(alerts), false);
+                    newAlerts[oldAlertIndex] = alert;
+                    return newAlerts;
+                }
+                return alerts;
+            });
+        }
+        return { addAlert: addAlert, removeAlert: removeAlert, removeAlerts: removeAlerts, replaceAlert: replaceAlert };
+    }), 1), pageAlerts = _b[0];
+    return ((0, jsx_runtime_1.jsx)(exports.PageAlertsContext.Provider, __assign({ value: pageAlerts }, { children: (0, jsx_runtime_1.jsx)(exports.PageAlertsArrayContext.Provider, __assign({ value: toasterAlerts }, { children: props.children })) })));
+}
+exports.PageAlertsProvider = PageAlertsProvider;

package/cjs/PageDashboard/PageDashboardCard.d.ts

@@ -1,5 +1,6 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export declare function PageDashboardCard(props: {
     to?: string;
     children: ReactNode;
+    style?: CSSProperties;
 }): JSX.Element;

package/cjs/PageDashboard/PageDashboardCard.js

@@ -17,6 +17,6 @@ var react_core_1 = require("@patternfly/react-core");
 var usePageNavigate_1 = require("../components/usePageNavigate");
 function PageDashboardCard(props) {
     var history = (0, usePageNavigate_1.usePageNavigate)();
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Card, __assign({ isFlat: true, isSelectable: true, isRounded: true, style: { transition: 'box-shadow 0.25s', minHeight: 300 }, onClick: function () { return props.to && history(props.to); } }, { children: props.children })));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Card, __assign({ isFlat: true, isSelectable: !!props.to, isRounded: true, style: __assign({ transition: 'box-shadow 0.25s' }, props.style), onClick: function () { return props.to && history(props.to); } }, { children: props.children })));
 }
 exports.PageDashboardCard = PageDashboardCard;

package/cjs/PageHeader.js

@@ -12,17 +12,19 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageHeader = void 0;
+var react_1 = require("react");
 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 react_2 = require("react");
 var useBreakPoint_1 = require("./components/useBreakPoint");
 var usePageNavigate_1 = require("./components/usePageNavigate");
+var PageAlerts_1 = require("./PageAlerts");
 var Settings_1 = require("./Settings");
 function Breadcrumbs(props) {
     var navigate = (0, usePageNavigate_1.usePageNavigate)();
     if (!props.breadcrumbs)
-        return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+        return (0, jsx_runtime_1.jsx)(react_2.Fragment, {});
     return ((0, jsx_runtime_1.jsx)(react_core_1.Breadcrumb, __assign({ style: props.style }, { children: props.breadcrumbs.map(function (breadcrumb) {
             var _a;
             if (!breadcrumb.label)
@@ -74,21 +76,28 @@ function PageHeader(props) {
                         ? 'thin solid var(--pf-global--BorderColor--100)'
                         : undefined,
                     backgroundColor: 'var(--pf-global--BackgroundColor--100)',
-                } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageNavigation, __assign({ style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 } }, { children: navigation })) })) }))), true && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
-                    paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
-                    paddingBottom: xl ? 16 : 12,
-                    borderTop: !navigation && settings.theme !== 'light' && settings.borders
-                        ? 'thin solid var(--pf-global--BorderColor--100)'
-                        : undefined,
-                    borderBottom: !props.disableBorderBottom && settings.borders
-                        ? 'thin solid var(--pf-global--BorderColor--100)'
-                        : undefined,
-                    backgroundColor: settings.theme !== 'light' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-                } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.titleHelpTitle, bodyContent: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [typeof props.titleHelp === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: props.titleHelp })) : (props.titleHelp.map(function (help, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: help }, index)); })), props.titleDocLink && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), variant: "link", onClick: function () { return window.open(props.titleDocLink, '_blank'); }, isInline: true }, { children: t('Documentation') })) }))] })), position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: [title, (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
-                                                    padding: 0,
-                                                    marginTop: 1,
-                                                    marginLeft: 8,
-                                                    verticalAlign: 'top',
-                                                } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) }))] })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: title })))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "160px" }) }))), isMdOrLarger && description && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 } }, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: description })) : ((0, jsx_runtime_1.jsx)(react_core_1.Stack, { children: description.map(function (d) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: d }, d)); }) })) })))] })), title && (headerActions || controls) && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' } }, { children: [controls && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: controls })), headerActions && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: headerActions })] })))] })) })))] }));
+                } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageNavigation, __assign({ style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 } }, { children: navigation })) })) }))), true && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
+                            paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
+                            paddingBottom: xl ? 16 : 12,
+                            borderTop: !navigation && settings.theme !== 'light' && settings.borders
+                                ? 'thin solid var(--pf-global--BorderColor--100)'
+                                : undefined,
+                            borderBottom: !props.disableBorderBottom && settings.borders
+                                ? 'thin solid var(--pf-global--BorderColor--100)'
+                                : undefined,
+                            backgroundColor: settings.theme !== 'light' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+                        } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.titleHelpTitle, bodyContent: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [typeof props.titleHelp === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: props.titleHelp })) : (props.titleHelp.map(function (help, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: help }, index)); })), props.titleDocLink && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), variant: "link", onClick: function () { return window.open(props.titleDocLink, '_blank'); }, isInline: true }, { children: t('Documentation') })) }))] })), position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: [title, (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
+                                                            padding: 0,
+                                                            marginTop: 1,
+                                                            marginLeft: 8,
+                                                            verticalAlign: 'top',
+                                                        } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) }))] })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: title })))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "160px" }) }))), isMdOrLarger && description && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 } }, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: description })) : ((0, jsx_runtime_1.jsx)(react_core_1.Stack, { children: description.map(function (d) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: d }, d)); }) })) })))] })), title && (headerActions || controls) && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' } }, { children: [controls && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: controls })), headerActions && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: headerActions })] })))] })) })), (0, jsx_runtime_1.jsx)(PageAlerts_1.PageAlertsContext.Consumer, { children: function (pageAlerts) { return ((0, jsx_runtime_1.jsx)(PageAlerts_1.PageAlertsArrayContext.Consumer, { children: function (pageAlertsArray) {
+                                if (pageAlertsArray.length === 0)
+                                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                                return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { borderBottom: 'thin solid rgba(0, 0, 0, 0.12)' } }, { children: pageAlertsArray.map(function (alertProps, index) {
+                                        var _a, _b;
+                                        return ((0, react_1.createElement)(react_core_1.Alert, __assign({}, alertProps, { key: (_b = (_a = alertProps.key) !== null && _a !== void 0 ? _a : alertProps.id) !== null && _b !== void 0 ? _b : index, actionClose: (0, jsx_runtime_1.jsx)(react_core_1.AlertActionCloseButton, { onClose: function () { return pageAlerts.removeAlert(alertProps); } }), isInline: true, isExpandable: !!alertProps.children })));
+                                    }) })));
+                            } })); } })] }))] }));
 }
 exports.PageHeader = PageHeader;

package/cjs/PageLayout.js

@@ -33,6 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayout = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
+var PageAlerts_1 = require("./PageAlerts");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 /**
  * The PageLayout is used as the container for the contents of the page.
@@ -49,11 +50,11 @@ var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
  */
 function PageLayout(props) {
     var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: translations.errorText }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                display: 'flex',
-                flexDirection: 'column',
-                height: '100%',
-                maxHeight: '100%',
-            } }, { children: props.children })) })));
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: translations.errorText }, { children: (0, jsx_runtime_1.jsx)(PageAlerts_1.PageAlertsProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    maxHeight: '100%',
+                } }, { children: props.children })) }) })));
 }
 exports.PageLayout = PageLayout;

package/cjs/PageTable/PageTable.js

@@ -166,7 +166,7 @@ function TableHead(props) {
         };
     }, [setSort, setSortDirection, sort, sortDirection]);
     return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ style: {
-                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : 'white',
             } }, { children: [expandedRow && (0, jsx_runtime_1.jsx)(react_table_1.Th, { style: { padding: 0, backgroundColor: 'inherit' } }), (showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft, style: { backgroundColor: 'inherit' } }, { children: "\u00A0" }))), columns
                     .filter(function (column) { return column.enabled !== false; })
                     .map(function (column, index) {

package/cjs/PageTable/PageTableCards.js

@@ -15,13 +15,13 @@ exports.PageTableCards = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
-var Grid_1 = require("../components/Grid");
+var PageGrid_1 = require("../components/PageGrid");
 var PageTableCard_1 = require("./PageTableCard");
 function PageTableCards(props) {
     var keyFn = props.keyFn, items = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultSubtitle;
     var itemToCardFn = (0, PageTableCard_1.useColumnsToTableCardFn)(tableColumns, keyFn);
     var catalogCards = (0, react_1.useMemo)(function () {
-        return ((0, jsx_runtime_1.jsx)(Grid_1.Grid, __assign({ size: 400 }, { children: items === null || items === void 0 ? void 0 : items.map(function (item) { return ((0, jsx_runtime_1.jsx)(PageTableCard_1.PageTableCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: rowActions, showSelect: showSelect, defaultCardSubtitle: defaultCardSubtitle }, keyFn(item))); }) })));
+        return ((0, jsx_runtime_1.jsx)(PageGrid_1.PageGrid, __assign({ size: 400 }, { children: items === null || items === void 0 ? void 0 : items.map(function (item) { return ((0, jsx_runtime_1.jsx)(PageTableCard_1.PageTableCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: rowActions, showSelect: showSelect, defaultCardSubtitle: defaultCardSubtitle }, keyFn(item))); }) })));
     }, [
         items,
         keyFn,

package/cjs/components/EmptyStateCustom.d.ts

@@ -0,0 +1,7 @@
+import { ComponentClass, ReactElement, ReactNode } from 'react';
+export declare function EmptyStateCustom(props: {
+    title: string;
+    description: ReactNode;
+    icon?: ComponentClass;
+    button?: ReactElement;
+}): JSX.Element;

package/cjs/components/EmptyStateCustom.js

@@ -0,0 +1,21 @@
+"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.EmptyStateCustom = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+function EmptyStateCustom(props) {
+    var title = props.title, description = props.description, icon = props.icon, button = props.button;
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small }, { children: [icon && (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: icon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: title })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: description }), button && (0, jsx_runtime_1.jsx)(react_core_1.EmptyStatePrimary, { children: button })] })));
+}
+exports.EmptyStateCustom = EmptyStateCustom;

package/cjs/components/EmptyStateFilter.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function EmptyStateFilter(props: {
+    button?: string;
+    clearAllFilters?: () => void;
+    description?: string;
+    title?: string;
+}): JSX.Element;

package/cjs/components/EmptyStateFilter.js

@@ -0,0 +1,26 @@
+"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.EmptyStateFilter = 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 EmptyStateCustom_1 = require("./EmptyStateCustom");
+function EmptyStateFilter(props) {
+    var button = props.button, clearAllFilters = props.clearAllFilters, description = props.description, title = props.title;
+    var defaultButton = 'Clear all filters';
+    var defaultDescription = 'No results match the filter criteria. Try changing your filter settings.';
+    var defaultTitle = 'No results found';
+    return ((0, jsx_runtime_1.jsx)(EmptyStateCustom_1.EmptyStateCustom, { title: title || defaultTitle, description: description || defaultDescription, icon: react_icons_1.SearchIcon, button: clearAllFilters ? ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ onClick: clearAllFilters, variant: "link" }, { children: button || defaultButton }))) : undefined }));
+}
+exports.EmptyStateFilter = EmptyStateFilter;

package/cjs/components/EmptyStateNoData.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement, ReactNode } from 'react';
+export declare function EmptyStateNoData(props: {
+    button?: ReactElement;
+    title: string;
+    description: ReactNode;
+}): JSX.Element;

package/cjs/components/EmptyStateNoData.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyStateNoData = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_icons_1 = require("@patternfly/react-icons");
+var EmptyStateCustom_1 = require("./EmptyStateCustom");
+function EmptyStateNoData(props) {
+    var button = props.button, description = props.description, title = props.title;
+    return ((0, jsx_runtime_1.jsx)(EmptyStateCustom_1.EmptyStateCustom, { icon: button ? react_icons_1.PlusCircleIcon : react_icons_1.CubesIcon, title: title, description: description, button: button }));
+}
+exports.EmptyStateNoData = EmptyStateNoData;

package/cjs/components/EmptyStateUnauthorized.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function EmptyStateUnauthorized(props: {
+    adminMessage?: string;
+    loginLink: React.ReactNode;
+    title?: string;
+}): JSX.Element;

package/cjs/components/EmptyStateUnauthorized.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyStateUnauthorized = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_icons_1 = require("@patternfly/react-icons");
+var EmptyStateCustom_1 = require("./EmptyStateCustom");
+function EmptyStateUnauthorized(props) {
+    var defaultAdminMessage = 'Contact your organization administrator for more information.';
+    var defaultTitle = 'You do not have access';
+    var adminMessage = props.adminMessage, loginLink = props.loginLink, title = props.title;
+    return ((0, jsx_runtime_1.jsx)(EmptyStateCustom_1.EmptyStateCustom, { icon: react_icons_1.LockIcon, title: title || defaultTitle, description: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [adminMessage || defaultAdminMessage, (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), loginLink] }) }));
+}
+exports.EmptyStateUnauthorized = EmptyStateUnauthorized;

package/cjs/components/LoadingPage.js

@@ -1,4 +1,15 @@
 "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.LoadingPage = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -9,6 +20,6 @@ function LoadingPage(props) {
     var _a;
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, { breadcrumbs: props.breadcrumbs, title: (_a = props.title) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "200px" })) }), (0, jsx_runtime_1.jsx)(react_core_1.PageSection
             // variant={theme === ThemeE.Dark ? undefined : 'light'}
-            , {})] }));
+            , { children: (0, jsx_runtime_1.jsx)(react_core_1.Bullseye, __assign({ style: { paddingTop: 32 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, {}) })) })] }));
 }
 exports.LoadingPage = LoadingPage;

package/cjs/components/LoadingState.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function LoadingState(): JSX.Element;

package/cjs/components/LoadingState.js

@@ -0,0 +1,20 @@
+"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.LoadingState = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+function LoadingState() {
+    return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, variant: "light" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Bullseye, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, {}) }) })));
+}
+exports.LoadingState = LoadingState;

package/cjs/components/{Grid.d.ts → PageGrid.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare function Grid(props: {
+export declare function PageGrid(props: {
     size?: number;
     maxColumns?: number;
     children?: ReactNode;

package/cjs/components/{Grid.js → PageGrid.js}

@@ -30,12 +30,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Grid = void 0;
+exports.PageGrid = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
 var react_1 = require("react");
-var useBreakPoint_1 = require("./useBreakPoint");
-function Grid(props) {
+function PageGrid(props) {
     var _a;
     var size = (_a = props.size) !== null && _a !== void 0 ? _a : 350;
     var target = (0, react_1.useRef)(null);
@@ -52,13 +51,11 @@ function Grid(props) {
         var _a, _b;
         resize((_b = (_a = target.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0);
     }, [resize]);
-    var isMd = !(0, useBreakPoint_1.useBreakpoint)('lg');
-    var isXS = !(0, useBreakPoint_1.useBreakpoint)('xs');
-    var gap = 24;
-    if (isMd)
-        gap = 16;
-    if (isXS)
-        gap = 8;
+    // const isMd = !useBreakpoint('lg');
+    // const isXS = !useBreakpoint('xs');
+    var gap = 16;
+    // if (isMd) gap = 16;
+    // if (isXS) gap = 8;
     return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: target, style: { display: 'grid', gridAutoRows: '1fr', gridTemplateColumns: gridTemplateColumns, gap: gap } }, { children: props.children })));
 }
-exports.Grid = Grid;
+exports.PageGrid = PageGrid;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.473",
+  "version": "0.0.475",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",