@ansible/ansible-ui-framework 0.0.614 → 0.0.616

package/cjs/PageForm/PageForm.js

@@ -1,146 +0,0 @@
-"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-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.PageFormCancelButton = exports.PageFormSubmitButton = exports.PageForm = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var ajv_1 = require("@hookform/resolvers/ajv");
-var react_core_1 = require("@patternfly/react-core");
-var react_1 = require("react");
-var react_hook_form_1 = require("react-hook-form");
-var Scrollable_1 = require("../components/Scrollable");
-var useBreakPoint_1 = require("../components/useBreakPoint");
-var PageBody_1 = require("../PageBody");
-var Settings_1 = require("../Settings");
-var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
-function PageForm(props) {
-    var _this = this;
-    var _a;
-    var schema = props.schema, defaultValue = props.defaultValue, disableBody = props.disableBody, disablePadding = props.disablePadding;
-    var form = (0, react_hook_form_1.useForm)({
-        defaultValues: defaultValue !== null && defaultValue !== void 0 ? defaultValue : {},
-        resolver: schema
-            ? (0, ajv_1.ajvResolver)(schema, { strict: false, addFormats: true })
-            : undefined,
-    });
-    var _b = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), frameworkTranslations = _b[0];
-    var handleSubmit = form.handleSubmit, setFieldError = form.setError;
-    var _c = __read((0, react_1.useState)(''), 2), error = _c[0], setError = _c[1];
-    var isMd = (0, useBreakPoint_1.useBreakpoint)('md');
-    var _d = __read((0, react_1.useContext)(Settings_1.SettingsContext), 1), settings = _d[0];
-    var isHorizontal = props.isVertical ? false : settings.formLayout === 'horizontal';
-    var multipleColumns = props.singleColumn ? false : settings.formColumns === 'multiple';
-    var sm = multipleColumns ? (isHorizontal ? 12 : 12) : 12;
-    var md = multipleColumns ? (isHorizontal ? 12 : 6) : 12;
-    var lg = multipleColumns ? (isHorizontal ? 6 : 6) : 12;
-    var xl = multipleColumns ? (isHorizontal ? 6 : 6) : 12;
-    var xl2 = multipleColumns ? (isHorizontal ? 4 : 4) : 12;
-    var maxWidth = multipleColumns ? undefined : isHorizontal ? 960 : 800;
-    var Component = ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, form, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        , __assign({ 
-            // eslint-disable-next-line @typescript-eslint/no-misused-promises
-            onSubmit: handleSubmit(function (data) { return __awaiter(_this, void 0, void 0, function () {
-                var err_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            setError('');
-                            _a.label = 1;
-                        case 1:
-                            _a.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, props.onSubmit(data, setError, setFieldError)];
-                        case 2:
-                            _a.sent();
-                            return [3 /*break*/, 4];
-                        case 3:
-                            err_1 = _a.sent();
-                            setError(err_1 instanceof Error ? err_1.message : 'Unknown error');
-                            return [3 /*break*/, 4];
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            }); }), isHorizontal: isHorizontal, style: {
-                display: 'flex',
-                flexDirection: 'column',
-                flexGrow: 1,
-                overflow: props.disableScrolling ? undefined : 'hidden',
-                gap: 0,
-            } }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: props.children })) }))) : ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, __assign({ style: { height: '100%', flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: props.children })) })) }))), error && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { variant: "danger", title: error !== null && error !== void 0 ? error : '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } })), props.onCancel ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "dark-2 border-top", style: { padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [(0, jsx_runtime_1.jsx)(PageFormSubmitButton, { children: props.submitText }), props.onCancel && ((0, jsx_runtime_1.jsx)(PageFormCancelButton, __assign({ onCancel: props.onCancel }, { children: (_a = props.cancelText) !== null && _a !== void 0 ? _a : frameworkTranslations.cancelText })))] })) }))) : ((0, jsx_runtime_1.jsx)(PageFormSubmitButton, __assign({ style: { marginTop: 48 } }, { children: props.submitText })))] })) })));
-    if (!disableBody) {
-        Component = (0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: Component });
-    }
-    return Component;
-}
-exports.PageForm = PageForm;
-function PageFormSubmitButton(props) {
-    var _a = (0, react_hook_form_1.useFormState)(), isSubmitting = _a.isSubmitting, errors = _a.errors;
-    var hasErrors = errors && Object.keys(errors).length > 0;
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: "Please fix errors", trigger: hasErrors ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "submit", isDisabled: isSubmitting, isLoading: isSubmitting, isDanger: hasErrors, variant: hasErrors ? 'secondary' : undefined, style: props.style }, { children: props.children })) })));
-}
-exports.PageFormSubmitButton = PageFormSubmitButton;
-function PageFormCancelButton(props) {
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "button", variant: "link", onClick: props.onCancel }, { children: props.children })));
-}
-exports.PageFormCancelButton = PageFormCancelButton;

