@vuu-ui/vuu-ui-controls 3.0.0 → 3.1.0-beta.2

package/src/item-picker/ItemPicker.js

@@ -0,0 +1,210 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Input, ListBox, Option } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { applyHighlighting } from "@vuu-ui/vuu-table";
+import { DragDropProvider, pluralForm, singularForm, useSortable } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { Icon, IconButton } from "../icon-button/index.js";
+import { getItemLabel, useItemPicker } from "./useItemPicker.js";
+import ItemPicker_0 from "./ItemPicker.css";
+const classBase = "vuuItemPicker";
+const classBaseListItem = "vuuItemPickerListItem";
+const searchIcon = /*#__PURE__*/ jsx(Icon, {
+    name: "search"
+});
+const NO_SELECTION = [];
+const useSorting = (id, index)=>{
+    const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({
+        id,
+        index
+    });
+    const [handleRef, ref] = useMemo(()=>[
+            sortableHandleRef,
+            sortableRef
+        ], [
+        sortableHandleRef,
+        sortableRef
+    ]);
+    return {
+        handleRef,
+        ref
+    };
+};
+const SelectedListItem = ({ className: classNameProp, index, item, onRemove, searchPattern = "", ...optionProps })=>{
+    const { handleRef, ref } = useSorting(item.name, index);
+    const value = getItemLabel(item);
+    const valueWithHighlighting = applyHighlighting(value, searchPattern);
+    const handleRemoveButtonClick = useCallback((e)=>{
+        e.stopPropagation();
+        onRemove?.(e);
+    }, [
+        onRemove
+    ]);
+    return /*#__PURE__*/ jsxs(Option, {
+        ...optionProps,
+        className: clsx(classNameProp, classBaseListItem),
+        "data-name": item.name,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx(IconButton, {
+                "data-embedded": true,
+                appearance: "transparent",
+                icon: "draggable",
+                ref: handleRef,
+                size: 16
+            }),
+            item.icon ? /*#__PURE__*/ jsx(Icon, {
+                name: item.icon
+            }, "icon") : null,
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-text`,
+                children: valueWithHighlighting
+            }),
+            /*#__PURE__*/ jsx(IconButton, {
+                className: `${classBaseListItem}-action`,
+                "data-embedded": true,
+                appearance: "transparent",
+                icon: "cross",
+                onClick: handleRemoveButtonClick,
+                size: 16
+            })
+        ]
+    });
+};
+const AvailableListItem = ({ className: classNameProp, index, item, onAdd, searchPattern = "", disabled, ...optionProps })=>{
+    const value = getItemLabel(item);
+    const valueWithHighlighting = applyHighlighting(value, searchPattern);
+    return /*#__PURE__*/ jsxs(Option, {
+        ...optionProps,
+        className: clsx(classNameProp, classBaseListItem),
+        "data-name": item.name,
+        disabled: disabled,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-text`,
+                children: valueWithHighlighting
+            }),
+            /*#__PURE__*/ jsx(IconButton, {
+                className: `${classBaseListItem}-action`,
+                "data-embedded": true,
+                appearance: "transparent",
+                icon: "plus",
+                onClick: onAdd,
+                size: 16,
+                disabled: disabled
+            })
+        ]
+    });
+};
+const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ className, itemTypeName, allItems, selectedItems, maxSelections, onSelectedItemsChange, onSelectionChange, selected = NO_SELECTION, createCustomItemProps, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-item-picker",
+        css: ItemPicker_0,
+        window: targetWindow
+    });
+    const searchCallbackRef = useCallback((el)=>{
+        setTimeout(()=>{
+            el?.querySelector("input")?.focus();
+        }, 100);
+    }, []);
+    const { selectedItemsCount, availableItemsCount, selectedItemsFiltered, availableItemsFiltered, searchText, onChangeSearchInput, onAddItemToSelectedList, onRemoveItemFromSelectedList, onReorderSelectedItems } = useItemPicker({
+        allItems,
+        selectedItems,
+        onSelectedItemsChange,
+        maxSelections
+    });
+    const listRef = useRef(null);
+    const getOptionName = (option)=>{
+        if (option) {
+            const { name } = option.dataset;
+            if (name) return name;
+        }
+        throw Error("[ItemPicker] list option has no data-name");
+    };
+    const handleDragEnd = useCallback(()=>{
+        setTimeout(()=>{
+            const listItems = listRef.current?.querySelectorAll(".saltOption");
+            if (listItems) {
+                const orderedItemNames = Array.from(listItems).map(getOptionName);
+                onReorderSelectedItems(orderedItemNames);
+            }
+        }, 300);
+    }, [
+        availableItemsFiltered,
+        selectedItemsFiltered
+    ]);
+    const searchPlaceholderText = `Find ${singularForm(itemTypeName)}`;
+    const maxSelectionsSubHeading = maxSelections ? `(${maxSelections} max)` : "";
+    const selectedItemsHeading = `${selectedItemsCount} ${1 === selectedItemsCount ? singularForm(itemTypeName) : pluralForm(itemTypeName)} in view ${maxSelectionsSubHeading}`;
+    const availableItemsHeading = `${availableItemsCount} available ${1 === availableItemsCount ? singularForm(itemTypeName) : pluralForm(itemTypeName)}`;
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        ref: forwardedRef,
+        children: [
+            /*#__PURE__*/ jsx("form", {
+                className: `${classBase}-search`,
+                role: "search",
+                children: /*#__PURE__*/ jsx(Input, {
+                    startAdornment: searchIcon,
+                    placeholder: searchPlaceholderText,
+                    ref: searchCallbackRef,
+                    value: searchText,
+                    onChange: onChangeSearchInput
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-scrollContainer vuuScrollable`,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-sectionHeader`,
+                        children: selectedItemsHeading
+                    }),
+                    /*#__PURE__*/ jsx(DragDropProvider, {
+                        onDragEnd: handleDragEnd,
+                        children: /*#__PURE__*/ jsx(ListBox, {
+                            className: `${classBase}-selectedList`,
+                            onSelectionChange: onSelectionChange,
+                            ref: listRef,
+                            selected: selected,
+                            children: selectedItemsFiltered.map((item, index)=>/*#__PURE__*/ jsx(SelectedListItem, {
+                                    item: item,
+                                    index: index,
+                                    onRemove: onRemoveItemFromSelectedList,
+                                    searchPattern: searchText.toLowerCase(),
+                                    value: item
+                                }, item.name))
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: clsx(`${classBase}-sectionHeader`, `${classBase}-availableHeader`),
+                        children: availableItemsHeading
+                    }),
+                    /*#__PURE__*/ jsx(ListBox, {
+                        className: `${classBase}-availableList`,
+                        selected: NO_SELECTION,
+                        children: availableItemsFiltered.map((item, index)=>/*#__PURE__*/ jsx(AvailableListItem, {
+                                item: item,
+                                index: index,
+                                onAdd: onAddItemToSelectedList,
+                                searchPattern: searchText.toLowerCase(),
+                                value: item,
+                                disabled: selectedItemsCount === maxSelections
+                            }, item.name))
+                    })
+                ]
+            }),
+            createCustomItemProps ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-item-buttons`,
+                children: /*#__PURE__*/ jsx(Button, {
+                    onClick: createCustomItemProps.onClickCreateCustomItem,
+                    children: createCustomItemProps.buttonLabel
+                })
+            }) : null
+        ]
+    });
+});
+export { ItemPicker_ItemPicker as ItemPicker, classBaseListItem };

package/src/item-picker/useItemPicker.js

@@ -0,0 +1,83 @@
+import { queryClosest, reorderItems } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useState } from "react";
+const filterItems = (items, pattern)=>{
+    if (!pattern) return items;
+    {
+        const lowerCasePattern = pattern.toLowerCase();
+        return items.filter((item)=>-1 !== getItemLabel(item).toLowerCase().indexOf(lowerCasePattern));
+    }
+};
+const getItemLabel = (item)=>{
+    if (item.label) return item.label;
+    return item.name;
+};
+const itemName = (target)=>{
+    const listItem = queryClosest(target, ".saltOption", true);
+    const { name } = listItem.dataset;
+    if (name) return name;
+    throw Error("[useItemPicker] item name could not be identified, data-name attribute not found");
+};
+const byItemName = ({ name: n1 }, { name: n2 })=>n1 > n2 ? 1 : n2 > n1 ? -1 : 0;
+const useItemPicker = ({ allItems, selectedItems, maxSelections, onSelectedItemsChange })=>{
+    if (maxSelections && selectedItems.length > maxSelections) throw Error(`[useItemPicker] max selections ${maxSelections} exceeded by selected items (that has count ${selectedItems.length})`);
+    const [searchPattern, setSearchPattern] = useState("");
+    const handleChangeSearchInput = useCallback((evt)=>{
+        const { value } = evt.target;
+        setSearchPattern(value);
+    }, []);
+    const handleAddItemToSelectedList = useCallback((e)=>{
+        const name = itemName(e.target);
+        const itemToAdd = allItems.find((item)=>item.name === name);
+        if (itemToAdd) {
+            const newSelectedItems = selectedItems.concat(itemToAdd);
+            onSelectedItemsChange(newSelectedItems);
+        } else throw Error(`[useItemPicker] handleAddItemToSelectedList, item '${name}' not found`);
+    }, [
+        allItems,
+        selectedItems,
+        onSelectedItemsChange
+    ]);
+    const handleRemoveItemFromSelectedList = useCallback((e)=>{
+        const name = itemName(e.target);
+        const itemToRemove = selectedItems.find((item)=>item.name === name);
+        if (itemToRemove) {
+            const newSelectedItems = selectedItems.filter((item)=>item.name !== name);
+            onSelectedItemsChange(newSelectedItems);
+        } else throw Error(`[useItemPicker] handleRemoveItemFromSelectedList, item '${name}' not found`);
+    }, [
+        selectedItems,
+        onSelectedItemsChange
+    ]);
+    const handleReorderSelectedItems = useCallback((orderedItemNames)=>{
+        const reorderedSelectedItems = reorderItems(selectedItems, orderedItemNames);
+        onSelectedItemsChange(reorderedSelectedItems);
+    }, [
+        selectedItems,
+        onSelectedItemsChange
+    ]);
+    const getSelectedItemsFiltered = useMemo(()=>filterItems(selectedItems, searchPattern), [
+        selectedItems,
+        searchPattern
+    ]);
+    const getAvailableItemsFiltered = useMemo(()=>filterItems(allItems, searchPattern).filter(({ name })=>-1 === selectedItems.findIndex((item)=>item.name === name)).toSorted(byItemName), [
+        allItems,
+        selectedItems,
+        searchPattern
+    ]);
+    const getAvailableItemsCount = useMemo(()=>allItems.filter(({ name })=>-1 === selectedItems.findIndex((item)=>item.name === name)).length, [
+        allItems,
+        selectedItems
+    ]);
+    return {
+        selectedItemsCount: selectedItems.length,
+        availableItemsCount: getAvailableItemsCount,
+        selectedItemsFiltered: getSelectedItemsFiltered,
+        availableItemsFiltered: getAvailableItemsFiltered,
+        searchText: searchPattern,
+        onChangeSearchInput: handleChangeSearchInput,
+        onAddItemToSelectedList: handleAddItemToSelectedList,
+        onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,
+        onReorderSelectedItems: handleReorderSelectedItems
+    };
+};
+export { getItemLabel, useItemPicker };

package/src/measured-container/MeasuredContainer.css.js

@@ -0,0 +1,11 @@
+const css = `
+.vuuMeasuredContainer {
+  flex: var(--vuuMeasuredContainer-flex, none);
+  height: var(--vuuMeasuredContainer-height, var(--measured-css-height));
+  min-height: 0;
+  width: var(--measured-css-width);
+}
+
+
+`;
+export default css;

package/src/measured-container/MeasuredContainer.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { forwardRef } from "react";
+import { useMeasuredContainer } from "./useMeasuredContainer.js";
+import { useForkRef } from "@salt-ds/core";
+import clsx from "clsx";
+import MeasuredContainer_0 from "./MeasuredContainer.css";
+const baseClass = "vuuMeasuredContainer";
+const MeasuredContainer_MeasuredContainer = /*#__PURE__*/ forwardRef(function({ children, className, height, onResize, resizeStrategy, style, width, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-measured-container",
+        css: MeasuredContainer_0,
+        window: targetWindow
+    });
+    const { containerRef, ...containerMeasurements } = useMeasuredContainer({
+        height,
+        onResize,
+        resizeStrategy,
+        width
+    });
+    const { cssSize, innerSize } = containerMeasurements;
+    const unmeasured = void 0 === innerSize;
+    const getStyle = ()=>unmeasured ? {
+            ...style,
+            "--measured-css-height": `${cssSize.height}`,
+            "--measured-css-width": `${cssSize.width}`
+        } : {
+            ...style,
+            "--measured-css-height": `${cssSize.height}`,
+            "--measured-css-width": `${cssSize.width}`,
+            "--measured-px-height": `${innerSize?.height}px`,
+            "--measured-px-width": `${innerSize?.width}px`
+        };
+    const forkedRef = useForkRef(containerRef, forwardedRef);
+    return unmeasured ? /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(baseClass, `${baseClass}-ummeasured`),
+        style: getStyle(),
+        ref: containerRef
+    }) : /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(baseClass, className),
+        ref: forkedRef,
+        style: getStyle(),
+        children: children
+    });
+});
+export { MeasuredContainer_MeasuredContainer as MeasuredContainer };

package/src/measured-container/index.js

@@ -0,0 +1,2 @@
+export * from "./MeasuredContainer.js";
+export * from "./useMeasuredContainer.js";

package/src/measured-container/useMeasuredContainer.js

@@ -0,0 +1,156 @@
+import { isValidNumber, useResizeObserver } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const ClientWidthHeight = [
+    "clientHeight",
+    "clientWidth"
+];
+const WidthOnly = [
+    "clientWidth"
+];
+const HeightOnly = [
+    "clientHeight"
+];
+const NO_MEASUREMENT = [];
+const NullClientSize = {
+    clientHeight: -1,
+    clientWidth: -1
+};
+const isNumber = (val)=>Number.isFinite(val);
+const reduceSizeHeight = (size, value)=>{
+    if (0 === value) return size;
+    return {
+        height: size.height - value,
+        width: size.width
+    };
+};
+const getInitialValue = (value, defaultValue)=>{
+    if (isValidNumber(value)) return `${value}px`;
+    if ("string" == typeof value) return value;
+    return defaultValue;
+};
+const getInitialCssSize = (height, width)=>({
+        height: getInitialValue(height, "100%"),
+        width: getInitialValue(width, "auto")
+    });
+const getInitialInnerSize = (height, width)=>{
+    if (isValidNumber(height) && isValidNumber(width)) return {
+        height,
+        width
+    };
+};
+const useMeasuredContainer = ({ defaultHeight = 0, defaultWidth = 0, height, onResize: onResizeProp, resizeStrategy = "responsive", width })=>{
+    const deferResize = "defer" === resizeStrategy;
+    const sizeRef = useRef(NullClientSize);
+    const resizeHandleRef = useRef(void 0);
+    const containerRef = useRef(null);
+    const [size, setSize] = useState({
+        css: getInitialCssSize(height, width),
+        inner: getInitialInnerSize(height, width),
+        outer: {
+            height: height ?? "100%",
+            width: width ?? "auto"
+        }
+    });
+    const fixedHeight = "number" == typeof height;
+    const fixedWidth = "number" == typeof width;
+    const dimensions = fixedHeight && fixedWidth ? NO_MEASUREMENT : fixedHeight ? WidthOnly : fixedWidth ? HeightOnly : ClientWidthHeight;
+    useMemo(()=>{
+        setSize((currentSize)=>{
+            const { inner, outer } = currentSize;
+            if (isValidNumber(height) && isValidNumber(width) && inner && outer) {
+                const { height: innerHeight, width: innerWidth } = inner;
+                const { height: outerHeight, width: outerWidth } = outer;
+                if (outerHeight !== height || outerWidth !== width) {
+                    const heightDiff = isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
+                    const widthDiff = isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
+                    return {
+                        ...currentSize,
+                        outer: {
+                            height,
+                            width
+                        },
+                        inner: {
+                            height: height - heightDiff,
+                            width: width - widthDiff
+                        }
+                    };
+                }
+            }
+            return currentSize;
+        });
+    }, [
+        height,
+        width
+    ]);
+    const handleResize = useCallback((clientWidth, clientHeight)=>{
+        const { css, inner, outer } = size;
+        let newState = size;
+        if (fixedHeight && isNumber(clientWidth) && Math.floor(clientWidth) !== inner?.width) newState = {
+            css,
+            outer,
+            inner: {
+                width: Math.floor(clientWidth) || defaultWidth,
+                height
+            }
+        };
+        else if (fixedWidth && isNumber(clientHeight) && Math.floor(clientHeight) !== inner?.height) newState = {
+            css,
+            outer,
+            inner: {
+                height: Math.floor(clientHeight) || defaultHeight,
+                width
+            }
+        };
+        else if (isNumber(clientHeight) && isNumber(clientWidth) && (clientWidth !== inner?.width || clientHeight !== inner?.height)) newState = {
+            css,
+            outer,
+            inner: {
+                width: Math.floor(clientWidth) || defaultWidth,
+                height: Math.floor(clientHeight) || defaultHeight
+            }
+        };
+        if (newState !== size) setSize(newState);
+    }, [
+        defaultHeight,
+        defaultWidth,
+        fixedHeight,
+        fixedWidth,
+        height,
+        size,
+        width
+    ]);
+    const onResize = useCallback(({ clientHeight, clientWidth })=>{
+        if (deferResize) {
+            sizeRef.current.clientHeight = clientHeight;
+            sizeRef.current.clientWidth = clientWidth;
+            if (null !== resizeHandleRef.current) clearTimeout(resizeHandleRef.current);
+            resizeHandleRef.current = setTimeout(()=>{
+                handleResize(clientWidth, clientHeight);
+            }, 40);
+        } else handleResize(clientWidth, clientHeight);
+    }, [
+        deferResize,
+        handleResize
+    ]);
+    useEffect(()=>{
+        if (size.inner) {
+            if (containerRef.current) {
+                if ("number" != typeof height || 0 === height) size.inner.height = containerRef.current.clientHeight;
+                size.inner.width = containerRef.current.clientWidth;
+                onResizeProp?.(size.inner);
+            }
+        }
+    }, [
+        height,
+        onResizeProp,
+        size.inner
+    ]);
+    useResizeObserver(containerRef, dimensions, onResize, true);
+    return {
+        containerRef,
+        cssSize: size.css,
+        outerSize: size.outer,
+        innerSize: size.inner
+    };
+};
+export { reduceSizeHeight, useMeasuredContainer };

package/src/modal-provider/ModalProvider.js

@@ -0,0 +1,147 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, DialogActions, DialogCloseButton, DialogContent, DialogHeader } from "@salt-ds/core";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { Prompt } from "../prompt/Prompt.js";
+const useDialogHost = ()=>{
+    const [dialogState, setDialogState] = useState();
+    const [promptState, setPromptState] = useState();
+    const closePrompt = useCallback(()=>{
+        setPromptState(void 0);
+    }, []);
+    const closeDialog = useCallback(()=>{
+        setDialogState(void 0);
+    }, []);
+    const handleOpenChange = useCallback((open)=>{
+        if (true !== open) closeDialog();
+    }, [
+        closeDialog
+    ]);
+    const dialog = dialogState ? /*#__PURE__*/ jsxs(Dialog, {
+        open: true,
+        onOpenChange: handleOpenChange,
+        children: [
+            /*#__PURE__*/ jsx(DialogHeader, {
+                header: dialogState.title
+            }),
+            /*#__PURE__*/ jsx(DialogContent, {
+                children: dialogState.content
+            }),
+            true !== dialogState.hideCloseButton ? /*#__PURE__*/ jsx(DialogCloseButton, {
+                "data-embedded": true,
+                "data-icon": "close",
+                onClick: closeDialog
+            }) : null,
+            dialogState.actions ? /*#__PURE__*/ jsx(DialogActions, {
+                children: dialogState.actions
+            }) : null
+        ]
+    }) : null;
+    const handleOpenChangePrompt = useCallback((open)=>{
+        if (true !== open) closePrompt();
+        promptState?.promptProps.onOpenChange?.(open);
+    }, [
+        closePrompt,
+        promptState
+    ]);
+    const prompt = promptState ? /*#__PURE__*/ jsx(Prompt, {
+        ...promptState.promptProps,
+        onClose: closePrompt,
+        onOpenChange: handleOpenChangePrompt,
+        open: true,
+        children: promptState.content
+    }) : null;
+    return {
+        dialog,
+        prompt,
+        setDialogState,
+        setPromptState
+    };
+};
+const defaultShowDialog = ()=>{
+    console.warn("No DialogProvider in place");
+};
+const defaultCloseDialog = ()=>{
+    console.warn("No DialogProvider in place");
+};
+const defaultShowPrompt = ()=>{
+    console.warn("No DialogProvider in place");
+};
+const defaultClosePrompt = ()=>{
+    console.warn("No DialogProvider in place");
+};
+class DialogContextObject {
+    showDialog = defaultShowDialog;
+    closeDialog = defaultCloseDialog;
+    showPrompt = defaultShowPrompt;
+    closePrompt = defaultClosePrompt;
+    setDispatchers = (showDialog, closeDialog, showPrompt, closePrompt)=>{
+        this.showDialog = showDialog;
+        this.closeDialog = closeDialog;
+        this.showPrompt = showPrompt;
+        this.closePrompt = closePrompt;
+    };
+}
+const DialogContext = /*#__PURE__*/ createContext(new DialogContextObject());
+const DialogHost = ({ context })=>{
+    const { dialog, setDialogState, prompt, setPromptState } = useDialogHost();
+    const showDialog = useCallback((dialogContent, title, actionButtons, hideCloseButton)=>{
+        setDialogState({
+            actions: actionButtons,
+            content: dialogContent,
+            title,
+            hideCloseButton
+        });
+    }, [
+        setDialogState
+    ]);
+    const closeDialog = useCallback(()=>{
+        setDialogState(void 0);
+    }, [
+        setDialogState
+    ]);
+    const showPrompt = useCallback((content, promptProps)=>{
+        setPromptState({
+            content,
+            promptProps
+        });
+    }, [
+        setPromptState
+    ]);
+    const closePrompt = useCallback(()=>{
+        setPromptState(void 0);
+    }, [
+        setPromptState
+    ]);
+    useMemo(()=>{
+        context.setDispatchers(showDialog, closeDialog, showPrompt, closePrompt);
+    }, [
+        closeDialog,
+        closePrompt,
+        context,
+        showDialog,
+        showPrompt
+    ]);
+    return dialog ?? prompt;
+};
+const ModalProvider = ({ children })=>{
+    const context = useContext(DialogContext);
+    return /*#__PURE__*/ jsxs(DialogContext.Provider, {
+        value: context,
+        children: [
+            /*#__PURE__*/ jsx(DialogHost, {
+                context: context
+            }),
+            children
+        ]
+    });
+};
+const useModal = ()=>{
+    const { closeDialog, closePrompt, showDialog, showPrompt } = useContext(DialogContext);
+    return {
+        showDialog,
+        closeDialog,
+        showPrompt,
+        closePrompt
+    };
+};
+export { ModalProvider, useModal };