@ansible/ansible-ui-framework 0.0.190

package/mjs/framework/components/Masonry.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare function Masonry(props: {
+    minSize: number;
+    maxColumns?: number;
+    children?: ReactNode;
+}): JSX.Element;

package/mjs/framework/components/Masonry.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid, GridItem, Stack } from '@patternfly/react-core';
+import useResizeObserver from '@react-hook/resize-observer';
+import { Children, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+export function Masonry(props) {
+    const target = useRef(null);
+    const [columns, setColumns] = useState(1);
+    useResizeObserver(target, (entry) => {
+        setColumns(Math.min(props.maxColumns ?? 12, Math.max(Math.floor(entry.contentRect.width / props.minSize), 1)));
+    });
+    const [span, setSpan] = useState(12);
+    const [sizes, setSizes] = useState({});
+    useLayoutEffect(() => {
+        switch (columns) {
+            case 1:
+                setSpan(12);
+                break;
+            case 2:
+                setSpan(6);
+                break;
+            case 3:
+                setSpan(4);
+                break;
+            case 4:
+                setSpan(3);
+                break;
+            case 5:
+                setSpan(2);
+                break;
+            case 6:
+                setSpan(2);
+                break;
+            default:
+                setSpan(1);
+                break;
+        }
+    }, [columns]);
+    const realColumns = 12 / span;
+    const itemColumns = useMemo(() => {
+        const itemColumns = new Array(realColumns).fill(0).map(() => []);
+        const columnHeights = new Array(realColumns).fill(0);
+        Children.forEach(props.children, (child, index) => {
+            const smallest = Math.min(...columnHeights);
+            const columnIndex = columnHeights.findIndex((column) => column === smallest);
+            if (columnIndex !== undefined && columnIndex !== -1) {
+                itemColumns[columnIndex].push(_jsx(MasonryItem, { index: index, sizes: sizes, setSizes: setSizes, children: child }, index));
+                const height = sizes[index];
+                if (height !== undefined) {
+                    columnHeights[columnIndex] += height + 16;
+                }
+            }
+        });
+        return itemColumns;
+    }, [props.children, realColumns, sizes]);
+    return (_jsx("div", { ref: target, children: _jsx(Grid, { hasGutter: true, style: { maxWidth: realColumns * props.minSize }, children: itemColumns.map((column, index) => (_jsx(GridItem, { span: span, children: _jsx(Stack, { hasGutter: true, children: column }) }, index))) }) }));
+}
+function MasonryItem(props) {
+    const target = useRef(null);
+    useResizeObserver(target, (entry) => {
+        props.setSizes((sizes) => {
+            if (props.sizes[props.index] !== entry.contentRect.height) {
+                sizes = { ...sizes };
+                sizes[props.index] = entry.contentRect.height;
+            }
+            return sizes;
+        });
+    });
+    return _jsx("div", { ref: target, children: props.children });
+}

package/mjs/framework/components/Scrollable.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare function Scrollable(props: {
+    children?: ReactNode;
+    borderTop?: boolean;
+    borderBottom?: boolean;
+    style?: CSSProperties;
+}): JSX.Element;

package/mjs/framework/components/Scrollable.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useResizeObserver from '@react-hook/resize-observer';
+import { useCallback, useEffect, useRef, useState } from 'react';
+export function Scrollable(props) {
+    const divEl = useRef(null);
+    const [topShadow, setTopShadow] = useState(0);
+    const [bottomShadow, setBottomShadow] = useState(0);
+    const update = useCallback(() => {
+        /* istanbul ignore else */
+        if (divEl.current) {
+            setTopShadow(Math.min(1, divEl.current.scrollTop / 8));
+            const scrollBottom = divEl.current.scrollHeight - divEl.current.scrollTop - divEl.current.clientHeight - 1;
+            setBottomShadow(Math.max(0, Math.min(1, scrollBottom / 8)));
+        }
+    }, []);
+    useEffect(() => update(), [update, props.children]);
+    useResizeObserver(divEl, () => {
+        update();
+    });
+    const shadowOpacityTop = 0.2 * topShadow;
+    const shadowOpacityBottom = 0.2 * bottomShadow;
+    // const [theme] = useTheme()
+    // if (theme === ThemeE.Dark) {
+    //     shadowOpacityTop *= 6
+    //     shadowOpacityBottom *= 6
+    // }
+    /* istanbul ignore next */
+    const borderTop = props.borderTop ? 'thin solid rgba(0, 0, 0, 0.12)' : '';
+    /* istanbul ignore next */
+    const borderBottom = props.borderBottom ? 'thin solid rgba(0, 0, 0, 0.12)' : '';
+    return (_jsxs("div", { style: {
+            ...props.style,
+            display: 'flex',
+            flexDirection: 'column',
+            flexGrow: 1,
+            overflowY: 'hidden',
+            position: 'relative',
+        }, children: [_jsx("div", { ref: divEl, style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    overflowY: 'auto',
+                    borderTop,
+                    borderBottom,
+                }, onScroll: update, children: props.children }), 
+            /* istanbul ignore next */ shadowOpacityTop > 0 && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    height: '10px',
+                    width: '100%',
+                    background: `linear-gradient(rgba(0,0,0,${shadowOpacityTop}), rgba(0,0,0,0))`,
+                } })), 
+            /* istanbul ignore next */ shadowOpacityBottom > 0 && (_jsx("div", { style: {
+                    position: 'absolute',
+                    bottom: 0,
+                    height: '10px',
+                    width: '100%',
+                    background: `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,${shadowOpacityBottom}))`,
+                } }))] }));
+}