package/cjs/PageForm/PageFormAlerts.js

@@ -1,32 +0,0 @@
-"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.PageFormAlerts = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_core_1 = require("@patternfly/react-core");
-var react_1 = require("react");
-var react_hook_form_1 = require("react-hook-form");
-var useBreakPoint_1 = require("../components/useBreakPoint");
-var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
-function PageFormAlerts() {
-    var errors = (0, react_hook_form_1.useFormState)().errors;
-    var isMd = (0, useBreakPoint_1.useBreakpoint)('md');
-    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: errors && Object.keys(errors).length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { title: translations.pleaseFixValidationErrors, isInline: true, style: { width: '100%', paddingLeft: isMd ? 190 : undefined }, variant: "danger" })) }));
-}
-exports.PageFormAlerts = PageFormAlerts;

package/cjs/PageForm/PageFormButtons.js

@@ -1,28 +0,0 @@
-"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.PageFormButtons = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_core_1 = require("@patternfly/react-core");
-var react_hook_form_1 = require("react-hook-form");
-var PageFormAlerts_1 = require("./PageFormAlerts");
-function PageFormButtons(props) {
-    var errors = (0, react_hook_form_1.useFormState)().errors;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(PageFormAlerts_1.PageFormAlerts, {}), (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    maxHeight: '100%',
-                    borderTop: 'thin solid var(--pf-global--BorderColor--100)',
-                }, variant: "light" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [errors && Object.keys(errors).length > 0 ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Please fix validation errors' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "submit", isAriaDisabled: true }, { children: props.submitText })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "submit" }, { children: props.submitText }))), (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ type: "button", variant: "link", onClick: props.onCancel }, { children: props.cancelText }))] })) }))] }));
-}
-exports.PageFormButtons = PageFormButtons;

package/cjs/PageForm/PageFormInputPopover.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/PageForm/PageFormSchema.js

@@ -1,138 +0,0 @@
-"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.TypeSelect = exports.TypeSecretInput = exports.TypeTextInput = exports.PageFormSchema = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var typebox_1 = require("@sinclair/typebox");
-var PageFormSelectOption_1 = require("./Inputs/PageFormSelectOption");
-var PageFormSlider_1 = require("./Inputs/PageFormSlider");
-var PageFormSwitch_1 = require("./Inputs/PageFormSwitch");
-var PageFormTextArea_1 = require("./Inputs/PageFormTextArea");
-var PageFormTextInput_1 = require("./Inputs/PageFormTextInput");
-var PageFormTextSelect_1 = require("./Inputs/PageFormTextSelect");
-function PageFormSchema(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var schema = props.schema;
-    var base = props.base ? props.base + '.' : '';
-    var p = [];
-    for (var propertyName in schema.properties) {
-        var property = schema.properties[propertyName];
-        switch (property) {
-            case true:
-            case false:
-                continue;
-        }
-        var title = typeof property.title === 'string' ? property.title : propertyName;
-        var description = typeof property.description === 'string' ? property.description : undefined;
-        var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
-        var prop = property;
-        prop.errorMessage = (_a = prop.errorMessage) !== null && _a !== void 0 ? _a : {};
-        switch (property.type) {
-            case 'string':
-                switch (prop.variant) {
-                    case 'select':
-                        {
-                            if (!prop.placeholder) {
-                                prop.placeholder = "Select ".concat(((_b = property.title) !== null && _b !== void 0 ? _b : propertyName).toLowerCase());
-                            }
-                            if (!prop.enum) {
-                                prop.enum = (_c = prop.options) === null || _c === void 0 ? void 0 : _c.map(function (option) { return option.value; });
-                            }
-                        }
-                        break;
-                    default:
-                        {
-                            if (!prop.placeholder) {
-                                prop.placeholder = "Enter ".concat(((_d = property.title) !== null && _d !== void 0 ? _d : propertyName).toLowerCase());
-                            }
-                            if (property.minLength) {
-                                if (!prop.errorMessage.minLength) {
-                                    prop.errorMessage.minLength = "".concat((_e = property.title) !== null && _e !== void 0 ? _e : propertyName, " must be at least ").concat(property.minLength, " characters.");
-                                }
-                            }
-                            else if (required) {
-                                property.minLength = 1;
-                                prop.errorMessage.minLength = "".concat((_f = property.title) !== null && _f !== void 0 ? _f : propertyName, " is required");
-                            }
-                            if (property.maxLength) {
-                                if (!prop.errorMessage.maxLength) {
-                                    prop.errorMessage.maxLength = "".concat((_g = property.title) !== null && _g !== void 0 ? _g : propertyName, " must be less than ").concat(property.maxLength, " characters.");
-                                }
-                            }
-                        }
-                        break;
-                }
-                break;
-        }
-        var placeholder = property.placeholder;
-        placeholder = typeof placeholder === 'string' ? placeholder : undefined;
-        switch (property.type) {
-            case 'string': {
-                switch (property.variant) {
-                    case 'select': {
-                        if ('options' in property) {
-                            var formSelectProps = property;
-                            p.push((0, jsx_runtime_1.jsx)(PageFormSelectOption_1.PageFormSelectOption, { id: base + propertyName, name: base + propertyName, label: title, placeholderText: placeholder, isRequired: required, options: formSelectProps.options, footer: formSelectProps.footer, labelHelpTitle: title, labelHelp: description }, base + propertyName));
-                        }
-                        else {
-                            p.push((0, jsx_runtime_1.jsx)(PageFormTextSelect_1.FormTextSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, selectTitle: property.selectTitle, selectValue: property.selectValue, selectOpen: property.selectOpen }, base + propertyName));
-                        }
-                        break;
-                    }
-                    case 'textarea':
-                        p.push((0, jsx_runtime_1.jsx)(PageFormTextArea_1.PageFormTextArea, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required }, base + propertyName));
-                        break;
-                    case 'secret':
-                        {
-                            var typeSecretInputOptions = property;
-                            p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, type: "password", autoComplete: typeSecretInputOptions.autoComplete }, base + propertyName));
-                        }
-                        break;
-                    default:
-                        {
-                            var typeTextInputOptions = property;
-                            p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, autoComplete: typeTextInputOptions.autoComplete }, base + propertyName));
-                        }
-                        break;
-                }
-                break;
-            }
-            case 'number': {
-                p.push((0, jsx_runtime_1.jsx)(PageFormSlider_1.PageFormSlider, { name: base + propertyName, label: title, required: required, min: property.min, max: property.max, valueLabel: property.valueLabel }, base + propertyName));
-                break;
-            }
-            case 'boolean': {
-                p.push((0, jsx_runtime_1.jsx)(PageFormSwitch_1.PageFormSwitch, { name: base + propertyName, label: title, required: required }, base + propertyName));
-                break;
-            }
-            case 'object': {
-                p.push((0, jsx_runtime_1.jsx)(PageFormSchema, { schema: property, base: base + propertyName }, propertyName));
-                break;
-            }
-        }
-    }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: p });
-}
-exports.PageFormSchema = PageFormSchema;
-function TypeTextInput(options) {
-    return typebox_1.Type.String(__assign({}, options));
-}
-exports.TypeTextInput = TypeTextInput;
-function TypeSecretInput(options) {
-    return typebox_1.Type.String(__assign(__assign({}, options), { variant: 'secret' }));
-}
-exports.TypeSecretInput = TypeSecretInput;
-function TypeSelect(options) {
-    return typebox_1.Type.String(__assign(__assign({}, options), { variant: 'select' }));
-}
-exports.TypeSelect = TypeSelect;

