@ansible/ansible-ui-framework 0.0.190

package/mjs/framework/PageForm.js

@@ -0,0 +1,316 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ajvResolver } from '@hookform/resolvers/ajv';
+import { ActionGroup, Alert, Button, Checkbox, Flex, FlexItem, Form, FormGroup, FormSection, Grid, InputGroup, Menu, MenuItem, PageSection, Select, SelectGroup, SelectOption, SelectVariant, Slider, Switch, TextArea, TextInput, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Tooltip, } from '@patternfly/react-core';
+import { CaretDownIcon, EyeIcon, EyeSlashIcon, SearchIcon } from '@patternfly/react-icons';
+import deepEqual from 'fast-deep-equal';
+import { Children, Fragment, isValidElement, useCallback, useContext, useState, } from 'react';
+import { FormProvider, useController, useForm, useFormContext, useFormState, } from 'react-hook-form';
+import { Collapse, PageHeader, useBreakpoint } from '.';
+import { Scrollable } from './components/Scrollable';
+import { SettingsContext } from './Settings';
+export function FormPage(props) {
+    // const methods = useForm<PartialDeep<T>>({
+    //     defaultValues: props.defaultValues,
+    //     resolver: ajvResolver(props.schema, { strict: false }),
+    // })
+    const children = Children.toArray(props.children);
+    const inputs = children.filter((child) => {
+        if (!isValidElement(child))
+            return false;
+        if (child.type === FormPageAlerts)
+            return false;
+        if (child.type === FormPageButtons)
+            return false;
+        return true;
+    });
+    const buttons = children.find((child) => {
+        if (!isValidElement(child))
+            return false;
+        if (child.type === FormPageButtons)
+            return true;
+        return false;
+    });
+    const [settings] = useContext(SettingsContext);
+    return (_jsxs(_Fragment, { children: [!props.hideHeader && _jsx(PageHeader, { ...props }), _jsxs(Form
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            , { 
+                // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                onSubmit: props.form.handleSubmit(props.onSubmit), isHorizontal: props.isVertical ? false : settings.formLayout === 'horizontal', style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    overflow: 'hidden',
+                }, children: [_jsx(Scrollable, { style: { height: '100%', flexGrow: 1 }, children: _jsx(PageSection, { padding: { default: props.noPadding ? 'noPadding' : 'padding' }, isWidthLimited: true, children: _jsx(FormSection, { children: inputs }) }) }), buttons] })] }));
+}
+export function FormPageAlerts() {
+    const { errors } = useFormState();
+    const isMd = useBreakpoint('md');
+    return (_jsx(Fragment, { children: errors && Object.keys(errors).length > 0 && (_jsx(Alert, { title: "Please fix validation errors.", isInline: true, style: { width: '100%', paddingLeft: isMd ? 190 : undefined }, variant: "danger" })) }));
+}
+export function FormPageButtons(props) {
+    const { errors } = useFormState();
+    return (_jsxs("div", { children: [_jsx(FormPageAlerts, {}), _jsx(PageSection, { isFilled: true, style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    maxHeight: '100%',
+                    borderTop: 'thin solid var(--pf-global--BorderColor--100)',
+                }, variant: "light", children: _jsxs(ActionGroup, { style: { marginTop: 0 }, children: [errors && Object.keys(errors).length > 0 ? (_jsx(Tooltip, { content: 'Please fix validation errors', children: _jsx(Button, { type: "submit", isAriaDisabled: true, children: props.submitText }) })) : (_jsx(Button, { type: "submit", children: props.submitText })), _jsx(Button, { type: "button", variant: "link", onClick: props.onCancel, children: props.cancelText })] }) })] }));
+}
+export function FormInputCheckbox(props) {
+    const { control } = useFormContext();
+    const { field } = useController({ control, name: props.name });
+    const id = props.name;
+    return (_jsx(Checkbox, { label: props.label, id: id, "aria-describedby": `${id}-helper`, description: props.description, body: field.value ? props.body : undefined, ...field, isChecked: !!field.value }));
+}
+export function FormTextInput(props) {
+    const { register, formState: { isSubmitting }, } = useFormContext();
+    const registration = register(props.name);
+    const { fieldState } = useController({ name: props.name });
+    const error = fieldState.error;
+    const id = props.id ?? props.name;
+    const [showSecret, setShowSecret] = useState(false);
+    return (_jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: error?.message ? 'error' : undefined, helperTextInvalid: error?.message, children: _jsxs(InputGroup, { children: [_jsx(TextInput, { id: id, type: props.secret && !showSecret ? 'password' : 'text', "aria-describedby": `${id}-form-group`, isRequired: props.required, validated: error?.message ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder, ...registration, onChange: (v, e) => {
+                        void registration.onChange(e);
+                    }, 
+                    // innerRef={registration.ref}
+                    isReadOnly: isSubmitting }), props.secret && (_jsx(Button, { variant: "control", onClick: () => setShowSecret(!showSecret), "aria-label": "Options menu", isDisabled: isSubmitting, children: showSecret ? _jsx(EyeIcon, {}) : _jsx(EyeSlashIcon, {}) }))] }) }));
+}
+export function FormTextArea(props) {
+    const { register, formState: { isSubmitting }, } = useFormContext();
+    const registration = register(props.name);
+    const { fieldState } = useController({ name: props.name });
+    const error = fieldState.error;
+    const id = props.id ?? props.name;
+    return (_jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: error?.message ? 'error' : undefined, helperTextInvalid: error?.message, children: _jsx(TextArea, { id: id, type: props.secret ? 'password' : 'text', "aria-describedby": `${id}-form-group`, isRequired: props.required, validated: error?.message ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder, ...registration, onChange: (v, e) => void registration.onChange(e), resizeOrientation: "vertical", isReadOnly: isSubmitting }) }));
+}
+export function FormNumberInput(props) {
+    const { formState: { isSubmitting }, } = useFormContext();
+    const { field, fieldState } = useController({ name: props.name });
+    const error = fieldState.error;
+    const id = props.id ?? props.name;
+    const max = props.max ?? 100;
+    const min = props.min ?? 1;
+    const value = Number(field.value);
+    return (_jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: error?.message ? 'error' : undefined, helperTextInvalid: error?.message, children: _jsxs(Flex, { alignItems: { default: 'alignItemsFlexStart' }, children: [_jsxs(Flex, { alignItems: { default: 'alignItemsFlexStart' }, spaceItems: { default: 'spaceItemsSm' }, children: [_jsx(FlexItem, { style: { paddingTop: 6, minWidth: 20, textAlign: 'right' }, children: Math.floor((max - min) * value + min) }), props.valueLabel && (_jsx(FlexItem, { style: { paddingTop: 6, minWidth: 40 }, children: props.valueLabel }))] }), _jsx(FlexItem, { grow: { default: 'grow' }, children: _jsx(Slider, { id: id, "aria-describedby": `${id}-form-group`, 
+                        // isRequired={props.required}
+                        // validated={error?.message ? 'error' : undefined}
+                        autoFocus: props.autoFocus, 
+                        // {...registration}
+                        value: (max - min) * value + min, onChange: (v) => field.onChange((v - min) / (max - min)), max: max, min: min, 
+                        // innerRef={registration.ref}
+                        isDisabled: isSubmitting, showBoundaries: false }) })] }) }));
+}
+export function FormBooleanInput(props) {
+    const { formState: { isSubmitting }, } = useFormContext();
+    const { field, fieldState } = useController({ name: props.name });
+    const error = fieldState.error;
+    const id = props.id ?? props.name;
+    return (_jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: error?.message ? 'error' : undefined, helperTextInvalid: error?.message, children: _jsx(Switch, { id: id, "aria-describedby": `${id}-form-group`, 
+            // isRequired={props.required}
+            // validated={error?.message ? 'error' : undefined}
+            autoFocus: props.autoFocus, 
+            // placeholder={props.placeholder}
+            // {...registration}
+            isChecked: typeof field.value === 'boolean' ? field.value : false, onChange: (e) => field.onChange(e), 
+            // innerRef={registration.ref}
+            isDisabled: isSubmitting }) }));
+}
+export function FormSelect(props) {
+    const { field, fieldState: { error: fieldError }, } = useController({ name: props.name });
+    const [open, setOpen] = useState(false);
+    const id = props.id ?? props.name;
+    const error = fieldError !== undefined && fieldError.message;
+    const { options } = props;
+    options.sort((l, r) => {
+        if ((l.group ?? '') < (r.group ?? ''))
+            return -1;
+        if ((l.group ?? '') > (r.group ?? ''))
+            return 1;
+        if (l.label < r.label)
+            return -1;
+        if (l.label > r.label)
+            return 1;
+        return 0;
+    });
+    const selectedIndex = options.findIndex((option) => deepEqual(option.value, field.value));
+    const groups = options.reduce((groups, option) => {
+        const group = option.group ?? '';
+        let optionsArray = groups[group];
+        if (!optionsArray) {
+            optionsArray = [];
+            groups[group] = optionsArray;
+        }
+        optionsArray.push(option);
+        return groups;
+    }, {});
+    const isGrouped = Object.keys(groups).length > 1 ||
+        (Object.keys(groups).length === 1 && Object.keys(groups)[0] !== '');
+    const onSelect = useCallback((_event, value) => {
+        if (typeof value !== 'string') {
+            value = value.toString();
+        }
+        const selectedIndex = Number(value);
+        const selected = options[selectedIndex].value;
+        field.onChange(selected);
+        setOpen(false);
+    }, [field, options]);
+    let index = 0;
+    return (_jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperTextInvalid: error, helperText: props.help, isRequired: props.required, validated: error ? 'error' : undefined, children: _jsx(Select, { id: id, variant: SelectVariant.single, "aria-describedby": `${id}-helper`, validated: error ? 'error' : undefined, ...field, isOpen: open, onToggle: () => setOpen(!open), selections: selectedIndex === -1 ? '' : selectedIndex.toString(), onSelect: onSelect, isCreatable: props.create, isInputFilterPersisted: props.create, placeholderText: props.placeholder, isGrouped: isGrouped, footer: props.footer?.label && (_jsx(Button, { variant: "link", isInline: true, onClick: () => {
+                    setOpen(false);
+                    props.footer?.click?.();
+                }, children: props.footer.label })), maxHeight: 280, children: !isGrouped
+                ? options.map((option, index) => (_jsx(SelectOption, { value: index.toString(), label: option.label, description: option.description, children: option.label }, index)))
+                : Object.keys(groups).map((group) => (_jsx(SelectGroup, { label: group, children: groups[group].map((option) => (_jsx(SelectOption, { value: (index++).toString(), label: option.label, description: option.description, children: option.label }, index))) }, group))) }) }));
+}
+export function FormSelectInput(props) {
+    const { control } = useFormContext();
+    const { field, fieldState: { error }, } = useController({ control, name: props.name });
+    const menuItems = Children.toArray(props.children)
+        .filter((child) => isValidElement(child) && child.type === SelectOption)
+        .map((child) => {
+        if (isValidElement(child) && child.type === SelectOption) {
+            return (_jsx(MenuItem, { children: child.props.children }, child.props.value));
+        }
+        return _jsx(_Fragment, {});
+    });
+    const [open, setOpen] = useState(false);
+    const id = props.name;
+    let errorMessage;
+    switch (error?.type) {
+        case 'required':
+            errorMessage = props.label + ' is required.';
+            break;
+        default:
+            errorMessage = error?.type;
+            break;
+    }
+    return (_jsx(FormGroup, { fieldId: id, label: props.label, helperTextInvalid: errorMessage, helperText: props.helperText, isRequired: props.required, validated: errorMessage ? 'error' : undefined, children: _jsxs(TextInputGroup, { children: [_jsx(TextInputGroupMain, { ...field }), _jsx(TextInputGroupUtilities, { children: _jsx(Button, { variant: "plain", onClick: () => setOpen(!open), "aria-label": "Options menu", children: _jsx(CaretDownIcon, {}) }) }), open && (_jsx(Menu, { style: { position: 'absolute', right: 0, top: 36, width: '100%' }, children: menuItems }))] }) }));
+}
+export function FormTextSelect(props) {
+    const { register, setValue, formState: { isSubmitting }, } = useFormContext();
+    const registration = register(props.name);
+    const { fieldState } = useController({ name: props.name });
+    const error = fieldState.error;
+    let id = props.id ?? props.name;
+    id = id.split('.').join('-');
+    return (_jsx(Fragment, { children: _jsx(FormGroup, { id: `${id}-form-group`, fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: error?.message ? 'error' : undefined, helperTextInvalid: error?.message, children: _jsxs(InputGroup, { children: [_jsx(TextInput, { id: id, type: props.secret ? 'password' : 'text', "aria-describedby": `${id}-form-group`, isRequired: props.required, validated: error?.message ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder, ...registration, onChange: (v, e) => {
+                            void registration.onChange(e);
+                        }, 
+                        // innerRef={registration.ref}
+                        isReadOnly: isSubmitting }), _jsx(Button, { variant: "control", onClick: () => props.selectOpen?.((item) => {
+                            if (props.selectValue) {
+                                const value = props.selectValue(item);
+                                setValue(props.name, value, { shouldValidate: true });
+                            }
+                        }, props.selectTitle), "aria-label": "Options menu", isDisabled: isSubmitting, children: _jsx(SearchIcon, {}) })] }) }) }));
+}
+export function FormSchema(props) {
+    const { schema } = props;
+    const base = props.base ? props.base + '.' : '';
+    const p = [];
+    for (const propertyName in schema.properties) {
+        const property = schema.properties[propertyName];
+        switch (property) {
+            case true:
+            case false:
+                continue;
+        }
+        const title = typeof property.title === 'string' ? property.title : propertyName;
+        let placeholder = property.placeholder;
+        placeholder = typeof placeholder === 'string' ? placeholder : undefined;
+        const required = Array.isArray(schema.required) && schema.required.includes(propertyName);
+        switch (property.type) {
+            case 'string': {
+                switch (property.variant) {
+                    case 'select': {
+                        if ('options' in property) {
+                            const formSelectProps = property;
+                            p.push(_jsx(FormSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, options: formSelectProps.options, footer: formSelectProps.footer }, base + propertyName));
+                        }
+                        else {
+                            p.push(_jsx(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(_jsx(FormTextArea, { name: base + propertyName, label: title, placeholder: placeholder, required: required }, base + propertyName));
+                        break;
+                    case 'secret':
+                        p.push(_jsx(FormTextInput, { name: base + propertyName, label: title, placeholder: placeholder, required: required, secret: true }, base + propertyName));
+                        break;
+                    default:
+                        p.push(_jsx(FormTextInput, { name: base + propertyName, label: title, placeholder: placeholder, required: required }, base + propertyName));
+                        break;
+                }
+                break;
+            }
+            case 'number': {
+                p.push(_jsx(FormNumberInput, { name: base + propertyName, label: title, required: required, min: property.min, max: property.max, valueLabel: property.valueLabel }, base + propertyName));
+                break;
+            }
+            case 'boolean': {
+                p.push(_jsx(FormBooleanInput, { name: base + propertyName, label: title, required: required }, base + propertyName));
+                break;
+            }
+            case 'object': {
+                p.push(_jsx(FormSchema, { schema: property, base: base + propertyName }, propertyName));
+                break;
+            }
+        }
+    }
+    return _jsx(_Fragment, { children: p });
+}
+export function PageForm(props) {
+    const { schema, defaultValue } = props;
+    const form = useForm({
+        defaultValues: defaultValue ?? {},
+        resolver: schema
+            ? ajvResolver(schema, { strict: false, addFormats: true })
+            : undefined,
+    });
+    const { handleSubmit, setError: setFieldError } = form;
+    const [error, setError] = useState('');
+    const isMd = useBreakpoint('md');
+    const [settings] = useContext(SettingsContext);
+    const isHorizontal = props.isVertical ? false : settings.formLayout === 'horizontal';
+    const multipleColumns = props.singleColumn ? false : settings.formColumns === 'multiple';
+    const sm = multipleColumns ? (isHorizontal ? 12 : 12) : 12;
+    const md = multipleColumns ? (isHorizontal ? 12 : 6) : 12;
+    const lg = multipleColumns ? (isHorizontal ? 6 : 6) : 12;
+    const xl = multipleColumns ? (isHorizontal ? 6 : 6) : 12;
+    const xl2 = multipleColumns ? (isHorizontal ? 4 : 4) : 12;
+    const maxWidth = multipleColumns ? undefined : isHorizontal ? 960 : 800;
+    return (
+    // <PageBody>
+    _jsx(FormProvider, { ...form, children: _jsxs(Form
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        , { 
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            onSubmit: handleSubmit((data) => {
+                setError('');
+                return props.onSubmit(data, setError, setFieldError);
+            }), isHorizontal: isHorizontal, style: {
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: 1,
+                overflow: props.disableScrolling ? undefined : 'hidden',
+                gap: 0,
+            }, children: [props.disableScrolling ? (_jsx(PageSection, { isFilled: true, 
+                    // padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
+                    variant: "light", style: { maxWidth }, children: _jsxs(Grid, { hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2, children: [props.schema && _jsx(FormSchema, { schema: props.schema }), props.children] }) })) : (_jsx(Scrollable, { style: { height: '100%', flexGrow: 1 }, children: _jsx(PageSection, { isFilled: true, 
+                        // padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
+                        variant: "light", style: { maxWidth }, children: _jsxs(Grid, { hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2, children: [props.schema && _jsx(FormSchema, { schema: props.schema }), props.children] }) }) })), _jsx(Collapse, { open: !!error, children: _jsx(Alert, { variant: "danger", title: error ?? '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } }) }), props.onCancel ? (_jsx(PageSection, { isFilled: false, style: {
+                        borderTop: 'thin solid var(--pf-global--BorderColor--100)',
+                        backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--400)' : undefined,
+                    }, variant: "light", children: _jsxs(ActionGroup, { style: { marginTop: 0 }, children: [_jsx(PageFormSubmitButton, { children: props.submitText }), props.onCancel && (_jsx(PageFormCancelButton, { onCancel: props.onCancel, children: props.cancelText }))] }) })) : (_jsx(PageFormSubmitButton, { style: { marginTop: 48 }, children: props.submitText }))] }) })
+    // </PageBody>
+    );
+}
+export function PageFormSubmitButton(props) {
+    const { isSubmitting, errors } = useFormState();
+    const hasErrors = errors && Object.keys(errors).length > 0;
+    return (_jsx(Tooltip, { content: "Please fix errors", trigger: hasErrors ? undefined : 'manual', children: _jsx(Button, { type: "submit", isDisabled: isSubmitting, isLoading: isSubmitting, isDanger: hasErrors, variant: hasErrors ? 'secondary' : undefined, style: props.style, children: props.children }) }));
+}
+export function PageFormCancelButton(props) {
+    return (_jsx(Button, { type: "button", variant: "link", onClick: props.onCancel, children: props.children }));
+}

package/mjs/framework/PageFramework.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function PageFrameworkProvider(props: {
+    children: ReactNode;
+}): JSX.Element;

package/mjs/framework/PageFramework.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageDialogProvider } from './PageDialog';
+import { SettingsProvider } from './Settings';
+import { FrameworkTranslationsProvider } from './useFrameworkTranslations';
+export function PageFrameworkProvider(props) {
+    return (_jsx(FrameworkTranslationsProvider, { children: _jsx(SettingsProvider, { children: _jsx(PageDialogProvider, { children: props.children }) }) }));
+}

package/mjs/framework/PageHeader.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+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;
+    controls?: ReactNode;
+    headerActions?: ReactNode;
+    t?: (t: string) => string;
+}
+/**
+ * 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.
+ *
+ * @example
+ * <Page>
+ *   <PageLayout>
+ *     <PageHeader
+ *       breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
+ *       title='Page title'
+ *       description='Page description'
+ *       headerActions={<PageActions actions={actions} />}
+ *     />
+ *     <PageBody />...</PageBody>
+ *   </PageLayout>
+ * <Page>
+ */
+export declare function PageHeader(props: PageHeaderProps): JSX.Element;