package/mjs/framework/components/SingleSelect.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare function SingleSelect(props: {
+    id?: string;
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    children: ReactNode;
+    style?: CSSProperties;
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+}): JSX.Element;
+export declare function SingleSelect2(props: {
+    id?: string;
+    children: ReactNode;
+    value?: string;
+    onChange: (value: string) => void;
+    label?: string;
+}): JSX.Element;

package/mjs/framework/components/SingleSelect.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormGroup, Select } from '@patternfly/react-core';
+import { useCallback, useState } from 'react';
+import { useOpen } from './useOpen';
+export function SingleSelect(props) {
+    const { onChange } = props;
+    const [open, setOpen, onToggle] = useOpen(props);
+    const onSelect = useCallback((_e, v) => {
+        if (typeof v === 'string') {
+            onChange(v);
+        }
+        else {
+            onChange(v.toString());
+        }
+        setOpen(false);
+    }, [onChange, setOpen]);
+    const id = props.id ?? props.label.toLocaleLowerCase().split(' ').join('-');
+    return (_jsx(FormGroup, { label: props.label, fieldId: id, style: props.style, children: _jsx(Select, { id: id, selections: props.value, isOpen: open, onToggle: onToggle, onSelect: onSelect, children: props.children }) }));
+}
+export function SingleSelect2(props) {
+    const { onChange } = props;
+    const { id } = props;
+    const [open, setOpen] = useState(false);
+    const onToggle = useCallback(() => {
+        setOpen((open) => !open);
+    }, []);
+    const onSelect = useCallback((_e, v) => {
+        if (typeof v === 'string') {
+            onChange(v);
+        }
+        else {
+            onChange(v.toString());
+        }
+        setOpen(false);
+    }, [onChange]);
+    return (_jsx(Select, { id: id, selections: props.value, isOpen: open, onToggle: onToggle, onSelect: onSelect, children: props.children }));
+}

package/mjs/framework/components/patternfly-colors.d.ts

@@ -0,0 +1,13 @@
+export declare enum PatternFlyColor {
+    Green = "green",
+    Blue = "blue",
+    Red = "red",
+    Yellow = "yellow",
+    Grey = "grey"
+}
+export declare function getPatternflyColor(color: PatternFlyColor): "var(--pf-global--success-color--100)" | "var(--pf-global--danger-color--100)" | "var(--pf-global--warning-color--100)" | "var(--pf-global--info-color--100)" | "var(--pf-global--disabled-color--100)" | undefined;
+export declare const pfSuccess = "var(--pf-global--success-color--100)";
+export declare const pfDanger = "var(--pf-global--danger-color--100)";
+export declare const pfWarning = "var(--pf-global--warning-color--100)";
+export declare const pfInfo = "var(--pf-global--info-color--100)";
+export declare const pfDisabled = "var(--pf-global--disabled-color--100)";