package/cjs/PageForm/Utils/PageFormHidden.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageFormHidden = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_hook_form_1 = require("react-hook-form");
-function PageFormHidden(props) {
-    var value = (0, react_hook_form_1.useWatch)({ name: props.watch });
-    var hidden = props.hidden(value);
-    if (hidden)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
-}
-exports.PageFormHidden = PageFormHidden;

package/cjs/PageForm/Utils/PageFormSection.js

@@ -1,20 +0,0 @@
-"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.PageFormSection = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_core_1 = require("@patternfly/react-core");
-function PageFormSection(props) {
-    return ((0, jsx_runtime_1.jsx)(react_core_1.FormSection, __assign({ title: props.title, style: { marginTop: 16 } }, { children: props.children })));
-}
-exports.PageFormSection = PageFormSection;

package/cjs/PageForm/Utils/PageFormWatch.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageFormWatch = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_hook_form_1 = require("react-hook-form");
-function PageFormWatch(props) {
-    var value = (0, react_hook_form_1.useWatch)({ name: props.watch });
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children(value) });
-}
-exports.PageFormWatch = PageFormWatch;

package/cjs/PageFramework.css

@@ -1,27 +0,0 @@
-.border-top {
-  border-top: thin solid var(--pf-global--BorderColor--100);
-}
-
-.border-bottom {
-  border-bottom: thin solid var(--pf-global--BorderColor--100);
-}
-
-.light {
-  background-color: var(--pf-global--BackgroundColor--100);
-}
-
-:root:where(.pf-theme-dark) .dark-0 {
-  background-color: var(--pf-global--BackgroundColor--200);
-}
-
-:root:where(.pf-theme-dark) .dark-1 {
-  background-color: var(--pf-global--BackgroundColor--100);
-}
-
-:root:where(.pf-theme-dark) .dark-2 {
-  background-color: var(--pf-global--BackgroundColor--300);
-}
-
-:root:where(.pf-theme-dark) .dark-3 {
-  background-color: var(--pf-global--BackgroundColor--400);
-}