package/mjs/framework/PageHeader.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumb, BreadcrumbItem, Button, Flex, FlexItem, PageNavigation, PageSection, PageSectionVariants, Popover, Skeleton, Stack, StackItem, Text, Title, Truncate, } from '@patternfly/react-core';
+import { ExternalLinkAltIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { Fragment } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useBreakpoint } from './components/useBreakPoint';
+import { useSettings } from './Settings';
+function Breadcrumbs(props) {
+    const history = useNavigate();
+    if (!props.breadcrumbs)
+        return _jsx(Fragment, {});
+    return (_jsx(Breadcrumb, { style: props.style, children: props.breadcrumbs.map((breadcrumb) => {
+            if (!breadcrumb.label)
+                return _jsx(_Fragment, {});
+            return (_jsx(BreadcrumbItem, { id: breadcrumb.id, component: breadcrumb.component, onClick: breadcrumb.to ? () => breadcrumb.to && history(breadcrumb.to) : undefined, style: {
+                    color: breadcrumb.to ? 'var(--pf-c-breadcrumb__link--Color)' : undefined,
+                    cursor: breadcrumb.to ? 'pointer' : undefined,
+                }, isActive: breadcrumb.to === undefined, children: breadcrumb.label }, breadcrumb.id ?? 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.
+ *
+ * @example
+ * <Page>
+ *   <PageLayout>
+ *     <PageHeader
+ *       breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
+ *       title='Page title'
+ *       description='Page description'
+ *       headerActions={<PageActions actions={actions} />}
+ *     />
+ *     <PageBody />...</PageBody>
+ *   </PageLayout>
+ * <Page>
+ */
+export function PageHeader(props) {
+    const { navigation, breadcrumbs, title, description, controls, headerActions: pageActions, } = props;
+    const lg = useBreakpoint('lg');
+    const xl = useBreakpoint('xl');
+    const xxl = useBreakpoint('xxl');
+    const isMdOrLarger = useBreakpoint('md');
+    // const isSmLarger = useBreakpoint('sm')
+    const settings = useSettings();
+    let { t } = props;
+    t = t ? t : (t) => t;
+    return (_jsxs(_Fragment, { children: [navigation && (_jsx(PageSection, { variant: PageSectionVariants.light, style: {
+                    paddingLeft: 0,
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    borderBottom: settings.borders
+                        ? 'thin solid var(--pf-global--BorderColor--100)'
+                        : undefined,
+                    backgroundColor: 'var(--pf-global--BackgroundColor--100)',
+                }, children: _jsx(Flex, { direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' }, children: _jsx(PageNavigation, { style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 }, hasOverflowScroll: true, children: navigation }) }) })), (isMdOrLarger || !navigation) && (_jsx(PageSection, { variant: PageSectionVariants.light, style: {
+                    paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
+                    paddingBottom: xl ? 20 : 12,
+                    borderBottom: settings.borders
+                        ? 'thin solid var(--pf-global--BorderColor--100)'
+                        : undefined,
+                    backgroundColor: settings.theme === 'dark'
+                        ? xxl
+                            ? 'var(--pf-global--BackgroundColor--300)'
+                            : 'var(--pf-global--BackgroundColor--400)'
+                        : undefined,
+                }, children: _jsxs(Flex, { flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' }, children: [_jsxs(FlexItem, { grow: { default: 'grow' }, children: [breadcrumbs && (_jsx(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? (_jsx(Popover, { headerContent: props.titleHelpTitle, bodyContent: _jsxs(Stack, { hasGutter: true, children: [typeof props.titleHelp === 'string' ? (_jsx(StackItem, { children: props.titleHelp })) : (props.titleHelp.map((help, index) => (_jsx(StackItem, { children: help }, index)))), props.titleDocLink && (_jsx(StackItem, { children: _jsx(Button, { icon: _jsx(ExternalLinkAltIcon, {}), variant: "link", onClick: () => window.open(props.titleDocLink, '_blank'), isInline: true, children: t('Documentation') }) }))] }), position: "bottom-start", removeFindDomNode: true, children: _jsxs(Title, { headingLevel: "h1", children: [title, _jsx(Button, { variant: "link", style: {
+                                                    padding: 0,
+                                                    marginTop: 1,
+                                                    marginLeft: 8,
+                                                    verticalAlign: 'top',
+                                                }, children: _jsx(OutlinedQuestionCircleIcon, {}) })] }) })) : (_jsx(Title, { headingLevel: "h1", children: title }))) : (_jsx(Title, { headingLevel: "h1", children: _jsx(Skeleton, { width: "160px" }) })), isMdOrLarger && description && (_jsx(Text, { component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 }, children: _jsx(Truncate, { content: description }) }))] }), title && (pageActions || controls) && (_jsxs(Flex, { direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' }, children: [controls && _jsx(FlexItem, { grow: { default: 'grow' }, children: controls }), pageActions && _jsx(FlexItem, { children: pageActions })] }))] }) }))] }));
+}

package/mjs/framework/PageLayout.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+/**
+ * PageLayout enables the responsive layout of the page.
+ *
+ * @example
+ * <Page>
+ *   <PageLayout>
+ *     <PageHeader />
+ *     <PageBody />...</PageBody>
+ *   </PageLayout>
+ * <Page>
+ */
+export declare function PageLayout(props: {
+    children: ReactNode;
+}): JSX.Element;

package/mjs/framework/PageLayout.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import ErrorBoundary from './components/ErrorBoundary';
+/**
+ * PageLayout enables the responsive layout of the page.
+ *
+ * @example
+ * <Page>
+ *   <PageLayout>
+ *     <PageHeader />
+ *     <PageBody />...</PageBody>
+ *   </PageLayout>
+ * <Page>
+ */
+export function PageLayout(props) {
+    const { t } = useTranslation();
+    return (_jsx(ErrorBoundary, { message: t('Error'), children: _jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+                maxHeight: '100%',
+            }, children: props.children }) }));
+}

package/mjs/framework/PagePagination.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+export declare type PagePaginationProps = {
+    itemCount?: number;
+    page: number;
+    perPage: number;
+    setPage: (page: number) => void;
+    setPerPage: (perPage: number) => void;
+    style?: CSSProperties;
+};
+export declare function PagePagination(props: PagePaginationProps): JSX.Element;

package/mjs/framework/PagePagination.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pagination, PaginationVariant } from '@patternfly/react-core';
+import { useCallback } from 'react';
+import { useBreakpoint } from './components/useBreakPoint';
+import { useSettings } from './Settings';
+export function PagePagination(props) {
+    const { setPage, setPerPage } = props;
+    const onSetPage = useCallback((_event, page) => setPage(page), [setPage]);
+    const onPerPageSelect = useCallback((_event, perPage) => setPerPage(perPage), [setPerPage]);
+    const sm = useBreakpoint('md');
+    const settings = useSettings();
+    return (_jsx(Pagination, { variant: PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: {
+            ...props.style,
+            borderTop: 'thin solid var(--pf-global--BorderColor--100)',
+            boxShadow: 'none',
+            zIndex: 301,
+            marginTop: -1,
+            paddingTop: sm ? 6 : undefined,
+            paddingBottom: sm ? 6 : undefined,
+            backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+        } }));
+}

package/mjs/framework/PageTable.d.ts

@@ -0,0 +1,68 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { PageHeaderProps } from './PageHeader';
+import { IToolbarFilter } from './PageToolbar';
+import { ITypedAction } from './TypedActions';
+export declare type TablePageProps<T extends object> = PageHeaderProps & PageTableProps<T> & {
+    error?: Error;
+};
+export declare function TablePage<T extends object>(props: TablePageProps<T>): JSX.Element;
+export declare type PageTableProps<T extends object> = {
+    keyFn: (item: T) => string | number;
+    itemCount?: number;
+    pageItems: T[] | undefined;
+    toolbarActions?: ITypedAction<T>[];
+    tableColumns: ITableColumn<T>[];
+    rowActions?: ITypedAction<T>[];
+    toolbarFilters?: IToolbarFilter[];
+    filters?: Record<string, string[]>;
+    setFilters?: Dispatch<SetStateAction<Record<string, string[]>>>;
+    clearAllFilters?: () => void;
+    sort?: string;
+    setSort?: (sort: string) => void;
+    sortDirection?: 'asc' | 'desc';
+    setSortDirection?: (sortDirection: 'asc' | 'desc') => void;
+    compact?: boolean;
+    page: number;
+    perPage: number;
+    setPage: (page: number) => void;
+    setPerPage: (perPage: number) => void;
+    autoHidePagination?: boolean;
+    isSelected?: (item: T) => boolean;
+    selectedItems?: T[];
+    selectItem?: (item: T) => void;
+    unselectItem?: (item: T) => void;
+    selectItems?: (items: T[]) => void;
+    unselectAll?: () => void;
+    onSelect?: (item: T) => void;
+    selectNoneText?: string;
+    errorStateTitle: string;
+    error?: Error;
+    emptyStateTitle: string;
+    emptyStateDescription?: string;
+    emptyStateButtonText?: string;
+    emptyStateButtonClick?: () => void;
+    t?: (t: string) => string;
+    showSelect?: boolean;
+    ColumnManagement?: boolean;
+};
+export declare function PageTable<T extends object>(props: PageTableProps<T>): JSX.Element;
+declare type CellFn<T extends object> = (item: T) => ReactNode;
+export interface ITableColumn<T extends object> {
+    id?: string;
+    header: string;
+    cell: CellFn<T>;
+    minWidth?: number;
+    maxWidth?: number;
+    enabled?: boolean;
+    sort?: string;
+    defaultSortDirection?: 'asc' | 'desc';
+    /**
+     * @deprecated The method should not be used
+     */
+    type?: 'labels' | 'progress' | 'date';
+    /**
+     * @deprecated The method should not be used
+     */
+    sortFn?: (l: T, r: T) => number;
+}
+export {};