package/mjs/framework/components/patternfly-colors.js

@@ -0,0 +1,28 @@
+export var PatternFlyColor;
+(function (PatternFlyColor) {
+    PatternFlyColor["Green"] = "green";
+    PatternFlyColor["Blue"] = "blue";
+    PatternFlyColor["Red"] = "red";
+    PatternFlyColor["Yellow"] = "yellow";
+    PatternFlyColor["Grey"] = "grey";
+})(PatternFlyColor || (PatternFlyColor = {}));
+export function getPatternflyColor(color) {
+    switch (color) {
+        case 'green':
+            return pfSuccess;
+        case 'red':
+            return pfDanger;
+        case 'yellow':
+            return pfWarning;
+        case 'blue':
+            return pfInfo;
+        case 'grey':
+            return pfDisabled;
+    }
+    return undefined;
+}
+export const pfSuccess = 'var(--pf-global--success-color--100)';
+export const pfDanger = 'var(--pf-global--danger-color--100)';
+export const pfWarning = 'var(--pf-global--warning-color--100)';
+export const pfInfo = 'var(--pf-global--info-color--100)';
+export const pfDisabled = 'var(--pf-global--disabled-color--100)';

package/mjs/framework/components/useBreakPoint.d.ts

@@ -0,0 +1,5 @@
+export declare type WindowSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export declare function useWindowSize(): WindowSize;
+/** Returns true if the window size is equal to or larger than the indicated size. */
+export declare function useBreakpoint(size: WindowSize): boolean;
+export declare function useOrientation(): 'landscape' | 'portrait';

package/mjs/framework/components/useBreakPoint.js

@@ -0,0 +1,118 @@
+import xl2Breakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl';
+import lgBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
+import mdBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_md';
+import smBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_sm';
+import xlBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
+import xsBreakpoint from '@patternfly/react-tokens/dist/esm/global_breakpoint_xs';
+import { useCallback, useEffect, useState } from 'react';
+const breakpoints = {
+    xs: Number(xsBreakpoint.value.replace('px', '')),
+    sm: Number(smBreakpoint.value.replace('px', '')),
+    md: Number(mdBreakpoint.value.replace('px', '')),
+    lg: Number(lgBreakpoint.value.replace('px', '')),
+    xl: Number(xlBreakpoint.value.replace('px', '')),
+    xxl: Number(xl2Breakpoint.value.replace('px', '')),
+};
+export function useWindowSize() {
+    const [windowSize, setWindowSize] = useState(() => {
+        if (window.innerWidth <= breakpoints.sm)
+            return 'xs';
+        else if (window.innerWidth <= breakpoints.md)
+            return 'sm';
+        else if (window.innerWidth <= breakpoints.lg)
+            return 'md';
+        else if (window.innerWidth <= breakpoints.xl)
+            return 'lg';
+        else if (window.innerWidth <= breakpoints.xxl)
+            return 'xl';
+        else
+            return 'xxl';
+    });
+    const handleResize = useCallback(() => {
+        if (window.innerWidth <= breakpoints.sm)
+            setWindowSize('xs');
+        else if (window.innerWidth <= breakpoints.md)
+            setWindowSize('sm');
+        else if (window.innerWidth <= breakpoints.lg)
+            setWindowSize('md');
+        else if (window.innerWidth <= breakpoints.xl)
+            setWindowSize('lg');
+        else if (window.innerWidth <= breakpoints.xxl)
+            setWindowSize('xl');
+        else
+            setWindowSize('xxl');
+    }, []);
+    useEffect(() => {
+        const handler = handleResize;
+        window.addEventListener('resize', handler);
+        return () => window.removeEventListener('resize', handler);
+    }, [handleResize]);
+    useEffect(() => handleResize(), [handleResize]);
+    return windowSize;
+}
+/** Returns true if the window size is equal to or larger than the indicated size. */
+export function useBreakpoint(size) {
+    const windowSize = useWindowSize();
+    switch (size) {
+        case 'xs':
+            return true;
+        case 'sm':
+            switch (windowSize) {
+                case 'sm':
+                case 'md':
+                case 'lg':
+                case 'xl':
+                case 'xxl':
+                    return true;
+                default:
+                    return false;
+            }
+        case 'md':
+            switch (windowSize) {
+                case 'md':
+                case 'lg':
+                case 'xl':
+                case 'xxl':
+                    return true;
+                default:
+                    return false;
+            }
+        case 'lg':
+            switch (windowSize) {
+                case 'lg':
+                case 'xl':
+                case 'xxl':
+                    return true;
+                default:
+                    return false;
+            }
+        case 'xl':
+            switch (windowSize) {
+                case 'xl':
+                case 'xxl':
+                    return true;
+                default:
+                    return false;
+            }
+        case 'xxl':
+            switch (windowSize) {
+                case 'xxl':
+                    return true;
+                default:
+                    return false;
+            }
+    }
+}
+export function useOrientation() {
+    const [orientation, setOrientation] = useState(() => window.innerWidth > window.innerHeight ? 'landscape' : 'portrait');
+    const handleResize = useCallback(() => {
+        setOrientation(window.innerWidth > window.innerHeight ? 'landscape' : 'portrait');
+    }, []);
+    useEffect(() => {
+        const handler = handleResize;
+        window.addEventListener('resize', handler);
+        return () => window.removeEventListener('resize', handler);
+    }, [handleResize]);
+    useEffect(() => handleResize(), [handleResize]);
+    return orientation;
+}