package/cjs/PageFramework.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-import './PageFramework.css';
-/**
- * The `PageFramework` component bundles up all the context providers in the Ansible UI framework in a convienent component for framework consumers. Examples of internal context providers are translations, navigation, settings, alerts, and dialogs.
- *
- * @example
- * <PageFramework navigate={navigate}>...</PageFramework>
- */
-export declare function PageFramework(props: {
-    children: ReactNode;
-    navigate?: (to: string) => void;
-}): JSX.Element;

package/cjs/PageFramework.js

@@ -1,31 +0,0 @@
-"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.PageFramework = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var usePageNavigate_1 = require("./components/usePageNavigate");
-var PageAlertToaster_1 = require("./PageAlertToaster");
-var PageDialog_1 = require("./PageDialog");
-require("./PageFramework.css");
-var Settings_1 = require("./Settings");
-var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
-/**
- * The `PageFramework` component bundles up all the context providers in the Ansible UI framework in a convienent component for framework consumers. Examples of internal context providers are translations, navigation, settings, alerts, and dialogs.
- *
- * @example
- * <PageFramework navigate={navigate}>...</PageFramework>
- */
-function PageFramework(props) {
-    return ((0, jsx_runtime_1.jsx)(useFrameworkTranslations_1.FrameworkTranslationsProvider, { children: (0, jsx_runtime_1.jsx)(Settings_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(PageDialog_1.PageDialogProvider, { children: (0, jsx_runtime_1.jsx)(PageAlertToaster_1.PageAlertToasterProvider, { children: (0, jsx_runtime_1.jsx)(usePageNavigate_1.PageNavigateCallbackContextProvider, __assign({ callback: props.navigate }, { children: props.children })) }) }) }) }));
-}
-exports.PageFramework = PageFramework;

package/cjs/PageHeader.d.ts