package/mjs/framework/components/useOpen.d.ts

@@ -0,0 +1,4 @@
+export declare function useOpen(props: {
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+}): [boolean, (open: boolean) => void, () => void];

package/mjs/framework/components/useOpen.js

@@ -0,0 +1,16 @@
+import { useCallback, useEffect, useState } from 'react';
+export function useOpen(props) {
+    const [open, setOpenState] = useState(() => props.open ?? false);
+    useEffect(() => {
+        if (props.open !== undefined) {
+            setOpenState(props.open);
+        }
+    }, [props.open, setOpenState]);
+    const setOpen = useCallback((open) => {
+        props.setOpen ? props.setOpen(open) : setOpenState(open);
+    }, [props]);
+    const onToggle = useCallback(() => {
+        setOpen(!open);
+    }, [open, setOpen]);
+    return [open, setOpen, onToggle];
+}

package/mjs/framework/components/useWindowLocation.d.ts

@@ -0,0 +1,6 @@
+export declare function useWindowHistory(): {
+    location: void | Location;
+    push: (url?: string | URL | null) => void;
+    update: (url?: string | URL | null) => void;
+};
+export declare function useSearchParams(): [URLSearchParams, (setSearchParams: URLSearchParams) => void];

package/mjs/framework/components/useWindowLocation.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+function useIsMounted() {
+    const [isMounted, setIsMounted] = useState(true);
+    useEffect(() => () => {
+        setIsMounted(false);
+    }, []);
+    return isMounted;
+}
+export function useWindowHistory() {
+    const isMounted = useIsMounted();
+    const [location, setLocation] = useState(isMounted ? window.location : undefined);
+    const setWindowLocation = useCallback(() => {
+        setLocation(window.location);
+    }, []);
+    useEffect(() => {
+        if (!isMounted)
+            return;
+        if (!location) {
+            setWindowLocation();
+        }
+        window.addEventListener('popstate', setWindowLocation);
+        return () => {
+            window.removeEventListener('popstate', setWindowLocation);
+        };
+    }, [isMounted, location, setWindowLocation]);
+    const push = useCallback((url) => {
+        window.history.replaceState(null, '', url);
+        setWindowLocation();
+    }, [setWindowLocation]);
+    const update = useCallback((url) => {
+        window.history.replaceState(null, '', url);
+        setWindowLocation();
+    }, [setWindowLocation]);
+    return { location, push, update };
+}
+export function useSearchParams() {
+    const history = useWindowHistory();
+    const pathname = history.location?.pathname || '/';
+    const searchParams = useMemo(() => new URLSearchParams(history.location?.search ?? '/'), [history.location?.search]);
+    const setSearchParams = useCallback((searchParams) => {
+        const newSearch = searchParams.toString();
+        if (newSearch)
+            history.update('?' + newSearch);
+        else
+            history.update(pathname); // retain the existing pathname
+    }, [history, pathname]);
+    return [searchParams, setSearchParams];
+}

package/mjs/framework/index.d.ts

@@ -0,0 +1,23 @@
+export * from './BulkActionDialog';
+export * from './components/BulkSelector';
+export * from './components/Collapse';
+export * from './components/Details';
+export * from './components/Help';
+export * from './components/patternfly-colors';
+export * from './components/useBreakPoint';
+export * from './PageBody';
+export * from './PageCatalog';
+export * from './PageCells';
+export * from './PageDataList';
+export * from './PageDialog';
+export * from './PageForm';
+export * from './PageFramework';
+export * from './PageHeader';
+export * from './PageLayout';
+export * from './PageTable';
+export * from './PageTabs';
+export * from './PageToolbar';
+export * from './TypedActions';
+export * from './useSelectDialog';
+export * from './useTableItems';
+export * from './utils/compare';

package/mjs/framework/index.js

@@ -0,0 +1,23 @@
+export * from './BulkActionDialog';
+export * from './components/BulkSelector';
+export * from './components/Collapse';
+export * from './components/Details';
+export * from './components/Help';
+export * from './components/patternfly-colors';
+export * from './components/useBreakPoint';
+export * from './PageBody';
+export * from './PageCatalog';
+export * from './PageCells';
+export * from './PageDataList';
+export * from './PageDialog';
+export * from './PageForm';
+export * from './PageFramework';
+export * from './PageHeader';
+export * from './PageLayout';
+export * from './PageTable';
+export * from './PageTabs';
+export * from './PageToolbar';
+export * from './TypedActions';
+export * from './useSelectDialog';
+export * from './useTableItems';
+export * from './utils/compare';

package/mjs/framework/useFrameworkTranslations.d.ts

@@ -0,0 +1,17 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+export interface IFrameworkTranslations {
+    errorText: string;
+    cancelText: string;
+    closeText: string;
+    confirmText: string;
+    pendingText: string;
+    submitText: string;
+    submittingText: string;
+    successText: string;
+    processingText: string;
+    noItemsFound: string;
+}
+export declare function FrameworkTranslationsProvider(props: {
+    children: ReactNode;
+}): JSX.Element;
+export declare function useFrameworkTranslations(): [translations: IFrameworkTranslations, setTranslations: Dispatch<SetStateAction<IFrameworkTranslations>>];

package/mjs/framework/useFrameworkTranslations.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+const defaultTranslations = {
+    errorText: 'Error',
+    cancelText: 'Cancel',
+    closeText: 'Close',
+    confirmText: 'Confirm',
+    pendingText: 'Pending',
+    submitText: 'Submit',
+    submittingText: 'Submitting',
+    successText: 'Success',
+    processingText: 'Processing',
+    noItemsFound: 'No items found',
+};
+const FrameworkTranslationsContext = createContext([defaultTranslations, () => alert('Use FrameworkTranslationsProvider')]);
+export function FrameworkTranslationsProvider(props) {
+    const state = useState(defaultTranslations);
+    return (_jsx(FrameworkTranslationsContext.Provider, { value: state, children: props.children }));
+}
+export function useFrameworkTranslations() {
+    return useContext(FrameworkTranslationsContext);
+}

package/mjs/framework/useSelectDialog.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ITableColumn } from './PageTable';
+import { IToolbarFilter } from './PageToolbar';
+import { ISelected } from './useTableItems';
+import { IView } from './useView';
+interface ISelectDialogOptions<T extends object> {
+    view: IView & ISelected<T> & {
+        itemCount?: number;
+        pageItems: T[] | undefined;
+    };
+    tableColumns: ITableColumn<T>[];
+    toolbarFilters: IToolbarFilter[];
+    confirm: string;
+    cancel: string;
+    selected: string;
+}
+export declare function useSelectDialog<T extends {
+    id: number;
+}>(options: ISelectDialogOptions<T>): (onSelect?: ((item: T) => void) | undefined, title?: string) => void;
+export declare type SelectDialogProps<T extends object> = {
+    title: string;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    onSelect: (item: T) => void;
+    keyFn: (item: T) => string | number;
+} & ISelectDialogOptions<T>;
+export declare function SelectDialog<T extends {
+    id: number;
+}>(props: SelectDialogProps<T>): JSX.Element;
+export {};