@@ -1,45 +0,0 @@
-import { ReactNode } from 'react';
-import './PageFramework.css';
-export interface ICatalogBreadcrumb {
-    id?: string;
-    label?: string;
-    to?: string;
-    target?: string;
-    component?: React.ElementType;
-}
-export interface PageHeaderProps {
-    navigation?: ReactNode;
-    breadcrumbs?: ICatalogBreadcrumb[];
-    title?: string;
-    titleHelpTitle?: string;
-    titleHelp?: string | string[];
-    titleDocLink?: string;
-    description?: string | string[];
-    controls?: ReactNode;
-    headerActions?: ReactNode;
-    footer?: ReactNode;
-}
-/**
- * PageHeader enables the responsive layout of the header.
- *
- * @param {Breadcrumb[]} breadcrumbs - The breadcrumbs for the page.
- * @param {string} title - The title of the page.
- * @param {string} titleHelpTitle - The title of help popover.
- * @param {ReactNode} titleHelp - The content for the help popover.
- * @param {string} description - The description of the page.
- * @param {ReactNode} controls - Support for extra page controls.
- * @param {ReactNode} headerActions - The actions for the page.
- * @param {ReactNode} footer - Extra components to render at the bottom of the header.
- *
- * @example
- * <PageLayout>
- *   <PageHeader
- *     breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
- *     title='Page title'
- *     description='Page description'
- *     headerActions={<TypedActions actions={actions} />}
- *   />
- *   ...
- * </PageLayout>
- */
-export declare function PageHeader(props: PageHeaderProps): JSX.Element;

package/cjs/PageHeader.js

@@ -1,111 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-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_2 = require("react");
-var styled_components_1 = __importDefault(require("styled-components"));
-var useBreakPoint_1 = require("./components/useBreakPoint");
-var usePageNavigate_1 = require("./components/usePageNavigate");
-var PageAlerts_1 = require("./PageAlerts");
-require("./PageFramework.css");
-var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
-var PageAlertsDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n"], ["\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n"])));
-function Breadcrumbs(props) {
-    var navigate = (0, usePageNavigate_1.usePageNavigate)();
-    if (!props.breadcrumbs)
-        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)
-                return null;
-            return ((0, jsx_runtime_1.jsx)(react_core_1.BreadcrumbItem, __assign({ id: breadcrumb.id, component: breadcrumb.component, isActive: breadcrumb.to === undefined }, { children: breadcrumb.to ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: breadcrumb.to, onClick: function (e) {
-                        e.preventDefault();
-                        navigate(breadcrumb.to);
-                    } }, { children: breadcrumb.label }))) : (breadcrumb.label) }), (_a = breadcrumb.id) !== null && _a !== void 0 ? _a : breadcrumb.label));
-        }) })));
-}
-/**
- * PageHeader enables the responsive layout of the header.
- *
- * @param {Breadcrumb[]} breadcrumbs - The breadcrumbs for the page.
- * @param {string} title - The title of the page.
- * @param {string} titleHelpTitle - The title of help popover.
- * @param {ReactNode} titleHelp - The content for the help popover.
- * @param {string} description - The description of the page.
- * @param {ReactNode} controls - Support for extra page controls.
- * @param {ReactNode} headerActions - The actions for the page.
- * @param {ReactNode} footer - Extra components to render at the bottom of the header.
- *
- * @example
- * <PageLayout>
- *   <PageHeader
- *     breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
- *     title='Page title'
- *     description='Page description'
- *     headerActions={<TypedActions actions={actions} />}
- *   />
- *   ...
- * </PageLayout>
- */
-function PageHeader(props) {
-    var navigation = props.navigation, breadcrumbs = props.breadcrumbs, title = props.title, description = props.description, controls = props.controls, headerActions = props.headerActions, footer = props.footer;
-    var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
-    var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
-    var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
-    var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navigation && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top dark-1", style: { paddingLeft: 0, paddingTop: 0, paddingBottom: 0 } }, { 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 })) })) }))), (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top border-bottom dark-3", style: {
-                    paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
-                    paddingBottom: xl ? 16 : 12,
-                } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { 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: translations.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 })] })))] })), footer] })) })), (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)(PageAlertsDiv, { 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;
-var templateObject_1;