package/mjs/framework/useSelectDialog.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Modal, ModalBoxBody, ModalVariant, Skeleton, Split, SplitItem, } from '@patternfly/react-core';
+import { useCallback, useEffect, useState } from 'react';
+import { Collapse } from './components/Collapse';
+import { usePageDialog } from './PageDialog';
+import { PageTable } from './PageTable';
+export function useSelectDialog(options) {
+    const { view, tableColumns, toolbarFilters, confirm, cancel, selected } = options;
+    const [title, setTitle] = useState('');
+    const [onSelect, setOnSelect] = useState();
+    const openSetting = useCallback((onSelect, title) => {
+        setTitle(title ?? '');
+        setOnSelect(() => onSelect);
+    }, []);
+    const [_, setDialog] = usePageDialog();
+    useEffect(() => {
+        if (onSelect !== undefined) {
+            setDialog(_jsx(SelectDialog, { title: title, open: true, setOpen: () => setOnSelect(undefined), onSelect: onSelect, view: view, tableColumns: tableColumns, toolbarFilters: toolbarFilters, confirm: confirm, cancel: cancel, selected: selected, keyFn: view.keyFn }));
+        }
+        else {
+            setDialog(undefined);
+            view.unselectAll();
+        }
+    }, [cancel, confirm, onSelect, selected, setDialog, tableColumns, title, toolbarFilters, view]);
+    return openSetting;
+}
+export function SelectDialog(props) {
+    const { title, open, setOpen, onSelect, view, tableColumns, toolbarFilters, confirm, cancel, selected, } = props;
+    const onClose = () => setOpen(false);
+    return (_jsxs(Modal, { title: title, isOpen: open, onClose: onClose, variant: ModalVariant.medium, tabIndex: 0, actions: [
+            _jsx(Button, { variant: "primary", onClick: () => {
+                    if (view.selectedItems.length > 0) {
+                        onSelect(view.selectedItems[0]);
+                    }
+                    onClose();
+                }, isAriaDisabled: view.selectedItems.length === 0, children: confirm }, "confirm"),
+            _jsx(Button, { variant: "link", onClick: onClose, children: cancel }, "cancel"),
+        ], hasNoBodyWrapper: true, children: [_jsx(ModalBoxBody, { style: { overflow: 'hidden' }, children: _jsxs(Split, { hasGutter: true, children: [_jsx(SplitItem, { style: { opacity: view.selectedItems.length === 0 ? 0 : undefined }, children: selected }), _jsxs("b", { children: [view.selectedItems.map((item) => {
+                                    if (tableColumns && tableColumns.length > 0) {
+                                        return _jsx("span", { children: tableColumns[0].cell(item) }, props.keyFn(item));
+                                    }
+                                    return _jsx(_Fragment, {});
+                                }), _jsx(_Fragment, {})] })] }) }), _jsx(Collapse, { open: view.itemCount === undefined, children: _jsx(Skeleton, { height: "80px" }) }), _jsx(Collapse, { open: view.itemCount !== undefined, children: _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        maxHeight: 400,
+                        overflow: 'hidden',
+                    }, children: _jsx(PageTable, { tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations", ...view, onSelect: () => null }) }) })] }));
+}

package/mjs/framework/useSelectMultipleDialog.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ITableColumn } from './PageTable';
+import { IToolbarFilter } from './PageToolbar';
+import { ISelected } from './useTableItems';
+import { IView } from './useView';
+export declare type SelectMultipleDialogProps<T extends object> = {
+    title: string;
+    view: IView & ISelected<T> & {
+        itemCount?: number;
+        pageItems: T[] | undefined;
+    };
+    tableColumns: ITableColumn<T>[];
+    toolbarFilters: IToolbarFilter[];
+    onSelect: (items: T[]) => void;
+    confirmText?: string;
+    cancelText?: string;
+    emptyStateTitle?: string;
+    errorStateTitle?: string;
+};
+export declare function SelectMultipleDialog<T extends object>(props: SelectMultipleDialogProps<T>): JSX.Element;
+export declare function useSelectMultipleDialog<T extends object>(): (props: SelectMultipleDialogProps<T>) => void;